先看个例子：
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
定义和用法
addEventListener() 方法用于向指定元素添加事件句柄。
提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
语法
element.addEventListener(event, function, useCapture)
使用 on语法,能不能同时给一个标签,相同的事件类型,绑定不同的事件处理函数
var oDiv = document.querySelector('div');
// on语法 只能给 一个标签,一个事件类型,绑定一个事件处理函数
oDiv.onclick = function(){
console.log('1111');
}
oDiv.onclick = function(){
console.log('2222');
}
// 只会输出22222
事件监听语法 可以同时给一个标签,一个事件类型,绑定多个事件处理函数
var oDiv = document.querySelector('div');
// 事件监听语法 可以同时给一个标签,一个事件类型,绑定多个事件处理函数
oDiv.addEventListener( 'click' , function(){
console.log(1111);
} )
oDiv.addEventListener( 'click' , function(){
console.log(2222);
} )
oDiv.addEventListener( 'click' , function(){
console.log(3333);
} )
// 只有绑定的函数名称,可以删除
// 绑定的是一个匿名函数,无法删除的
// 每一个匿名函数,都有一个自己的地址
oDiv.removeEventListener('click' , function(){
console.log(3333);
} );
// 删除绑定的事件
oDiv.addEventListener( 'click' , fun4 );
function fun4(){
console.log(4444);
}
oDiv.removeEventListener('click' , fun4 );
参数值
event 必须。字符串，指定事件名。
注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。
function 必须。指定要事件触发时执行的函数。
当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
可能值:
true - 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行
事件的监听和删除,低版本的IE浏览器有自己的语法形式,需要做兼容处理
事件的监听
标准浏览器
标签对象.addEventListener( '事件类型,没有on' , 事件处理函数 )
低版本IE浏览器
标签对象.attachEvent( '事件类型,要有on' , 事件处理函数 )
var oDiv = document.getElementById('div');
mySetEvent(oDiv , 'click' , function(){console.log(1111)});
mySetEvent(oDiv , 'click' , fun2 );
function fun2(){
console.log(2222)
}
// 兼容处理 绑定
// 需要三个参数
// 1,事件源 : 绑定事件的标签对象
// 2,事件类型 : 绑定事件的事件类型,此处输入的参数,不要有on
// 3,事件处理函数 : 可以是 匿名函数,也可以是函数名称
function mySetEvent(element , type , fun){
// 如果有 addEventListener 这个方法,证明是普通浏览器
// 可以使用 addEventListener 这个方法
if(element.addEventListener){
// 给标签,直接绑定事件类型和事件处理函数
element.addEventListener( type , fun );
}else{
// 没有 addEventListener 这个方法,证明是低版本IE浏览器
// 使用 低版本IE浏览器语法
element.attachEvent( 'on' + type , fun );
}
}
事件的删除
标准浏览器
标签对象.removeEventListener( '事件类型,没有on' , 事件处理函数 )
低版本IE浏览器
标签对象.detachEvent( '事件类型,要有on' , 事件处理函数 )
var oDiv = document.getElementById('div');
myDelEvent(oDiv , 'click' , function(){console.log(1111)});
myDelEvent(oDiv , 'click' , fun2 );
function fun2(){
console.log(2222)
}
// 兼容处理 删除
// 需要三个参数
// 1,事件源 : 删除事件的标签对象
// 2,事件类型 : 删除事件的事件类型,此处输入的参数,不要有on
// 3,事件处理函数 : 可以是 匿名函数,也可以是函数名称
function myDelEvent(element , type , fun){
// 如果有 removeEventListener 这个方法,证明是普通浏览器
// 可以使用 removeEventListener 这个方法
if(element.removeEventListener){
// 给标签,直接绑定事件类型和事件处理函数
element.removeEventListener( type , fun );
}else{
// 没有 removeEventListener 这个方法,证明是低版本IE浏览器
// 使用 低版本IE浏览器语法
element.detachEvent( 'on' + type , fun );
}
}
事件的传播和捕获
事件的传播:
所谓的事件的传播,是 JavaScript中 事件的一种执行方式
当前标签,触发事件时,父级标签,也会触发相同类型的事件
这样事件的执行方式成为 事件的传播 / 事件的冒泡
事件的捕获
事件的传播,有两种执行方式:
1,由内而外 : 子级 ---> 父级 事件的冒泡执行方式
2,由外而内 : 父级 ---> 子级 事件的捕获执行方式
目前,所有的是浏览器,都是按照 子级 --- 父级 按照事件的冒泡方式执行
可以通过 addEventListener() 定义 第三个参数 来 设定 事件的传播 执行方式
true : 捕获方式 执行
false : 默认的执行方式 冒泡方式执行
htmlcssjs
<div class="box">
<div class="middle">
<div class="inner" ></div>
</div>
</div>
*{
margin: 0;
padding: 0;
}
.box{
width:800px ;
height: 800px;
background: pink;
}
.middle{
width:600px ;
height: 600px;
background: orange;
}
.inner{
width:400px ;
height: 400px;
background: green;
}
// 给父子级关系的三个标签,都添加相同的事件类型
// 点击 inner最里面的标签,两个父级,绑定的,点击事件,也会一起触发
var oBox = document.querySelector('.box');
var oMiddle = document.querySelector('.middle');
var oInner = document.querySelector('.inner');
// 默认值 false 冒泡 子级---父级
// 设定为 true 捕获 父级---子级
oBox.addEventListener('click' , function(){console.log('我是box触发的')} , true);
oMiddle.addEventListener('click' , function(){console.log('我是middle触发的')} , true);
// ture 输出我是box触发的-->我是middle触发的-->我是inner触发的
// flase 输出我是inner触发的-->我是middle触发的-->我是box触发的
oInner.addEventListener('click' , function(){console.log('我是inner触发的')} , true);
阻止事件的传播
在绑定事件的同时,绑定阻止事件传播的兼容语法
if(e.stopPropagation){
// 标准浏览器
e.stopPropagation();
}else{
// 低版本IE
e.cancelBubble = true;
}
htmlcssjs
<div class="box">
<div class="middle">
<div class="inner" ></div>
</div>
</div>
*{
margin: 0;
padding: 0;
}
.box{
width:800px ;
height: 800px;
background: pink;
}
.middle{
width:600px ;
height: 600px;
background: orange;
}
.inner{
width:400px ;
height: 400px;
background: green;
}
// 给父子级关系的三个标签,都添加相同的事件类型
// 点击 inner最里面的标签,两个父级,绑定的,点击事件,也会一起触发
var oBox = document.querySelector('.box');
var oMiddle = document.querySelector('.middle');
var oInner = document.querySelector('.inner');
// oBox添加阻止传播的代码,事件的传播,就到 box 为止
// box 的父级 就不会在触发相同类型的事件了
oBox.addEventListener('click', function (e) {
e = e || window.event;
if (e.stopPropagation) {
// 标准浏览器
e.stopPropagation();
} else {
// 低版本IE
e.cancelBubble = true;
}
console.log('我是box触发的');
});
// 如果给 middle 添加 阻止传播,事件的传播就到middle为止
// box 以及 body html 等父级就不会触发了
oMiddle.addEventListener('click', function (e) {
e = e || window.event;
if (e.stopPropagation) {
// 标准浏览器
e.stopPropagation();
} else {
// 低版本IE
e.cancelBubble = true;
}
console.log('我是middle触发的');
});
oInner.addEventListener('click', function (e) {
e = e || window.event;
if (e.stopPropagation) {
// 标准浏览器
e.stopPropagation();
} else {
// 低版本IE
e.cancelBubble = true;
}
console.log('我是inner触发的');
});
Comments | NOTHING