javacsript绑定事件的三种方式与各自特点
来源:互联网 发布:淘宝代购假货怎么办 编辑:程序博客网 时间:2024/05/21 10:45
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() 绑定的事件是没办法移除的。
参考资料
- 三种原生JavaScript绑定事件方式对比
- JavaScript绑定事件的方法[3种]
- javacsript绑定事件的三种方式与各自特点
- javacsript绑定事件的三种方式与各自特点
- php字符串的三种初始化方式各自的特点
- Action三种实现方式及各自特点
- JS绑定事件的三种方式
- react绑定事件的三种方式
- android的四种启动方式和各自特点
- 淘气鬼事件之事件的三种绑定方式
- react合成事件的三种绑定方式bind
- js给dom元素绑定事件的三种方式
- myisam与innodb各自的特点
- php $_GET与$_POST各自的特点
- Php与Apache的三种结合方式以及各自优缺点
- Php与Apache的三种结合方式以及各自优缺点
- 三种连接方式的特点
- map set list三种集合之间的关系及各自的特点
- 三种出错处理方式各自优缺点
- 现有的负载均衡技术的分类与各自特点
- 老农移石故事的启示分享
- 远程登录
- oracle 9i热备份
- Hive中的用户自定义函数UDF
- Hadoop安装教程_单机/伪分布式配置_Hadoop2.6.0/Ubuntu14.04
- javacsript绑定事件的三种方式与各自特点
- Spring MVC 在启动的时候是怎么初始化其特有的类的
- Maven assembly插件进行自定义构建
- oracle11g 普通视图详解
- 【OSGi】OSGi生命周期
- ORACLE表解锁(9i,10G)
- combiner中使用状态模式
- 剑指offer(一)
- (模板题)poj 3074 Sudoku(DLX算法)