js绑定事件的方法有哪些,js中事件绑定3种方法以及事件委托

　　本教程运行环境：windows7系统，javascript1.8.5版本1.8.5，戴尔G3电脑。

　　为了让浏览器在事件发生时自动调用相应的事件处理程序，需要将事件处理程序绑定到事件源(绑定的事件处理程序也称为注册的事件处理程序)。

　　绑定事件处理程序有以下 3 种方式：

　　使用HTML标记的事件属性onclick绑定事件处理程序。此方法将标记的事件属性值设置为事件处理程序。目前不推荐这种方法。

　　将事件处理程序与事件源的事件属性绑定。该方法将事件源对象的事件属性值设置为事件处理函数。

　　使用addEventListener()方法绑定事件和事件处理程序(IE9之前的版本使用attach Event()方法。

　　1、使用HTML标签的事件属性绑定处理程序

　　需要注意的是，当事件处理程序被HTML标签的event属性绑定时，event属性中的脚本代码不能包含函数声明，可以是函数调用，也可以是一系列用分号分隔的脚本代码。

　　【例 1】使用 HTML 标签的事件属性绑定事件处理程序。

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=utf-8

　　使用title标记的event属性绑定事件处理程序/标题。

　　/头

　　身体

　　type= button onclick= var name= PHP中文；alert(name)；Value=事件绑定测试/

　　/body

　　/html上面代码的button是click事件的目标对象，通过标签的event属性onclick绑定了两个脚本代码来处理事件。上述代码在Chrome浏览器中运行后，当用户点击按钮时，会弹出一个警告对话框。结果如下图所示。

　　当事件处理程序涉及2个以上的代码时，如果像例1那样绑定事件处理程序，程序的可读性会很差。为此，您可以将事件处理程序定义为一个函数，然后在事件属性中调用该函数。

　　【例 2】HTML 标签的事件属性为函数调用。

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=utf-8

　　html标签的事件属性是函数调用/标题。

　　脚本

　　函数printName(){

　　Var name=PHP中文网；

　　警报(名称)；

　　}

　　/脚本

　　/头

　　身体

　　input= button onclick= print name() value=事件绑定测试/

　　/body

　　/html上述代码的执行结果与示例1完全相同。从上面两个例子可以看出，tag event属性将JS脚本代码和HTML标签混在一起，违背了Web标准中JS和HTML应该分开的原则。因此，将事件处理程序与HTML标记的事件属性绑定是不好的，在实际应用中应该避免。

　　2、使用事件源的事件属性绑定处理程序

　　将HTML与JS分开的方法之一是通过使用事件源的event属性来绑定事件处理程序。绑定格式如下：

　　事件处理程序格式中的Obj.on event name=obj是事件源对象。绑定事件程序通常是匿名函数或函数名的定义语句。

　　源的事件属性绑定处理程序示例：

　　OBtn.onclick=function(){//oBtn是事件源对象，其click事件绑定了匿名函数定义。

　　警报(“嗨”)

　　};【例 3】使用事件源的事件属性绑定事件处理函数。

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=utf-8

　　使用标题源的event属性绑定事件处理程序/标题。

　　脚本

　　Window.onload=function(){//窗口加载事件绑定到匿名函数。

　　//定义一个名为fn的函数

　　函数fn(){

　　alert( hello )；

　　}

　　//获取事件源对象

　　var obt n1=document . getelementbyid( Bt n1 )；

　　var obt N2=document . getelementbyid( Bt N2 )；

　　//绑定匿名函数

　　oBtn1.onclick=function(){

　　alert( hi )；

　　}

　　//绑定函数名

　　oBtn2.onclick=fn

　　};

　　/脚本

　　/头

　　身体

　　Type= button id= btn1 value=绑定匿名函数

　　Type= button id= btn2 value=绑定函数名

　　/body

　　/html上面的JS代码处理三个事件：文档窗口的加载事件和两个按钮的单击事件。这三个事件的处理是通过将事件处理函数与事件源的事件属性绑定来实现的，其中第一个按钮的load事件和click事件绑定到一个匿名函数，而第二个按钮的click事件绑定到一个函数名。

　　需要特别注意的是，oBtn2绑定的函数名后面不能加“()”，否则绑定的函数会变成函数调用，在JS引擎执行这行代码时会自动调用，而在事件触发时不会执行。

　　窗口加载事件函数将在文档的所有元素都被加载后被处理，每点击一个按钮都会触发click事件。点击第一个和第二个按钮后，会分别弹出两个警告对话框“hi”和“hello”。

　　3、使用addEventListener()绑定处理程序

　　虽然使用事件源对象的事件属性绑定事件处理程序很简单，但是它有一个缺点：一个事件只能绑定一个处理程序，后面绑定的事件处理程序会覆盖前面绑定的事件处理程序。实际上，事件源的事件可以由多个函数来处理。

　　当一个事件源需要使用多个函数来处理时，可以通过从事件源调用addEventListener()来绑定事件处理函数(对于标准浏览器)来满足这个需求。通过在事件源对象上多次调用addEventListener()，事件源可以通过方法绑定多个事件函数，其中每次调用只绑定一个事件处理函数。

　　AddEventListener()是标准事件模型中的一个方法，对所有标准浏览器都有效。将事件处理程序与addEvent Liste ner()绑定的格式如下：

　　事件。addEventListener(事件名称，事件处理程序名称，是否捕获)；参数“事件名称”是不带“on”的事件名称；参数“Capture”是一个布尔值，其默认值为false。假的时候会实现事件冒泡，真的时候会实现事件捕获。

　　通过多次调用addEventListener()，可以为事件源对象的同一事件类型绑定多个事件处理程序。当一个对象发生事件时，所有绑定到该事件的事件处理程序都会被调用，并按照绑定的顺序执行。另外，需要注意的是，addEventListener()绑定的事件处理程序中的this指向事件源。

　　addEventListener()绑定处理程序的示例：

　　document . addevent listener( click ，fn1，false)；//点击事件绑定fn1函数，实现事件冒泡。

　　document . addevent listener( click ，fn2，true)；//点击事件绑定fn2函数实现事件捕获【例 4】使用 addEventListener() 绑定事件函数。

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=utf-8

　　使用标题addEventListener()/attachEvent()绑定事件函数/标题。

　　脚本

　　函数fn1(){

　　alert( fn1())；

　　}

　　函数fn2(){

　　alert( fn2())；

　　}

　　函数bindTest(){

　　document . addevent listener( click ，fn1，false)；//首先绑定fn1函数

　　document . addevent listener( click ，fn2，false)；

　　}

　　bindTest()；//调用函数

　　/脚本

　　/头

　　身体

　　/body

　　/html上述代码在浏览器中运行后，单击文档窗口时，会依次弹出显示“fn1()”和“fn2()”的警告对话框。

　　【推荐学习：javascript高级教程】以上是javascript如何绑定事件的细节。更多请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。