详解js中EventListener监听器（事件委托/事件代理）

监听器：
语法: addEventListener(event,function,userCapture) 方法
第一个参数写事件句柄，不需要加"on",直接写时间名就可以（如：click）
第二个参数是事件触发后调用的函数
第三个参数是个布尔值用于描述事件是冒泡还是捕获,该参数是可选值，默认值为false，即冒泡传递，当值为true时，为捕获传递

触发监听器事件:

//第二个参数写匿名函数
<button id="btn"></button>
<script>
document.getElementById("btn").addEventListener("click",function(){console.log("触发监听事件")});
//第二个参数使用函数名，来引用外部函数
document.getElementById("btn").addEventListener("click",func());
function func(){console.log("外部函数")
}
</script>

addEventListener()方法用于指定元素添加事件句柄
addEventListener()方法添加的事件句柄不会覆盖已存在的事件句柄
可以向一个元素添加多个事件句柄
可以向同个元素添加多个同类型的事件句柄
也可以向任何DOM对象添加事件监听，不仅仅是HTML元素
addEventListener()方法可以更简单的控制事件（冒泡与捕获）
当使用addEventListener()方法时，JavaScript从HTML标记中分离出来，可读性更强，在没有控制HTML标记时也可以添加事件监听

<button id="btn1"></button>
document.getElementById("btn1").addEventListener("click",function(){console.log("第一个点击事件")});
document.getElementById("btn1").addEventListener("click",function(){console.log("第二个点击事件")});
document.getElementById("btn1").addEventListener("click",function(){console.log("第三个点击事件")});
document.getElementById("btn1").addEventListener("dblclick",function(){console.log("双击事件")});

向window对象添加事件句柄
addEventListener()方法允许在HTML DOM 对象添加事件监听，HTML DOM对象如：HTML元素，HTML文档，window对象，或者其他支持的事件对象

document.body.addEventListener("click",function(){console.log("body")})

传递参数：

//当传递参数值时，使用函数调用带参的函数
document.getElementById("btn").addEventListener("click",funct(x,y))
function funct(x,y){var z =x+y;document.getElementById("p2").innerHTML=z;
}

事件冒泡或事件捕获？
事件传递两种方式：冒泡与捕获
事件传递定义了元素事件触发的顺序
在冒泡中，内部元素的事件会被触发，然后再触发外部元素
在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件

<div id="div"><h1 id="h1"><p id="p">p标签</p><a id="a">a标签</a></h1>
</div>
<script>
//冒泡传递
document.getElementById("div").addEventListener("click",function(){console.log("我是最外面的div")});
document.getElementById("h1").addEventListener("click",function(){console.log("我是第二层h1")});
document.getElementById("p").addEventListener("click",function(){console.log("我是最里面的p")});
document.getElementById("a").addEventListener("click",function(){console.log("我是与p平辈的a")});
//结果为 p(a) --->  h1  ---> div
</script>

<script>
//捕获传递
document.getElementById("div").addEventListener("click",function(){console.log("我是最外面的div")},true);
document.getElementById("h1").addEventListener("click",function(){console.log("我是第二层h1")},true);
document.getElementById("p").addEventListener("click",function(){console.log("我是最里面的p")},true);
document.getElementById("a").addEventListener("click",function(){console.log("我是与p平辈的a")},true);
//结果为 div --->  h1  ---> p(a)
</script>

removeEventListener()方法
移除由addEventListener()方法添加的事件句柄
移除添加的事件句柄的时候，添加的函数一定要是外部函数，不然无法定位到函数，就不能移除

<button id="btn"></button>
<script>
document.getElementById("btn").addElementListener("click",func);
document.getElementById("btn").removeElementListener("click",func);
function func(){console.log("点击事件");
}
</script>

浏览器兼容问题

IE8及更早的IE版本，Opera7.0及其更早的版本不支持addEventListener和removeEventListener()方法。
但是，对于这类浏览器版本可以使用detachEvent()方法来移除事件句柄
语法：
添加
element.attachEvent(event,function);
删除
element.detachEvent(event,function);

//跨浏览器解决方法
<p id="p"></p>
<script>
var a =document.getElementById("p");
if(a.addEventListener){a.addEventListener("click",funct)//现在主流的浏览器
}else if(a.attachEvent){a.attachEvent("click",funct);//IE8及其更早的版本
}
function funct(){console.log("浏览器兼容性");
}
</script>

详解js中EventListener监听器（事件委托/事件代理）相关推荐

php js实现流程图,详解js中构造流程图的核心技术JsPlumb（2）_javascript技巧
前言:上篇详解js中构造流程图的核心技术JsPlumb介绍了下JsPlumb在浏览器里面画流程图的效果展示,以及简单的JsPlumb代码示例.这篇还是接着来看看各个效果的代码说明. 一.设置连线的样式 ...
详解js中的继承（一）
详解js中的继承(一) 前言准备知识 1.构造函数,实例 2.原型对象 3.构造函数,原型对象和实例的关系继承原型链小结前言通过[某种方式]让一个对象可以访问到另一个对象中的属性和方法,我 ...
详解JS中的Object
详解 JS 中的 Object 从本质上看,Object 是一个构造函数,用于创建对象. 一.Object 构造函数的属性在 Object 中声明的属性只有两个: Object.length -- ...
详解JS中的事件机制(带实例)
2019独角兽企业重金招聘Python工程师标准>>> 1. 事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题 ...
详解JS中的原型与继承
每当我们提起原型链时不免会想到原型对象,对象的原型,还有众多的继承方式.于是prototype.[[prototype]].constructor等等难免在头脑中打架. 然而原型其实并不是什么高大上的 ...
详解js中typeof、instanceof与constructor
typeof返回一个表达式的数据类型的字符串,返回结果为js基本的数据类型,包括number,boolean,string,object,undefined,function.语法为typeof(da ...
html中隐式转换成数字,详解JS中的隐式类型转换
JS中隐式类型转换 JS中的数据类型 JS中的数据类型分为两大类: 1.基本数据类型: 1.String 字符串表示一段文本,例如:人的姓名.地址等 2.Number 数值 3.Boolean 布尔 ...
详解js中的undefined、NaN、null
js中三大特殊的值: undefined NaN null 1.undefined 变量声明了但为赋值 console.log(typeof undefined); //undefined conso ...
详解js中的闭包(closure)以及闭包的使用
作用域链我们知道在js中作用域分为全局作用域与局部作用域,作用域链的访问规则为从内到外,也就是说如果当前的作用域中没有该变量或者方法,则会在包含该作用域的外层作用域中,一层一层的向上找,直到wind ...

详解js中EventListener监听器（事件委托/事件代理）

详解js中EventListener监听器（事件委托/事件代理）相关推荐

最新文章

热门文章