JS addEventListener()方法

addEventListener()，事件监听，用于向指定的元素添加事件监听

语法：addEventListener(event,function,useCapture);

第一个参数event：指事件的类型（如’click’,‘mousedown’）
第二个参数function：事件触发后调用的函数
第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；值为true时，捕获传递。

例：

         <button id="btn">点击</button><script>document.getElementById("btn").addEventListener("click",function () {console.log(Date());});</script>

(它允许给一个事件注册多个监听器，且不会覆盖已存在的事件)
例：

         <button id="btn">点击</button><script>document.getElementById("btn").addEventListener("click",function () {console.log("我是第一个冒泡传递");})document.getElementById("btn").addEventListener("click",function () {console.log("我是第二个冒泡传递");})</script>

可以添加不同的事件类型
例：

         <button id="btn">点击</button><script>document.getElementById("btn").addEventListener("click",function () {console.log("我是点击的冒泡传递");});document.getElementById("btn").addEventListener("mouseover",function () {console.log("我是鼠标移入的事件传递");});document.getElementById("btn").addEventListener("mouseout",function () {console.log("我是鼠标移出的事件传递");});window.addEventListener("resize",function () {console.log("重置窗口");});</script>

使用匿名函数传递参数
例：

         <button id="btn">点击</button><script>document.getElementById("btn").addEventListener("click",function () {console.log(def(5,8));});function def(a,b) {return a*b;}</script>

removeEventListener(),用来移除事件的监听
例：

     <button id="btn">点击</button><script>document.getElementById("btn").addEventListener("click",one);function one(){console.log("我是第一个冒泡传递");};//移除事件document.getElementById("btn").removeEventListener("click",one);</script>

事件的传递有两种方式：冒泡与捕获

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素；【从里到外】
在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件。【从外到里】

例：

             <div id="box"><p id="demo">冒泡</p></div><br /><div id="div"><p id="px">捕获</p></div><script>document.getElementById("demo").addEventListener("click",function () {console.log("p元素被点击");});//false可省略document.getElementById("box").addEventListener("click",function () {console.log("div元素被点击");});document.getElementById("px").addEventListener("click",function () {console.log("第二个p元素被点击");},true);document.getElementById("div").addEventListener("click",function () {console.log("第二个div元素被点击");},true);</script>

浏览器的兼容性问题：在IE9之前，只能使用attachEvent

添加：attachEvent()方法
移除：detachEvent()方法

使用 attachEvent 方法有个缺点，this 的值会变成 window 对象的引用而不是触发事件的元素

addEventListener() 跨浏览器的解决方法
例：

     <button id="btn">点击</button><script>var x = document.getElementById("btn");if (x.addEventListener){//大部分浏览器x.addEventListener("click",def);} else if (x.attachEvent){//IE8及以下浏览器x.attachEvent("onclick",def);};function def() {alert("跨浏览器的解决方法");};</script>

冒泡传递和捕获传递：

<div id="cla"><button id="btn"><p id="mp">冒泡</p></button>
</div><br /><div id="box"><button id="btn1"><p id="bh">捕获</p></button>
</div><script>document.getElementById("cla").addEventListener("click",function(){console.log("div标签被点击");});document.getElementById("btn").addEventListener("click",function(){console.log("button标签被点击");});document.getElementById("mp").addEventListener("click",function(){console.log("p标签被点击");});document.getElementById("box").addEventListener("click",function () {console.log("div被捕获");},true);document.getElementById("btn1").addEventListener("click",function () {console.log("button被捕获");},true);document.getElementById("bh").addEventListener("click",function () {console.log("p被捕获");},true);</script>

冒泡传递：

捕获传递：

JS addEventListener()方法相关推荐

JS:attachEvent和addEventListener方法
<SCRIPT LANGUAGE="JavaScript"> <!-- /**************************************** ...
js常用对象：点击、双击、onload事件、鼠标相关、onblur事件和onfocus事件等；通过循环给多个元素添加事件、通过addEventListener() 方法监听事件函数...
1.通过标签内部添加事件 (1)onclick事件:单击事件 (2)ondbclick事件:双击事件 (3)onload事件:只能在body中使用,入口函数里有:window. .οnlοad=f ...
addEventListener方法与on事件的区别
文章出自个人博客https://knightyun.github.io/2018/05/31/js-eventlistener,转载请申明 on事件 Javascript中可以对一些页面的事件设定触发 ...
addEventListener方法
addEventListener()方法这个方法设定一个事件监听器,当某一事件发生通过设定的参数执行操作.语法是: addEventListener(event, function, useCapt ...
js 原生方法 -- 模拟浏览器的点击事件
js 原生方法 – 模拟浏览器的点击事件 1. 创建自定事件并监听可看看 MDN 的 Evnet, CustomEvent 对象 <!DOCTYPE html> <html la ...
js,addEventListener参数传递
转载自:js,addEventListener参数传递 - 股墓山庄庄主 - 博客园代码: var elems = document.getElementsByTagName('a');for (v ...
js onclick方法
js onclick方法,方法传参 <!DOCTYPE html> <html><head><meta charset="UTF-8"& ...
JS replace()方法-字符串首字母大写
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. replace()方法有两个参数,第一个参数是正则表达式,正则表达式如果带全局标志/g,则是代表替换 ...
22个超详细的 JS 数组方法
22个超详细的 JS 数组方法数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响. 一.创建数组 1.使用数组 ...

JS addEventListener()方法

JS addEventListener()方法相关推荐

最新文章

热门文章