JS事件绑定的常用方式实例总结


Posted in Javascript onMarch 02, 2019

本文实例讲述了JS事件绑定的常用方式。分享给大家供大家参考,具体如下:

常用的事件绑定的几种方式有三种:

  • 直接在 dom 元素上进行绑定。
  • 用 on 绑定。
  • 用 addEventListener、attachEvent 绑定。

一、直接在 dom 元素上进行绑定

<input id="btn1" type="button" onclick="test();" />

二、用 on 绑定

兼容性:在IE,FF,Chrome,Safari,Mozilla,Opera下都适用。

// onclick绑定
document.body.onclick = () => {
  console.log(111)
}
// 解绑
document.body.onclick = null;

但是,同一个 dom 元素上,on 只能绑定一个同类型事件,后者会覆盖前者,不同类型的事件可以绑定多个。

三、用 addEventListener、attachEvent 绑定

同一个 dom 元素上,用 addEventListener、attachEvent 可以绑定多个同类型事件。

但是,addEventListener 事件执行顺序按照事件绑定的先后顺序执行;attachEvent 事件执行顺序则是随机的。

addEventListener

// 绑定
document.body.addEventListener('click', bodyClick, false);
// 解绑
document.body.removeEventListener('click', bodyClick, false);

注意:removeEventListener 第二个参数要和 addEventListener 指向同一个函数才能解绑成功。

addEventListener 的第三个参数若为 false,函数在冒泡阶段执行;若为 true,函数在捕获阶段执行。默认为 false。

<div id="box">
   <div id="child"></div>
</div>
box.addEventListener("click", function(){
  console.log("box");
}, false);
child.addEventListener("click", function(){
  console.log("child");
});
// 执行顺序为 child box
box.addEventListener("click", function(){
  console.log("box");
}, true);
child.addEventListener("click", function(){
  console.log("child");
});
// 执行顺序为 box child

兼容性

Chrome 和 FireFox 只支持 addEventListener;IE 只支持 attachEvent(IE11开始不支持了)。

所以必须对2种方法做兼容处理。原理是先判断 attachEvent 是否为真,如果为真则用 attachEvent 绑定事件,否则用 addEventListener 绑定事件。

可以封装一个函数做兼容性处理:

//dom绑定事件的元素,ev事件名,fn执行函数
function myAddEvent(dom, ev, fn){
  if(dom.attachEvent){
    dom.attachEvent("on"+ev, fn);
  }else {
    dom.addEventListener(ev, fn, false);
  }
}
myAddEvent(d1, "click", ()=>{
  console.log(1111)
});

另外

以上三种方式绑定的点击事件都可以用下面这条语句触发

document.getElementById("btn").click();

PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.3water.com/table/javascript_event

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
JS定义类的六种方式详解
May 12 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
JS实现获取数组中最大值或最小值功能示例
Mar 02 #Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 #Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 #Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 #Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 #Javascript
Angular7.2.7路由使用初体验
Mar 01 #Javascript
vuex实现及简略解析(小结)
Mar 01 #Javascript
You might like
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
django框架auth模块用法实例详解
2019/12/10 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
生物制药专业自我鉴定
2014/02/19 职场文书
2014年终个人工作总结
2014/11/07 职场文书
庆元旦主持词
2015/07/06 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
深入理解go slice结构
2021/09/15 Golang
基于Python实现股票收益率分析
2022/04/02 Python
深入理解pytorch库的dockerfile
2022/06/10 Python