事件的三种绑定方式

Posted 不动如山岳 难如知阴阳

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件的三种绑定方式相关的知识,希望对你有一定的参考价值。

 

1.行内式绑定事件处理


<input  type="button" value="click" style="color:red" onclick="console.log(this.style.color)"/>

 

另外一种写法:

复制代码
<input  type="button" value="click" style="color:red" onclick="clickMe()"/>

function clickMe(){

//event 这是默认存在的事件对象

}
复制代码

 

这时候,这个函数的作用于这就这个对象本身(input),所以我们可以通过this获取input的任何属性。

 

缺点:

1.html与js代码的耦合性高

2.在事件函数未预编译之前,点击可能会报错

3.这样的事件处理程序在不同浏览器中的作用于链有差别

 

2.dom0级式定义事件处理程序


优点:

1.使用简单,粗暴

2.跨浏览器

 

缺点:

1.每个元素只能定义一个click事件,因为是属性式的,后面的定义会覆盖前面的定义

复制代码
var btn = document.getElementById("mybtn");

btn.onclick = function(){

  alert(this.id)

}
复制代码

 

仔细查看btn对象的话,会发现里面很多事件属性,onclick,onmouseover...

所以这种又被称为元素的方法,这里的作用域值得是元素btn。

事件触发阶段:冒泡阶段

 

3.dom3级式定义事件处理程序


这里用的就是我们常用的addEvenListener(),removeEvenListener()

 优点:

1.可定义多个事件,并依次执行。

一般都是将事件添加到事件流的冒泡阶段,以便兼容更多浏览器。

dom0定义的事件会在其所属的作用域中运行,dom0中的this指向当前对象。

dom2定义的事件会在全局作用域(window)中运行,this==window。

 转发自:http://www.cnblogs.com/zqzjs/

 

 

以上是关于事件的三种绑定方式的主要内容,如果未能解决你的问题,请参考以下文章

js中的事件绑定的三种方式

JavaScript事件的三种绑定方式事件处理程序

事件的三种绑定方式

JS中事件绑定的三种方式

JavaScript中事件绑定的三种方式

JS事件绑定的三种方式比较