脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS中绑定事件的方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

JS的事件绑定

JS中绑定事件的方法有on方法，addEventListener(W3C标准)，和IE浏览器的attachEvent。

在仔细讲解这三种绑定事件的方法之前，我们先来了解一下什么是事件的捕获和事件的冒泡。

捕获阶段

window–>document–>doucmentElement–>body–>p(target)

首先window会获捕获到事件，之后document、documentElement、body会捕获到，再之后就是在body中DOM元素一层一层的捕获到事件，有p等。 目标阶段

真正点击的元素p的事件发生了两次，因为在上面的JavaScript代码中，p既在捕获阶段绑定了事件，又在冒泡阶段绑定了事件，所以发生了两次。但是这里有一点是需要注意，在目标阶段并不一定先发生在捕获阶段所绑定的事件，而是先绑定的事件发生，一会会解释一下。 冒泡阶段

事件从p–>body–>doucmentElement–>document–>window

会和捕获阶段相反的步骤将事件一步一步的冒泡到window

IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。

1. 事件的绑定之on方法

docuemnt.getElementById(“#id”).onclick = function(){};

on方法的特点是不能给某个元素重复绑定事件，后面绑定的事件会覆盖前面的事件，只有最后绑定的事件有效。

2. 事件的绑定之addEventListener

document.getElementById(“#id”).addEventListener(“click”, function(e){}, false);

下面来解释一下三个参数的意义：

第一个参数： event 即给元素要绑定的事件名

第二个参数： function 即该事件的回调函数，即该事件发生时要执行的函数

第三个参数：这个参数表示是否使用捕获;前面说过，在绑定事件为了兼容尽量IE，所以这个参数如果不传，则默认是false，在冒泡时候执行。

若为true，则表示在捕获阶段执行。

但是该事件不兼容IE浏览器

3. 事件的绑定之attachEvent

document.getElementById(“#id”).attachEvent(“click”, function(e){});

该函数只有两个参数，因为是IE浏览器，所以是默认的在冒泡时候执行

事件绑定的函数中，浏览器会默认传入一个参数event

event.target

event.currentTarget

target是真正发生事件的元素

currentTarget是绑定事件的元素

阻止事件传播

在标准浏览器下用

event.stopPRopagation()

在IE浏览器下用

event.cancelBubble()

阻止事件的默认行为

function cancelHandler(event){

VAR event=event||window.event;//兼容IE

//取消事件相关的默认行为

if(event.preventDefault) //标准技术

event.preventDefault();

if(event.returnValue) //兼容IE9之前的IE

event.returnValue=false;

return false; //用于处理使用对象属性注册的处理程序

}

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JS中绑定事件的方法全部内容，希望文章能够帮你解决javascript代码实例教程-JS中绑定事件的方法所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。