java c 事件对比_javacsript绑定事件的三种方式与各自特点

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

点击打开链接

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

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

javascript 函数浏览器 demo html type input

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

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

1. 在HTML中直接绑定

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

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

2.在JavaScript代码中绑定

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

document.getElementById("demo").οnclick=function()

{

alert(this.getAttribute("type"));//this 指当前发生事件的HTML元素，这里是

标签

}

??但是这种方式有个严重的问题，就是只能为一个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, Opera

button.attatchEvent("onclick", function () { ... }); // IE9-

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

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

参考资料

三种原生JavaScript绑定事件方式对比

JavaScript绑定事件的方法[3种]

用云栖社区APP，舒服~

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

javacsript绑定事件的三种方式与各自特点相关教程

java c 事件对比_javacsript绑定事件的三种方式与各自特点相关推荐

React绑定this的三种方式
转载自 React绑定this的三种方式 React可以使用React.createClass.ES6 classes.纯函数3种方式构建组件.使用React.createClass会自动绑定每个方 ...
java反射之获取class对象,Java之反射机制(获取Class对象的三种方式)
Java之反射机制(获取Class对象的三种方式) 开发工具与关键技术:MyEclipse 10,java 作者:刘东标撰写时间:2019-06-14 如何得到各个字节码对应的实例对象? 每个类被加 ...
JS基础-Java Class类以及获取Class实例的三种方式
JS基础-Java Class类以及获取Class实例的三种方式由于JVM为每个加载的class创建了对应的Class实例,并在实例中保存了该class的所有信息,包括类名.包名.父类.实现的接口. ...
java 多线程编程（包括创建线程的三种方式、线程的生命周期、线程的调度策略、线程同步、线程通信、线程池、死锁等）
1 多线程的基础知识 1.1 单核CPU和多核CPU 单核CPU,其实是一种假的多线程,因为在一个时间单元内,也只能执行一个线程的任务.微观上这些程序是分时的交替运行,只不过是给人的感觉是同时运行,那 ...
js阻止事件的默认行为发生的三种方式
a标签点击跳转鼠标右键弹出菜单滑动滚轮控制滚动条等这些都是事件的默认行为,某些时候我们不需要这些行为,就需要阻止这些默认行为阻止事件默认行为用on方式添加事件 ...
React ES6组件里绑定this的三种方式
React可以使用React.createClass.ES6 classes.纯函数3种方式构建组件.使用React.createClass会自动绑定每个方法的this到当前组件,但使用ES6 cla ...
java 遍历二叉树_java实现二叉树遍历的三种方式
本文实例为大家分享了java实现二叉树遍历的具体代码,供大家参考,具体内容如下二叉树如下: 遍历结果如下: 以下是实现代码: package binTree; import java.util.St ...
java tostring格式化日期_Java格式化日期的三种方式
1)借助DateFormat类: public String toString(Date d) { SimpleDateFormat sdf = new SimpleDateFormat(" ...
java计算时间差（耗时计算）的三种方式
目录一.System.currentTimeMillis() 二.StopWatch 1.spring 用法 ①.简单用法 ②.说明 ③.方法 ④.详细用法 2.apache 用法 ①.简单用法 ② ...

java c 事件对比_javacsript绑定事件的三种方式与各自特点

java c 事件对比_javacsript绑定事件的三种方式与各自特点相关推荐

最新文章

热门文章