addEventListener方法与on事件的区别
文章出自个人博客https://knightyun.github.io/2018/05/31/js-eventlistener,转载请申明
on事件
Javascript中可以对一些页面的事件设定触发值,例如常用的点击 onclick
,鼠标移动 onmousemove
,或者移动端屏幕点击 ontouchstart
,其它类似的还有 onmousedown
, onmouseup
, onchange
, onfocus
, onmouseenter
, ontouchmove
, ontouchend
等等,可以对其设定值来实现事件触发后执行的操作,例如:
<h1 onclick="alert("hello");">Click me</h1>
点击后就会弹出提示框,也可以这样写:
<h1 onclick=(function(){alert("hello");})()>Click me</h1>
这样也能实现同样效果,只是它的值变成了一个匿名函数。
addEventListener()方法
这个方法设定一个事件监听器,当某一事件发生通过设定的参数执行操作。语法是:
addEventListener(event, function, useCapture)
- 参数
event
是必须的,表示监听的事件,例如click
,touchstart
等,就是之前不加前缀on
的事件。 - 参数
function
也是必须的,表示事件触发后调用的函数,可以是外部定义函数,也可以是匿名函数。 - 参数
useCapture
是选填的,填true
或者false
,用于描述事件是冒泡还是**捕获,true
表示捕获,默认的false
表示冒泡。
移除事件监听
如果要移除 addEventListener() 添加的事件监听,就要使用removeEventListener(),语法是:
removeEventListener(event, function)
参数与addEventListener()一致。
兼容性
IE 8及更早的版本,和Opera 7.0及更早的版本,不支持 addEventListener() 和 removeEventListener() 方法,他们使用的是一下方法代替:
添加事件:
attachEvent(event, function)
移除事件:
detachEvent(event, function)
可以用以下方法解决兼容性问题:
<div id="div1">Click me</div>
<script>var div1 = document.getElementById("div1");if (div1.addEventListener) {div1.addEventListener('click', function(){this.innerHTML = "your broswer is compatible with addEventListener!";});} else if (div1.attachEvent) {div1.attachEvent('click', function(){this.innerHTML = "your broswer is not compatible with addEventListener!"});}
</script>
冒泡与捕获
这个参数设置的是元素事件的触发顺序,即页面中某元素设置了事件监听,其内部元素也设置有事件监听,冒泡是先触发最内部元素的事件,再依次触发外一层元素的事件,捕获刚好相反,由外到内依次触发。
综合举例:
<div id="parent1"><div id="child1" style="height:200px;background:#0cc">冒泡</div>
</div>
<div id="parent2"><div id="child2" style="height:200px;background:#0cc">捕获</div>
</div><script>var parent1 = document.getElementById("parent1");var child2 = document.getElementById("child1");var parent2 = document.getElementById("parent2");var child2 = document.getElementById("child2");parent1.addEventListener('click', function(){alert("this is parent element");});child1.addEventListener('click', function(){alert("this is child element");});parent2.addEventListener('click', function(){alert("this is parent element");}, true);child2.addEventListener('click', function(){alert("this is child element");}, true);
</script>
点击“冒泡”模块,先提示子元素后提示父元素;点击“捕获”模块,由于同时设置为 true
,先提示父元素后提示子元素。
区别
为某元素设定事件触发函数时,可能会觉得addEventListener和on事件的功能差不多,但是,addEventListener除了可以设置元素触发顺序外,还能多次绑定事件,因为 on 事件多次绑定的话会出现覆盖。
举例说明:
<div id="div1" style="height:200px;background:#0cc">
Click me
</div><script>var dib1 = document.getElementById("div1");div1.addEventListener('click', function(){alert("message1");});div1.addEventListener('click', function(){alert("message2");});
</script>
结果会依次提示“message1”,“message2“。
但是js这么写的话:
div1.onclick = function(){alert("message1");
};
div1.onclick = function(){alert("message2");
}
这里就只会提示最后一个“message2”,因为onclick作为对象div1的一个属性,第二次对其进行赋值就会覆盖之前的函数值,这样on事件在某些场合就不适用了。
技术文章推送 手机、电脑实用软件分享
addEventListener方法与on事件的区别相关推荐
- js常用对象:点击、双击、onload事件、鼠标相关、onblur事件和onfocus事件等;通过循环给多个元素添加事件、通过addEventListener() 方法 监听事件函数...
1.通过标签内部添加事件 (1)onclick事件:单击事件 (2)ondbclick事件:双击事件 (3)onload事件:只能在body中使用,入口函数里有:window. .οnlοad=f ...
- addEventListener() 方法,事件监听
addEventListener() 方法,事件监听 你可以使用 removeEventListener() 方法来移除事件的监听. 语法 element.addEventListener(event ...
- addEventListener( ) 方法 -- 事件监听
addEventListener()方法,即为事件监听:且同一元素目标可重复添加,不会覆盖之前相同事件:可以使用removeEventListener()方法来移除事件的监听. 语法: eleme ...
- addEventlistener()方法,事件监听
addEventListener()方法,即为事件监听:可以使用removeEventListener()方法来移除事件的监听. element 可以是 window.document.oDiv 等 ...
- 扫盲-----addEventlistener()方法,事件监听(一)
一.扫盲事件起因 时间:2018年6月1日周五下午,原本我以为我已经把当前的bug改好,应该没啥问题了,坐等下班公司聚餐(开心) 突然,隔壁同组大哥,哎....cp,你看看,你这个首页报了很多错哎.我 ...
- HTML DOM addEventListener() 方法
实例 为 <button> 元素添加点击事件. 当用户点击按钮时,在 id="demo" 的 <p> 元素上输出 "Hello World&quo ...
- IE和DOM事件流、普通事件和绑定事件的区别
IE和DOM事件流的区别 IE采用冒泡型事件 Netscape(网络信息浏览器)使用捕获型事件 DOM使用先捕获后冒泡型事件 示例: <body> <div> <butt ...
- js元素事件的绑定与解绑,绑定事件的区别
一.元素事件的绑定 第一种方式 /** * @param {*} element 元素 * @param {*} type 事件类型* @param {*} fn 事件处理函数 */ element[ ...
- 移动端touch事件和click事件的区别
移动端touch事件和click事件的区别 1.touch事件 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动 ...
最新文章
- ashx文件和HttpHandler
- 01Python基础_09异常
- JAVA开发环境的搭建(配置JAVA开发环境)
- 0基础linux运维,Linux运维基础
- C#与C++的几个不同之处知识点
- 常见的几个大数据名词:OLAP、OLTP、BI到底代表着什么?
- ASP.NET跨页面传值技巧总结【转】
- python3.7 安装cx_Freeze
- 八大排序算法的Python实现
- Mysql学习总结(44)——Linux下如何实现mysql数据库每天自动备份定时备份
- nginx重启无法找到PId的解决办法
- IE、Chrome、Firefox下的按钮文字居中
- android 向下动画,使用向上/向下滑动动画显示和隐藏视图
- 超图s3m服务加载时添加token
- EGM2008大地水准面模型在工程中的应用综述
- tomcat到底是干什么用的?白话理解
- 产业“上链”至深处,京东云如何作为?
- eli和字符串(尺取算法)牛客网2020寒假训练营1
- 使用ScriptableObject代替部分配置表的坑点
- 用FineReport报表系统构建资金监管平台