Js之on和addEventListener的使用與不同

?

一.首先介紹兩者的用法： 1.on的用法：以onclick為例 第一種： obj.onclick = function(){ //do something.. } 第二種： obj.οnclick= fn; function fn (){ //do something... } 第三種：當函數fn有參數的情況下使用匿名函數來傳參： obj.onclick = function(){fn(param)}; function fn(param){ //do something.. } 不能夠這樣寫:錯誤寫法：obj.οnclick= fn(param): 因為這樣寫函數會立即執行，不會等待點擊觸發，特別注意一下 2.addEventListener的用法： 形式： addEventListener(event,funtionName,useCapture) 參數： event:事件的類型如 “click” funtionName：方法名 useCapture(可選)：布爾值，指定事件是否在捕獲或冒泡階段執行。

• • true - 事件句柄在捕獲階段執行
  • false- false- 默認。事件句柄在冒泡階段執行

寫法： 第一種： obj.addEventListener("click",function(){ //do something })); 第二種，沒參數可以直接寫函數名 obj.addEventListener("click",fn,fasle)); function fn(){ //do something.. } 第三種：函數有參數時需要使用匿名函數來傳遞參數 obj.addEventListener("click",function(){fn(parm)},false); 二.兩者的區別 1.on事件會被后面的on的事件覆蓋 以onclick為例： //obj是一個dom對象，下同
//注冊第一個點擊事件 obj.onclick(function(){ alert("hello world"); }); //注冊第二個點擊事件 obj.onclick(function(){ alert("hello world too"); }); 最終會只有彈框輸出： hello world too 2.addEventListener 則不會覆蓋。 //注冊第一個點擊事件 obj.addEventListener("click",function(){ alert("hello world"); })); //注冊第二個點擊事件 obj.addEventListener("click",function(){ alert("hello world too"); })); 這樣會連續輸出： hello world hello world too 三.addEventListener注意事項： 1.特別說明addEventListener不被IE9以下兼容，IE9以下用使用attachEvent()
obj.attachEvent(event,funtionName); 參數： event:事件類型（需要寫成“onclick”前面加on，這個與addEventListener不同） funtionName:方法名（要參數是也是需要使用匿名函數來傳參） 四.事件集合： 1.鼠標事件：

• click(單擊)
• dbclick(雙擊)
• mousedown(鼠標按下)
• mouseout(鼠標移走)?
• mouseover(鼠標移入)
• mouseup(鼠標彈起)
• mousemove(鼠標移動)

2.鍵盤事件：

• keydown(鍵按下)
• keypress(按鍵)
• keyup(鍵起來)

3.HTML事件：

• load（加載頁面）?
• unload（卸載離開頁面）
• change（改變內容）
• scroll（滾動）??
• focus（獲得焦點）
• blur（失去焦點）

五.總結： onXXX與addEventListener都是為dom元素添加事件監聽，使其在事件發生后執行相應的代碼，操作。有了它們我們實現了頁面與用戶交互。 作者：Ry-yuan 本文是個人總結得出。 轉載請標明出處，本文地址：http://www.cnblogs.com/Ry-yuan/p/6865632.html

轉載于:https://www.cnblogs.com/Ry-yuan/p/6865632.html

總結

以上是生活随笔為你收集整理的JavsScript--on与addEventListener的使用与两者的不同的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。