addEventListener 用來註冊事件處理程序,IE 中為 attachEvent,我們為什麼講 addEventListener 而不講 attachEvent 呢?一來 attachEvent 比較簡單,二來 addEventListener 是 DOM 中的標準內容。
學習我們php中文網的影片課程:獨孤九賤(3)_JavaScript影片教學
簡介
addEventListener 為文件節點、document、window 或XMLHttpRequest 註冊事件處理程序,在以前我們一般是1022ead51269b7255fb0bbc1f03626a3 元素插入到 dc6dce4a544fdca2df29d5ac0ea9906b 元素中,用户点击 e388a4556c0f65e1904146cc1a846bee 元素, 哪个元素的 "click" 事件先被触发呢?
在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: e388a4556c0f65e1904146cc1a846bee 元素的点击事件先触发,然后会触发 dc6dce4a544fdca2df29d5ac0ea9906b 元素的点击事件。
在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: dc6dce4a544fdca2df29d5ac0ea9906b 元素的点击事件先触发 ,然后再触发 e388a4556c0f65e1904146cc1a846bee 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:
addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。
document.getElementById("myDiv").addEventListener("click", myFunction, true);
一般情况下,如果给一个dom对象绑定同一个事件,只有最后一个会生效,比如:
document.getElementById("btn").onclick = method1; document.getElementById("btn").onclick = method2; document.getElementById("btn").onclick = method3;
那么将只有method3生效。
如果是Mozilla系列,用addEventListener可以让多个事件按顺序都实现,比如:
var btn1Obj = document.getElementById("btn1"); //element.addEventListener(type,listener,useCapture); btn1Obj.addEventListener("click",method1,false); btn1Obj.addEventListener("click",method2,false); btn1Obj.addEventListener("click",method3,false);
执行顺序为method1->method2->method3
如果是ie系列,用attachEvent可以让多个事件按顺序都实现,比如:
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function); btn1Obj.attachEvent("onclick",method1); btn1Obj.attachEvent("onclick",method2); btn1Obj.attachEvent("onclick",method3);
执行顺序为method3->method2->method1
相关内容推荐: