点击打开链接

javacsript绑定事件的三种方式与各自特点

feipeng8848 2017-04-11 10:12:00 浏览12 评论0

javascript 函数 浏览器 demo html type input

摘要： javacsript绑定事件的三种方式与各自特点 1. 在HTML中直接绑定 在HTML中绑定函数还有两种方式：原生函数和自定义函数（原文链接：链接）   当JavaScript代码偏少的时候，这种方式还能勉

javacsript绑定事件的三种方式与各自特点

---

1. 在HTML中直接绑定

<input type="button" value="Click me!" onclick="doSomething();" />

在HTML中绑定函数还有两种方式：原生函数和自定义函数（原文链接：链接） 

  当JavaScript代码偏少的时候，这种方式还能勉强接受。当代码规模变大的时候，这种方式明显地带来很多不方便的东西。例如修改行为的时候还需要去修改HTML文件，这不是我们想要看到的。我们希望HTML与JavaScript能够分开维护，当修改行为的时候不要修改负责显示的东西。所以就有了下面这个绑定事件的方式。

---

2.在JavaScript代码中绑定

  在JavaScript代码中（即< script >标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。

<input  id="demo"  type="button"  value="点击我，显示 type 属性" /><script type="text/javascript">document.getElementById("demo").onclick=function(){    alert(this.getAttribute("type"));//this 指当前发生事件的HTML元素，这里是<div>标签}</script>

  但是这种方式有个严重的问题，就是只能为一个DOM元素的一个事件绑定唯一一个事件处理程序，重复绑定会覆盖了第一个绑定的事件处理程序，如：

button.onclick = function (evt) { alert(1); }button.onclick = function (evt) { alert(2); }

  以上代码，单击button只会弹出2，第一个事件处理程序已经被覆盖了。而且在低版本的IE浏览器里面这种写法很容易就会导致DOM与JavaScript对象的循环引用，导致内存泄露。

---

3.使用addEventListener() 或 attachEvent()

button.addEventListener("click", function (evt) { ... }, true); // IE9, IE9+, Chrome, Safari, Operabutton.attatchEvent("onclick", function () { ... }); // IE9-

  DOM level 2的事件绑定机制可以让我们把HTML和JavaScript代码分开，也支持为一个DOM的同一个事件绑定多个事件处理程序，基本满足了我们对事件绑定的需求。由于IE这个奇葩不支持事件捕获机制，所以要写跨浏览器的代码，只能使用冒泡来传播事件哦！

  removeEventListener() 是解绑利用addEventListener() 绑定的事件，这里有一点需要注意：addEventListener()添加的事件只能用removeEventListener() 解绑，而且使用匿名函数的addEventListener() 绑定的事件是没办法移除的。

---

参考资料

1. 三种原生JavaScript绑定事件方式对比
2. JavaScript绑定事件的方法[3种]

用云栖社区APP，舒服~

【云栖快讯】2017云栖大会·成都峰会 5月23日开幕！十余场技术论坛，百余名分享嘉宾，更有重磅发布。现场坐席有限，报名倒计时中！  详情请点击