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 相关文章推荐
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 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+MySQL5.0中文乱码解决方法
2006/11/20 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
Python字符转换
2008/09/06 Python
urllib2自定义opener详解
2014/02/07 Python
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
python实发邮件实例详解
2019/11/11 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
师德学习感言
2014/01/31 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers