JS----addEventListener()

addEventListener() 用于向指定元素添加事件。

可以向一个元素添加多次事件或者多次不同事件，后面的事件是不会覆盖前面的。
语法：
element.addEventListener(event,fn,useCaption );
参数说明：tr件，比如 click mouseenter mouseleave
fn 回调函数
useCaption 用于描述是冒泡还是捕获。默认值是false，即冒泡传递。
当值为true，就是捕获传递。
示例代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>addEventListener</title><script type="text/javascript" src="js/jquery-3.0.0.js"></script><style type="text/css">#content {width: 100px;height: 50px;background: red;font-size: 20px;color: #fff;text-align: center;line-height: 50px}</style>
</head><body><div id="content">点击</div><script type="text/javascript">//addEventListener 用于向指定元素添加事件句柄//可以向一个元素添加多次点击事件，后一个点击事件不会覆盖前一个点击事件var content = document.getElementById("content");content.addEventListener("click", function () {alert("支持此方法1");console.log("11");}, false)content.addEventListener("click", function () {alert("支持此方法2");console.log("22");add();}, false)content.addEventListener("mouseenter", add, false);function add() {console.log("我和你");}content.removeEventListener("mouseenter", add, false);var content = document.getElementById("content");if (content.addEventListener) {content.addEventListener(event, add);} else if (content.attchEvent) {content.attchEvent(event, add);} 123456function add() {console.log("我们在一起");}</script>
</body></html>

注意：

removeEventListener() 不能移除匿名函数，像上面add()这种是可以的。
IE8及更早版本和Opear 7.0及更早版本不支持addEventListener()和removeEventListener(),对于这类浏览器我们可以使用detachEvent()来移除事件。

element.detachEvent(event,fn);

跨浏览器解决方案：

var content = document.getElementById("content");
if(content.addEventListener){content.addEventListener(event,add);
}else if(content.attchEvent){content.attchEvent(event,add);
}

function add(){console.log("我们在一起");
}

转载于:https://www.cnblogs.com/liaohongwei/p/9718146.html

JS----addEventListener()相关推荐

js,addEventListener参数传递
转载自:js,addEventListener参数传递 - 股墓山庄庄主 - 博客园代码: var elems = document.getElementsByTagName('a');for (v ...
JS addEventListener()方法
addEventListener(),事件监听,用于向指定的元素添加事件监听语法:addEventListener(event,function,useCapture); 第一个参数event:指事 ...
js addEventListener() 事件总结
说明: addEventListener() 方法用于向指定元素添加监听事件.且同一元素目标可重复添加,不会覆盖之前相同事件,配合 removeEventListener() 方法来移除事件. 使用方 ...
js addEventListener绑定事件方法(详细介绍）
addEventListener是一种给元素绑定事件的方法例如绑定点击事件,这样元素在被点击之后就会执行一些操作 let element = document.getElementById(&quo ...
JS addEventListener多次绑定同一事件，触发多次
今天项目上遇到一个问题,是因为addEventListener绑定事件时,执行了多次,导致执行了多次事件.在不能让绑定事件执行一次的情况下有没有办法解决这个问题呢? 模拟代码: function ha ...
要取代 Node.js 的 Deno 还活着吗?
作者 | Fernando Doglio 译者 | 弯月出品 | CSDN(ID:CSDNnews) 早在 2020 年 5 月,我就写了一篇介绍 Deno 的文章,后来还写了一本书.我喜欢 Den ...
js多线程解释与运用
1,提出问题执行一个同步操作时,如果耗时非常长,导致主线程堵塞的问题问题的产生:由于用户界面和js进程公用一个线程,js高强度的计算会导致浏览器无暇顾忌用户界面,进入假死状态2,多线程通过使用 web ...
Web Worker javascript多线程编程（一）
什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...
详解 Web Worker，不再止步于会用
前面的章节都是告诉你怎么使用Worker,并没有真正的深入Worker的原理,这一章我们就来详细的了解一下Worker的原理. Worker 的全局作用域 WorkerGlobalScope是Work ...
JavaScript note
1.浏览器 IE--trident Chrome--webkit / blink Firefox--gecko Opera--presto Safari--webkit 2.数据类型 a. 原始值: ...

JS----addEventListener()

JS----addEventListener()相关推荐

最新文章

热门文章