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 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
JQuery循环滚动图片代码
Dec 08 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 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
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
三种php连接access数据库方法
2013/11/11 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
php常用数组函数实例小结
2016/12/29 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
jquery 无限级联菜单案例分享
2013/03/26 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
Python出现segfault错误解决方法
2016/04/16 Python
Python中一行和多行import模块问题
2018/04/01 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
python连接PostgreSQL过程解析
2020/02/09 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
python怎么提高计算速度
2020/06/11 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
国际会议邀请函范文
2014/01/16 职场文书
元旦晚会邀请函
2014/01/27 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python