DOM事件
-
事件冒泡
IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深 的那个节点)接收,然后逐级向上传播到较为不具体的节点。<!DOCTYPE html> <html> <head> <title>Event Bubbling Example</title> </head> <body> <div id="myDiv">Click Me</div> </body> </html>
如果你单击了页面中的<div>元素,那么这个 click 事件会按照如下顺序传播:(1) <div> (2) <body> (3) <html> (4) document
-
事件捕获
事件捕获的思想 是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在 事件到达预定目标之前捕获它。
如果仍以前面的 HTML 页面作为演示事件捕获的例子,那么单击元素就会以下列顺序触发 click 事件。(1) document (2) <html> (3) <body> (4) <div>
-
DOM事件流
“DOM2级事件”规定的事件流包括三个阶段:
(1)事件捕获阶段
(2)处于目标阶段
(3)事件冒泡阶段
首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段,可以在这个阶段对事件做出响应。 -
事件处理方式:
(1)DOM0
每个元素(包括 window 和 document)都有自己的事件处理程序属性,这些属性通常全部小写, 例如 onclick。将这种属性的值设置为一个函数,就可以指定事件处理程序,如下所示:var btn = document.getElementById("myBtn"); btn.onclick = function(){ alert("Clicked"); }; btn.onclick = null; //删除事件处理程序
(2)DOM2
用于处理指定和删除事件处理程序的操作:
1⃣️ addEventListener()
2⃣️ removeEventListener()
所有 DOM 节点中都包含这两个方法,并且它们都接受 3 个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true,表示在捕获阶段调用事件处理程序;如果是 false,表示在冒泡阶段调用事件处理程序。var btn = document.getElementById("myBtn"); btn.addEventListener("click", function(){ alert(this.id); }, false); btn.addEventListener("click", function(){ alert("Hello world!"); }, false);
添加两个,按照顺序触发(3)IE事件处理
attachEvent()和 detachEvent()。这两个方法接受相同 的两个参数:事件处理程序名称与事件处理程序函数,只有冒泡。与上面的事件命不同,多一个‘on‘。添加两个,相反的顺序进行。btn.attachEvent("onclick", function(){ alert("Clicked"); });
-
跨浏览器事件
1 var EventUtil = { 2 addHandler: function(element, type, handler){ 3 4 if (element.addEventListener){ 5 6 element.addEventListener(type, handler, false); 7 8 } else if (element.attachEvent){ 9 10 element.attachEvent("on" + type, handler); 11 12 } else { 13 14 element["on" + type] = handler; 15 16 } 17 18 }, 19 20 removeHandler: function(element, type, handler){ 21 22 if (element.removeEventListener){ 23 24 element.removeEventListener(type, handler, false); 25 26 } else if (element.detachEvent){ 27 28 element.detachEvent("on" + type, handler); 29 30 } else { 31 32 element["on" + type] = null; 33 34 } } 35 36 }; 37 38 getEvent: function(event){ 39 40 return event ? event : window.event; 41 42 }, 43 44 getTarget: function(event){ 45 46 return event.target || event.srcElement; 47 48 }, 49 50 preventDefault: function(event){ 51 52 if (event.preventDefault){ 53 54 event.preventDefault(); 55 56 } else { 57 58 event.returnValue = false; 59 60 } 61 62 }, 63 64 stopPropagation: function(event){ 65 66 if (event.stopPropagation){ 67 68 event.stopPropagation(); 69 70 } else { 71 72 event.cancelBubble = true; 73 74 } } 75 76 };
自定义事件
var myEvent = new Event('event_name'); window.dispatchEvent(myEvent); 可以通过上面的事件监听
-
参考: JS高级程序设计