JavaSE 顺序查找 CANopen authentication dll loam算法测试 io jtable lazyloadjs vue特点 后台管理模板下载 后台模板 直销系统源码 小程序下拉刷新样式 docker创建容器 python线程 python开发 java字符串长度 java教材 java怎么学 java读取文件 java文件输入输出 python源码 python教程下载 网站数据分析工具 字幕制作软件哪个好 vbs编程教学 16进制编辑器 java获取时间戳 苹果放大镜 碧桂园园宝 pmbok第六版 1667 spss20安装教程 联想小新键盘灯怎么开 ug拔模 sendto函数 服务器文件共享软件 ftp客户端软件 卧龙推广
当前位置: 首页 > 学习教程  > 

原生js中的事件监听方法

2020/10/16 18:03:49 文章标签: js原生点击事件

好久没有使用过原生 js 中的监听方法,竟然发现有些陌生,几个方法之间的区别也有些混乱了。不过看过了API文档,又将他们之间的区别和用法理清楚了,这里进行总结。 一、传统事件绑定方法 我们在学习的时候,最初接触的事…

好久没有使用过原生 js 中的监听方法,竟然发现有些陌生,几个方法之间的区别也有些混乱了。不过看过了API文档,又将他们之间的区别和用法理清楚了,这里进行总结。

一、传统事件绑定方法

  • 我们在学习的时候,最初接触的事件绑定方式大多是传统事件绑定方法。传统事件绑定方法事例如下:
window.onload=function(){
    alert("页面加载完毕");
}
document.getElementById("btn").onclick=function(){
    alert("按钮被点击");
}
document.onmousemove=function(){
    console.log("鼠标在移动");
}
  • 传统事件绑定方法的特点如下:

    1. 事件名称之间一定要加上on,比如:onclick、onload、onmousemove

    2. 兼容主流的浏览器,包括低版本的IE。

    3. 当同一个元素绑定多个事件时,只有最后一个事件会被添加,并且传播模式只能是冒泡模式。

二、addEventListener()

  • 方法事例:
window.addEventListener('load',init,false);
function init(){
    alert("页面加载成功");
}
// 下面写法与上面等价
window.addEventListener('load',function(){
    alert("页面加载成功");
},false);
  • 浏览器兼容性: Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法,Opera 7.0 及 Opera 更早版本也不支持。

  • addEventListener()方法特点:

    1. element.addEventListener(event, function, useCapture)中的第三个参数可以控制指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行。false- 默认- 事件句柄在冒泡阶段执行。

    2. addEventListener() 可以给同一个元素绑定多个事件,不会发生覆盖的情况。如果给同一个元素绑定多个事件,那么采用先绑定先执行的规则。

    3. addEventListener() 在绑定事件的时候,事件名称之前不需带 on

    4. 注意该方法的兼容性,如果要兼容 IE6-8 ,不能使用该方法,可以采用以下方法。

    5. 可以使用 removeEventListener() 来移除之前绑定过的事件。

// 向 <div> 元素添加事件句柄
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

// 移除 <div> 元素的事件句柄
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

三、attachEvent()

  • 方法事例:
window.attachEvent('onload',function(){
    alert("页面加载成功");
});
  • attachEvent()方法特点:

    1. attachEvent是 IE 有的方法,它不遵循W3C标准,而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener,所以实际开发中需分开处理。

    2. attachEvent()是 后绑定先执行

    3. 绑定时间时,attachEvent必须带 on,如 onclick,onmouseover

四、总结

  • 在我们实际的项目里面,在使用原生js绑定事件的时候,大多数情况下会使用 addEventListener() ,因为目前来说很少有人使用低版本IE了,大多数项目不会要求兼容 IE6-8
  • 如果项目要求兼容 IE6-8 ,这个时候可以考虑 attachEvent(),但是不建议这样使用,这样的话需要些兼容代码,不仅繁琐而且容易出错,这个时候就建议使用jQuery库直接进行事件绑定,jQuery已经帮我们做好了兼容处理的工作,直接饮用,提高效率。

本文链接: http://www.dtmao.cc/news_show_300355.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?