开发者社区> feipeng8848> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: javacsript绑定事件的三种方式与各自特点 1. 在HTML中直接绑定 <input type="button" value="Click me!" onclick="doSomething();" /> 在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, Opera
button.attatchEvent("onclick", function () { ... }); // IE9-

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

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


参考资料

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript 进阶第四章(定义函数的三种方式 )
JavaScript 进阶第四章(定义函数的三种方式 )
14 0
JavaScript 创建元素的三种方式
JavaScript 创建元素的三种方式
29 0
Spring之路(35)–使用JavaConfig配置Spring+SpringMVC+MyBatis(SSM)项目完整实例
本文目录 1. 背景 2. 本篇讲述方式 3. 新建项目 4. 导入jar包 5. 配置web项目 6. 配置Spring容器 6.1 将xml配置改为配置类 6.2 修改sqlSessionFactory配置 6.3 修改dataSource配置 6.4 修改MapperScannerConfigurer配置 6.5 修改扫描包 6.6 其他配置 7. 配置mybatis-config.xml 8. 编写映射文件 9. 开发各层逻辑代码 10. 总结
75 0
CDN云课堂预告 | 技术专家直播分享:如何在CDN边缘节点执行你的JavaScript?
阿里云CDN将Serverless和边缘计算的优势相融合,推出边缘轻量编程环境—EdgeRoutine,4月27日(周一)晚19:00,阿里云CDN技术专家将带来一场线上直播,分享阿里云CDN边缘轻量编程环境-EdgeRoutine的原理、使用场景和实践案例
1749 0
好程序员HTML5培训技术分享JavaScript 闭包
  1. 概述   闭包(closures),在 MDN 解释为:   Closures are functions that refer to independent (free) variables (variables that are used locally, but defined in an enclosing scope).
1392 0
Javascript事件绑定的几种方式
 Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器):   [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后边附录。
980 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载