文章来源：http://www.cnblogs.com/ninofocus/archive/2012/11/07/javascript-event-bind.html
http://www.cnblogs.com/zhangmingze/p/4864367.html
http://www.cnblogs.com/pfzeng/p/4156668.html
传统方式
element.onclick = function(e){ // ... };
- 传统绑定的优点
- 非常简单和稳定，可以确保它在你使用的不同浏览器中运作一致
- 处理事件时，this关键字引用的是当前元素，这很有帮组
- 传统绑定的缺点
- 传统方法只会在事件冒泡中运行，而非捕获和冒泡
- 一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数
- 事件对象参数(e)仅非IE浏览器可用
W3C方式
element.addEventListener('click', function(e){
// ...
}, false);
- W3C绑定的优点
- 该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于addEventListener最后的参数设置：false (冒泡) 或 true (捕获)。
- 在事件处理函数内部，this关键字引用当前元素。
- 事件对象总是可以通过处理函数的第一个参数(e)捕获。
- 可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件
- W3C绑定的缺点
- IE不支持，你必须使用IE的attachEvent函数替代。
IE方式
element.attachEvent('onclick', function(){
// ...
});
- IE方式的优点
- 可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件。
- IE方式的缺点
- IE仅支持事件捕获的冒泡阶段
- 事件监听函数内的this关键字指向了window对象，而不是当前元素（IE的一个巨大缺点）
- 事件对象仅存在与window.event参数中
- 事件必须以ontype的形式命名，比如，onclick而非click
- 仅IE可用。你必须在非IE浏览器中使用W3C的addEventListener
ele.onclik = null; //解绑单击事件，将onlick属性设为null即可
2、addEventListener(event.type, handle, boolean); IE8及以下不支持，属于DOM2级的方法，可添加多个方法不被覆盖
//事件类型没有on，false 表示在事件第三阶段（冒泡）触发，true表示在事件第一阶段（捕获）触发。 如果handle是同一个方法，只执行一次。 ele.addEventListener('click', function(){ }, false); //解绑事件，参数和绑定一样 ele.removeEventListener(event.type, handle, boolean);
3、attachEvent(event.type, handle ); IE特有，兼容IE8及以下，可添加多个事件处理程序，只支持冒泡阶段
//如果handle是同一个方法，绑定几次执行几次，这点和addEventListener不同,事件类型要加on,例如onclick而不是click ele.attachEvent('onclick', function(){ }); //解绑事件，参数和绑定一样 ele.detachEvent("onclick", function(){ });
4、默认事件行为：href=""链接，submit表单提交等
● 阻止默认事件：
（1）return false; 阻止独享属性（通过on这种方式）绑定的事件的默认事件
ele.onclick = function() { …… //你的代码 return false; //通过返回false值阻止默认事件行为 };
（2）event.preventDefault( ); 阻止通过 addEventListener( ) 添加的事件的默认事件
element.addEventListener("click", function(e){
var event = e || window.event;
……
event.preventDefault( ); //阻止默认事件
},false);
（3）event.returnValue = false; 阻止通过 attachEvent( ) 添加的事件的默认事件
element.attachEvent("onclick", function(e){
var event = e || window.event;
……
event.returnValue = false; //阻止默认事件
},false);
5、接下来我们把事件绑定以及事件解绑封装成为一个函数，兼容浏览器，包括IE6及以上
// 事件绑定 function addEvent(element, eType, handle, bol) { if(element.addEventListener){ //如果支持addEventListener element.addEventListener(eType, handle, bol); }else if(element.attachEvent){ //如果支持attachEvent element.attachEvent("on"+eType, handle); }else{ //否则使用兼容的onclick绑定 element["on"+eType] = handle; } }
// 事件解绑 function removeEvent(element, eType, handle, bol) { if(element.addEventListener){ element.removeEventListener(eType, handle, bol); }else if(element.attachEvent){ element.detachEvent("on"+eType, handle); }else{ element["on"+eType] = null; } }
-----------------------------------------------------------------------------------------------------------------------------------------------
来个例子吧，如果要单独点击table里面的td，普通做法是for循环给每个td绑定事件，td少的话性能什么差别，td如果多了，就不行了，我们使用事件委托:
<!-- HTML --> <table id="out" border="1" style="cursor: pointer;"> <tr> <td>table01</td> <td>table02</td> <td>table03</td> <td>table04</td> <td>table05</td> <td>table06</td> <td>table07</td> <td>table08</td> <td>table09</td> <td>table10</td> </tr> </table>
1 var out = document.getElementById("out"); 2 if(out.addEventListener){ 3 out.addEventListener("click",function(e){ 4 var e = e||window.event; 5 //IE没有e.target，有e.srcElement 6 var target = e.target||e.srcElement; 7 //判断事件目标是否是td，是的话target即为目标节点td 8 if(target.tagName.toLowerCase()=="td"){ 9 changeStyle(target); 10 console.log(target.innerHTML); 11 } 12 },false); 13 }else{ 14 out.attachEvent("onclick",function(e){ 15 var e = e||window.event; 16 //IE没有e.target，有e.srcElement 17 var target = e.target||e.srcElement; 18 //判断事件目标是否是td，是的话target即为目标节点td 19 if(target.tagName.toLowerCase()=="td"){ 20 changeStyle(target); 21 console.log(target.innerHTML); 22 } 23 }); 24 }; 25 }; 26 function changeStyle(ele){ 27 ele.innerHTML = "已点击" 28 ele.style.background="#900"; 29 ele.style.color = "#fff"; }
冒泡篇：
先来看一段实例：
js:
var $input = document.getElementsByTagName("input")[0]; var $div = document.getElementsByTagName("div")[0]; var $body = document.getElementsByTagName("body")[0]; $input.onclick = function(e){ this.style.border = "5px solid red" var e = e || window.e; alert("red") } $div.onclick = function(e){ this.style.border = "5px solid green" alert("green") } $body.onclick = function(e){ this.style.border = "5px solid yellow" alert("yellow") }
html:
<div> <input type="button" value="测试事件冒泡" /> </div>
依次弹出”red“,"green","yellow"。
你的本意是触发button这个元素，却连同父元素绑定的事件一同触发。这就是事件冒泡。
如果对input的事件绑定改为：
$input.onclick = function(e){
this.style.border = "5px solid red"
var e = e || window.e;
alert("red")
e.stopPropagation();
}
这个时候只会弹出”red“
因为阻止了事件冒泡。
捕获篇：
既然有事件的冒泡，也可以有事件的捕获，这是一个相反的过程。区别是从顶层元素到目标元素或者从目标元素到顶层元素。
来看代码：
$input.addEventListener("click", function(){
this.style.border = "5px solid red";
alert("red")
}, true)
$div.addEventListener("click", function(){
this.style.border = "5px solid green";
alert("green")
}, true)
$body.addEventListener("click", function(){
this.style.border = "5px solid yellow";
alert("yellow")
}, true)
这个时候依次弹出”yellow“,"green","red"。
这就是事件的捕获。
如果把addEventListener方法的第三个参数改成false，则表示只在冒泡的阶段触发，弹出的依次为：”red“,"green","yellow"。
阻止默认事件篇：
有一些html元素默认的行为，比如说a标签，点击后有跳转动作；form表单中的submit类型的input有一个默认提交跳转事件；reset类型的input有重置表单行为。
如果你想阻止这些浏览器默认行为，JavaScript为你提供了方法。
先上代码
1 var $a = document.getElementsByTagName("a")[0]; 2 $a.onclick = function(e){ 3 alert("跳转动作被我阻止了") 4 e.preventDefault(); 5 //return false;//也可以 6 }
<a href="http://www.nipic.com">昵图网</a>
默认事件没有了。
既然return false 和 e.preventDefault()都是一样的效果，那它们有区别吗？当然有。
仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。
注意：以上都是基于W3C标准，没有考虑到IE的不同实现。
1482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
