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 相关文章推荐
Javascript学习笔记4 Eval函数
Jan 11 Javascript
JS 控件事件小结
Oct 31 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
JS随机数产生代码分享
Feb 24 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
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设计模式中的工厂模式
2008/06/12 PHP
php实现的ping端口函数实例
2014/11/12 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
Python处理PDF与CDF实例
2020/02/26 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
医院护士求职自荐信格式
2013/09/21 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
护理实习生带教计划
2015/01/16 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android