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:方法名(要引數是也是需要使用匿名函式來傳參)
若有不足請多多指教!希望給您帶來幫助!