本文深入解析JavaScript中的事件处理机制，包括事件的定义、分类及绑定方式。探讨了DOM0级事件与DOM2级事件的区别，如何通过不同方法绑定和解除事件监听器，以及在不同浏览器版本下的兼容性处理。
什么是事件？？？
事件是可以被 JavaScript 检测到的用户行为的。
事件的分类
- 鼠标事件
- 滚轮事件
- 键盘事件
- 资源事件
- window事件
那么如何绑定一个点击事件？？（DOM0级事件）只能添加一个
通过等号赋值的方式绑定一个点击事件
#box{
width: 200px;
height: 200px;
background-color: pink;
}
<div id="box"></div>
var oBox = document.getElementById('box');//通过id的方式获取元素
//给oBox绑定了一个点击事件 等号右侧的是事件处理函数
oBox.onclick = function(){
console.log('我被点击了');
};
//通过等号赋值把事件函数赋值给了oBox的onclick属性
点击鼠标左键触发了五次我被点击了
那么怎么验证通过等号赋值把事件函数赋值给了oBox的onclick属性？？
var oBox = document.getElementById('box');
oBox.onclick = function(){
console.log('我被点击了');
};
console.dir(oBox);//没有赋值onclick结果是null
console.dir() 可以显示一个对象所有的属性和方法。
oBox属性上的onclick属性：后面是事件函数
oBox属性上的onclick属性：后面没有赋值事件函数
通过等号赋值的方式给元素绑定的一个点击事件，等号后面的是事件函数。
直接在HTML标签上绑定onclick点击事件（缺点：会造成HTML和JS的代码混乱）不符合表现形式分离的理念（不建议用）
#box{
width: 200px;
height: 200px;
background-color: pink;
}
<div id="box" onclick="heaven()"></div><!-- 必须加() -->
<!--也是相当于个id="box"绑了一个点击事件,heaven是函数表达式名字加上()执行函数-->
var oBox = document.getElementById('box');
function heaven (){
console.log('我被点击了');
};
那么这种方法有没有赋值给了oBox的onclick属性呢？？
<div id="box" onclick="heaven()"></div>
var oBox = document.getElementById('box');
function heaven (){
console.log('我被点击了');
};
能通过直接在HTML标签上绑定onclick实现点击事件的
那么我们可以把onclick上的函数打印出来
<div id="box" onclick="heaven()"></div>
var oBox = document.getElementById('box');
function heaven (){
console.log('我被点击了');
};
console.log(oBox.onclick);//打印当前的onclick里面的函数
通过直接在HTML标签上直接写一个onclick属性，等号右边的代码会写在原生JS中的一个叫
onclick函数当中
那么一个dom元素可以绑定多个事件处理函数吗？？
var oBox = document.getElementById('box');
oBox.onclick = function(){
console.log('我被点击了');
};
oBox.onclick = function(){
console.log('heaven');
};
那么后面赋值的函数肯定把前面赋值的函数给覆盖掉
看oBox里面的onclick属性里面是什么
一个dom对象只能绑定一个事件处理函数
通过事件绑定的形式 dom元素只能有一个事件处理函数 则这种形式叫做DOM0级事件（弊端只能绑定一个dom元素）
事件监听（DOM2级事件）可以添加多个【常用】
那怎么给oBox这个元素添加一个事件监听器呢？？？
给dom这个节点添加事件监听器
dom.addEventListener(事件字符串,回调函数（具名/匿名）,布尔值)IE8以上
var oBox = document.getElementById('box');
//给oBox这个节点添加事件监听器
oBox.addEventListener('click',function(){//回调函数
console.log('我被点击了');
},false);//监听点击事件做的事情
那怎么让一个dom元素添加多个事件监听器呢
var oBox = document.getElementById('box');
oBox.addEventListener('click',function(){//'click':事件字符串
console.log('我被点击了');
},false);
oBox.addEventListener('click',function(){//事件处理函数
console.log('heaven');
}, false);//click事件有多个事件处理函数
//DOM2级事件可以给一个dom元素添加多个事件监听器
点击了2回
通过事件监听的形式， dom元素可以有多个事件处理函数 ，则这种形式叫做DOM2级事件
那IE8以上版本的，事件监听器里面的回调函数this指向谁？？？
var oBox = document.getElementById('box');
oBox.addEventListener('click',function(){
console.log(this);
},false);
点击了3回
在IE8以上版本的浏览器addEventListener事件监听器，里面的回调函数内部的this指向自身
如何在在IE低版本给oBox这个节点添加事件监听器？？？
给dom这个节点添加事件监听器
dom.attachEvent(事件字符串,回调函数（具名/匿名）)IE8以下
var oBox = document.getElementById('box');
oBox.attachEvent('onclick',function(){//添加事件监听器IE8以下
console.log('heaven');
});//事件字符串需要加on
点击了5回
那IE低版本的，事件监听器里面的回调函数this指向谁？？？
var oBox = document.getElementById('box');
oBox.attachEvent('onclick',function(){
console.log(this);
})
在IE低版本dom.attachEvent事件监听器，里面的回调函数内部的this指向window
解除事件处理函数
解除事件处理函数（DOM0级事件）
有的时候我们需要解除这个事件处理函数的，那个怎么办？？？
var oBox = document.getElementById('box');
oBox.onclick = function(){
console.log('我被点击了');
};
//让oBox解除事件处理函数（解除DOM0级事件）
oBox.onclick = null;//改变onclick的值
怎么让oBox元素1000ms之后解除事件处理函数呢？？
var oBox = document.getElementById('box');
oBox.onclick = function(){
console.log('我被点击了');
};
//1000ms之后给oBox解除事件处理函数
setTimeout(function(){
oBox.onclick = null;
},1000);
1000ms之前点击了6下（已经解除不能点击）
解除事件处理函数（DOM2级事件）
给dom这个节点解除事件处理函数
dom.removeEventListener(事件字符串,回调函数（必须是具名）,布尔值)（IE8以上）
在DOM2级事件中，匿名函数不能解除监听器，那我们需要把匿名函数改为具名函数函数表达式，然后再解除事件处理函数。
有的时候我们需要解除这个事件处理函数的，那个怎么办？？？（有名函数）
var oBox = document.getElementById('box');
oBox.addEventListener('click',auto,false);
function auto(){
console.log('我被点击了');
};
oBox.removeEventListener('click',auto,false);
//让oBox解除事件处理函数（解除DOM2级事件）
怎么让oBox元素1000ms之后解除事件处理函数呢？？ （有名函数）
var oBox = document.getElementById('box');
oBox.addEventListener('click',auto,false);
function auto (){
console.log('我被点击了');
};
setTimeout(function(){
oBox.removeEventListener('click',auto,false);
//解除click事件，函数名auto；
},1000);//1秒钟之后解除了click事件
1000ms之前点击了4下（已经解除不能点击）
为什么匿名函数不能解除事件处理函数呢？？
那为什么，解除事件处理函数（DOM2级事件）中只能用具名的回调函数？？
因为：
function函数是引用值，引用值操作的是地址。function(){}而匿名的回调函数他是能占据内存地址的但是操作不到地址，function auto (){}而具名的函数回调他能操作到本身地址的（因为也名字）也能占据内存
验证：arguments.callee是指向自身函数
验证：1
var x = (function(){//匿名函数表达式
return arguments.callee;
})();//加上()执行
上面画白圈的地方是等于下面的函数的
验证： 2
function auto (){
console.log(auto);
console.log(arguments.callee);
}
auto();
console.log(auto)是完全等于 console.log(arguments.callee)的，那么这两个做=== 运算呢？？？
=== 判断两个数据是否全等 ：true全等，flase不全等
结果是true全等，说明了auto在内存中的地址和arguments.callee在内存中地址是一样的
结论：任何函数的arguments.callee 都指向自函数
那如何解绑匿名事件处理函数呢？？？（匿名函数）
var oBox = document.getElementById('box');//获取id元素
oBox.addEventListener('click',function(){
console.log('我被点击了');//打印我被点击了
oBox.removeEventListener('click',arguments.callee,false);
//arguments.callee指向自身函数
},false);
JS是重上到下加载的，他是清除掉下面的事件函数而不是上面的
怎么让oBox元素1000ms之后解除事件处理函数呢？？ （匿名函数）
var oBox = document.getElementById('box');//获取id元素
oBox.addEventListener('click',function(){
var fn = arguments.callee;
//arguments.callee 指向自身函数，这是才能指向上面的回调函数，先存储起来在使用。
console.log('我被点击了');//打印
setTimeout(function(){
oBox.removeEventListener('click',fn,false);//清除事件处理函数
},1000);//一秒之后清除事件处理函数
},false)
1000ms之前点击了4下（已经解除不能点击）
那IE8以下的浏览器该怎么事件处理函数？？
dom.detachEvent(事件字符串,回调函数（必须是具名）)（IE8以下）
解除具名函数回调
var oBox = document.getElementById('box');
oBox.attachEvent('onclick',auto);
function auto (){
console.log('我被点击了');
};
//解除IE8以下具名函数
oBox.detachEvent('onclick',auto);
解除IE8以下匿名函数
var oBox = document.getElementById('box');
oBox.attachEvent('onclick',function(){
console.log('我被点击了');//JS程序从上到下先打印在解除
//解除IE8以下匿名函数
oBox.detachEvent('onclick',arguments.callee);
});
1000毫秒之后解除IE8以下匿名函数
var oBox = document.getElementById('box');
oBox.attachEvent('onclick',function(){
var fn = arguments.callee;
console.log('我被点击了');
setTimeout(function(){
oBox.detachEvent('onclick',fn);
},1000);//1000毫秒之后解除匿名函数
});
封装addEvent兼容函数
var oBox = document.getElementById('box');
function addEvent(dom,type,callBack){
if(dom.addEventListener){ //如果是谷歌
dom.addEventListener(type,callBack)
}else{ //如果是IE低版本
dom.attachEvent('on'+type,function(){//这个匿名的回调函数this-->window
callBack.call(dom);//修改callBack的this指向
})
}
}
addEvent(oBox,'click',function(){
console.log('我被点击了')
})
扫一扫
546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
