addEventListener()、attachEvent()和removeEventListener()、detachEvent()的差别?
addEventListener()和attachEvent()的差别? addEventListener:在HTML元素上绑定事件,FF、chrome、opera、safari及IE9浏览器以上的支持 attachEvent:在HTML元素上绑定事件。仅仅有IE浏览器支持 attachEvent语法:
element.attachEvent(event, function) event:事件名。注意要使用“on”前缀,如 onclick function:指定事件触发时运行的函数var outerDiv = document.getElementById("outerDiv"); outerDiv.attachEvent("onclick", outerFn);
addEventListener语法:
element.addEventListener(event, function, useCapture) event:事件名,注意不使用“on”前缀。如 click function:指定事件触发时运行的函数 useCapture:指定事件是否在捕获或冒泡阶段运行。
true:在捕获阶段运行
false:在冒泡阶段进行。默认值为false;
var outerDiv = document.getElementById("outerDiv"); outerDiv.addEventListener("click", outerFn, true);
我们来理解一下addEventListener的第三个參数useCapture,这个參数是可选的。 首先我们先定义一个HTML
.container { width:100px; height:100px; color:#fff; text-align:center; font:bold 20px/100px "微软雅黑"; background-color: #c60; cursor:pointer; }<div id="outerDiv" class="container"> <div id="innerDiv" class="container" >请点我</div> </div>我们先将addEventListener的第三个參数设置默认的false:var console = console || {log: function( p ){ alert(p)}}; function outerFn(event) { console.log("outerDiv Event"); } function innerFn(event) { console.log("innerDiv Event"); } var outerDiv = document.getElementById("outerDiv"); if ( document.addEventListener ) { outerDiv.addEventListener("click", outerFn, false); } else { outerDiv.attachEvent("onclick", outerFn); } var innerDiv = document.getElementById("innerDiv"); if ( document.addEventListener ) { innerDiv.addEventListener("click", innerFn, true); } else { innerDiv.attachEvent("onclick", innerFn); }运行结果:useCapture为false的意思是运行的是冒泡阶段,所以打印的效果是
我们先将addEventListener的第三个參数设置默认的true:var console = console || {log: function( p ){ alert(p)}}; function outerFn(event) { console.log("outerDiv Event"); } function innerFn(event) { console.log("innerDiv Event"); } var outerDiv = document.getElementById("outerDiv"); if ( document.addEventListener ) { outerDiv.addEventListener("click", outerFn, true); } else { outerDiv.attachEvent("onclick", outerFn); } var innerDiv = document.getElementById("innerDiv"); if ( document.addEventListener ) { innerDiv.addEventListener("click", innerFn, true); } else { innerDiv.attachEvent("onclick", innerFn); }运行结果:useCapture为true的意思是运行的是捕获阶段,所以打印的效果是
addEventListener事件有捕获阶段或冒泡阶段,那attachEvent事件? attachEvent仅仅有冒泡阶段、通过IE浏览器打印结果看先弹出一个innerDiv对话框
再弹出还有一个outerDiv对话框
普通情况下我们不希望出现冒泡或捕获,当点击div.innerDiv元素时不须要触发div.outerDiv事件,怎么办呢?接下来我们能够看以下这二个属性:event.stopPropagation(); 支持FF=> 停止传播event.cancelBubble = true; 支持IE => 取消冒泡var console = console || {log: function( p ){ alert(p)}}; function outerFn(event) { console.log("outerDiv Event"); } function innerFn(event) { console.log("innerDiv Event"); if ( event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = false; } } var outerDiv = document.getElementById("outerDiv"); if ( document.addEventListener ) { outerDiv.addEventListener("click", outerFn, false); } else { outerDiv.attachEvent("onclick", outerFn); } var innerDiv = document.getElementById("innerDiv"); if ( document.addEventListener ) { innerDiv.addEventListener("click", innerFn, true); } else { innerDiv.attachEvent("onclick", innerFn); }removeEventListener()和detachEvent()的差别?removeEventListener:在HTML元素上移出绑定事件,FF、chrome、opera、safari及IE9浏览器以上的支持 detachEvent:在HTML元素上移出绑定事件,仅仅有IE浏览器支持detachEvent定、语法: element.detachEvent(event, function) event:事件名,注意要使用“on”前缀。如 onclick function:指定事件触发时运行的函数 removeEventListener语法: element.removeEventListene(event, function, useCapture) event:事件名,注意不使用“on”前缀,如 click function:指定事件触发时运行的函数 useCapture:指定事件是否在捕获或冒泡阶段运行。true:在捕获阶段运行 false:在冒泡阶段进行。默认值为false;
假设加入时用的捕获阶段。那么在移除时也要用捕获阶段。否则无法移除它们。假设是同一个元素同一个调用函数同一个useCapture值绑定多次,在移除时仅仅须要运行一次移除。注意: 假设加入两次事件句柄,一次在捕获阶段。一次在冒泡阶段。你必须单独移除该事件。
假如在div.outerDiv上绑定二次,一次是冒泡、一次是捕获试,在移除绑定时也要移除二次,一次是冒泡。一次是捕获var console = console || {log: function( p ){ alert(p)}}; function outerFn(event) { console.log("outerDiv Event"); } function innerFn(event) { console.log("innerDiv Event"); if ( event.stopPropagation ) { event.stopPropagation(); } else { event.cancelBubble = true; } } var outerDiv = document.getElementById("outerDiv"); //绑定一次 冒泡方式 if ( document.addEventListener ) { outerDiv.addEventListener("click", outerFn, false); } else { outerDiv.attachEvent("onclick", outerFn); } // 绑定二次 捕获方式 if ( document.addEventListener ) { outerDiv.addEventListener("click", outerFn, true); } else { outerDiv.attachEvent("onclick", outerFn); } //移除绑定一次 冒泡方式 if ( document.addEventListener ) { outerDiv.removeEventListener("click", outerFn, false); } else { outerDiv.detachEvent("onclick", outerFn); } // 移除绑定二次 捕获方式 if ( document.addEventListener ) { outerDiv.removeEventListener("click", outerFn, true); } else { outerDiv.detachEvent("onclick", outerFn); }
posted on 2017-07-08 18:41 cynchanpin 阅读(598) 评论(0) 编辑 收藏 举报