标签：
事件流：描述的是在页面中接收事件的顺序 事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档） 事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件 DOM中：用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener()。他们都接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值(事件处理的时候)[true:事件捕获时;false:事件冒泡时] DOM中的事件对象： type属性 用于获取事件类型; target属性 用于获取事件目标 stopPropagation()方法 用于阻止事件冒泡 preventDefault()方法 用于阻止事件的默认行为 IE中：attachEvent()和detachEvent()，接收相同的两个参宿：事件处理程序的名称和事件处理程序的函数。 IE中的事件对象： type属性 用于获取事件类型 srcElement属性 用于后去事件目标 cancelBubble属性 用于阻止事件冒泡[true:阻止事件冒泡;false:不阻止事件冒泡;] returnValue属性 用于阻止事件的默认行为 [false:阻止事件的默认行为;] 测试例子： <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>JS事件测试</title> <script> var eventUtil = { //添加事件 addHandler: function(element, type, handler){ if(element.addEventListener){ //非IE下 element.addEventListener(type, handler, false); }else if(element.attachEvent){ element.attachEvent(‘on‘ + type, handler); }else{ //IE下 element[‘on‘ + type] = handler; } }, //删除事件 removeHandler: function(element, type, handler){ if(element.removeEventListener){ //非IE下 element.removeEventListener(type, handler, false); }else if(element.detachEvent){ element.detachEvent(‘on‘ + type, handler); }else{ //IE下 element[‘on‘ + type] = null; } }, //获取目标元素 getElement: function(event){ return event.target || event.srcElement; }, //阻止默认行为 preventDefault: function(event){ if(event.preventDefault){ //非IE下 event.preventDefault(); }else{ //IE下 event.returnValue = false; } }, //阻止事件冒泡 stopPropagation: function(event){ if(event.stopPropagation){ //非IE下 event.stopPropagation(); }else{ //IE下 event.cancelBubble = true; } } }; var btn = null, div = null; window.onload = function(){ btn = document.getElementById(‘id‘); eventUtil.addHandler(document.getElementById(‘divId‘), ‘click‘, showDivMsg); eventUtil.addHandler(document.getElementById(‘addId‘), ‘click‘, addEvent); eventUtil.addHandler(document.getElementById(‘removeId‘), ‘click‘, removeEvent); } function addEvent(){ eventUtil.addHandler(btn, ‘click‘, showMsg); } function removeEvent(){ eventUtil.removeHandler(btn, ‘click‘, showMsg); } function showMsg(event){ alert(eventUtil.getElement(event).getAttribute(‘data‘) + ‘事件‘); eventUtil.preventDefault(event); eventUtil.stopPropagation(event); } function showDivMsg(){ alert("DIV事件"); } </script> </head> <body> <div id="divId" data="事件冒泡"> <a id="id" href="http://baidu.com" data="默认行为">跳转</a> <span data="span">测试事件冒泡与事件捕获</span> <input type="button" value="添加按钮" id="addId" data="添加"/> <input type="button" value="删除按钮" id="removeId" data="删除"/> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/xiaoxian1369/p/4928804.html
