Js之on和addEventListener的使用與不同
一.首先介紹兩者的用法：
1.on的用法：以onclick為例
第一種：
obj.onclick = function(){
//do something..
}
第二種：
obj.onclick= fn;
function fn (){
//do something...
}
第三種：當函數fn有參數的情況下使用
匿名函數來傳參：
obj.onclick = function(){fn(param)};
function fn(param){
//do something..
}
不能夠這樣寫:錯誤寫法：obj.onclick= 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以下用使用
addEvent()
obj.addEvent(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元素添加事件監聽，使其在事件發生后執行相應的代碼，操作。有了它們我們實現了頁面與用戶交互。