js--補漏篇 addEventListener/attachEvent 和onXXX的用法及區別
首先介紹它們的用法：
1.addEventListener()的用法：（同一個 dom 元素上，addEventListener 同/不同型別事件可以繫結多個。）
形式：addEventListener(event,funtionName,useCapture)
引數：
event:事件的型別如 “click”（不要使用 "on" 字首。 例如，使用 "click" ,而不是使用 "onclick"。）
funtionName：方法名
useCapture(可選)：布林值，指定事件是否在捕獲或冒泡階段執行。
-
- true - 事件控制代碼在捕獲階段執行
- false- false- 預設。事件控制代碼在冒泡階段執行
寫法：
第一種：
obj.addEventListener("click",function(){
//do something
}));
第二種，沒引數可以直接寫函式名
obj.addEventListener("click",fn,fasle));
funciton fn(){
//do something..
}
第三種：函式有引數時需要使用匿名函式來傳遞引數
obj.addEventListener("click",function(){fn()parm},false);
繫結多個事件的案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>muzidigbig</title> </head> <body> <p>該例項使用 addEventListener() 方法在按鈕中新增多個事件。</p> <button id="myBtn">點我</button> <p id="demo"></p> <script> var x = document.getElementById("myBtn"); x.addEventListener("mouseover", myFunction); x.addEventListener("click", mySecondFunction); x.addEventListener("click", mySecondFunction1); x.addEventListener("mouseout",function () { document.getElementById("demo").innerHTML += "滑鼠離開!<br>" }); function myFunction() { document.getElementById("demo").innerHTML += "滑鼠經過!<br>" } function mySecondFunction() { document.getElementById("demo").innerHTML += "點選!<br>" } function mySecondFunction1() { alert('點選！') } </script> </body> </html>
addEventListener裡最後一個引數決定該事件的響應順序：
如果為true事件執行順序為 addEventListener ---- 標籤的onclick事件 ---- document.onclick
如果為false事件的順序為 標籤的onclick事件 ---- document.onclick ---- addEventListener
清除事件：
形式：element.removeEventListener(event, function, useCapture)
| event | 必須。要移除的事件名稱。. 注意: 提示: 所有 HTML DOM 事件，可以檢視我們完整的 HTML DOM Event 物件參考手冊。 |
| function | 必須。指定要移除的函式。 |
| useCapture | 可選。布林值，指定移除事件控制代碼的階段。 可能值：
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>muzidigbig</title>
<style>
#myDiv{
background-color: pink;
border: 1px solid;
padding: 50px;
color: white;
}
</style>
</head>
<body>
<div id="myDiv"> div 元素添加了 onmousemove 事件，在你移動滑鼠時會顯示隨機數。
<p>點選按鈕移除 Div 的事件控制代碼。</p>
<button onclick="removeHandler()" id="myBtn">點我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDiv").addEventListener("mousemove", myFunction);
function myFunction()
{
document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler()
{
document.getElementById("myDiv").removeEventListener("mousemove", myFunction);
}
</script>
</body>
</html>2.onXXXX的用法：以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):
因為這樣寫函式會立即執行，不會等待點選觸發，特別注意一下
3.attachEvent()的用法：（同一個 dom 元素上，attachEvent 同/不同型別事件可以繫結多個。）
attachEvent是IE有的方法，它不遵循W3C標準
形式：addEventListener(event,funtionName,useCapture)
引數：
event:事件的型別如 “onclick”（要使用 "on" 字首。 例如，使用 "onclick"）
funtionName：方法名
useCapture(可選)：布林值，指定事件是否在捕獲或冒泡階段執行。
-
- true - 事件控制代碼在捕獲階段執行
- false- false- 預設。事件控制代碼在冒泡階段執行
不同點：
1.attachEvent是IE有的方法，它不遵循W3C標準，而其他的主流瀏覽器如FF等遵循W3C標準的瀏覽器都使用addEventListener，所以實際開發中需分開處理。
2.多次繫結後執行的順序是不一樣的，attachEvent是後繫結先執行，addEventListener是先繫結先執行。
區別
1.onxxxx事件會被後面的onxxxx相同的事件覆蓋；addEventListener /attachEvent則不會覆蓋。
2.addEventListener注意事項：
特別說明addEventListener不被IE9以下相容，IE9以下用使用addEvent()；
obj.addEvent(event,funtionName);
引數：
event:事件型別（需要寫成“onclick”前面加on，這個與addEventListener不同）
funtionName:方法名（要引數是也是需要使用匿名函式來傳參）
若有不足請多多指教！希望給您帶來幫助！