事件侦听
- addEventListener : 非 IE 7 8 下使用
- 语法： 元素.addEventListener('事件类型'， 事件处理函数， 冒泡还是捕获)
要点：
- 侦听事件函数不能带入参数；
- 侦听事件函数有且仅有一个参数e,就是事件接收到事件对象，其他函数没有；
- 事件函数不能写return 返回值，但是可以用return跳出，不再执行下去；
<button id="bn0">按钮</button>
<script>
var bn=document.querySelector("button");
bn.addEventListener("click",clickHandler1);
bn.addEventListener("click",clickHandler2);
function clickHandler1(e){
num++;
console.log("aaa");
if(num>1){
// this是事件侦听的对象
// e.currentTarget.removeEventListener("click",clickHandler1);
//将clickHandler1事件移除
this.removeEventListener("click",clickHandler1);
}
}
function clickHandler2(e){
// console.log("bbb");
console.log(e.type)
}
</script>
注意：
- 当你点击 bn 的时候，两个函数都会执行，并且会按照你注册的顺序执行
- 当元素的事件不再使用时，必须删除，否则会造成内存堆积，侦听事件都会被存储在堆中
- 当元素被删除了，也必须删除该元素的所有事件
- attachEvent ：IE 7 8 下使用
- 语法： 元素.attachEvent('事件类型'， 事件处理函数)
bn.attachEvent('onclick', function () {
console.log('我是第一个事件')
})
bn.attachEvent('onclick', function () {
console.log('我是第二个事件')
})
当你点击 bn 的时候，两个函数都会执行，并且会按照你注册的顺序倒叙执行
先打印 我是第二个事件 再打印 我是第一个事件
注意： 事件类型的时候要写 on，点击事件就行 onclick
两个方式的区别
- 注册事件的时候事件类型参数的书写
addEventListener ： 不用写 on
attachEvent ： 要写 on
-参数个数
addEventListener ： 一般是三个常用参数
attachEvent ： 两个参数
-执行顺序
addEventListener ： 顺序注册，顺序执行
attachEvent ： 顺序注册，倒叙执行
-适用浏览器
addEventListener ： 非 IE 7 8 的浏览器
attachEvent ： IE 7 8 浏览器
addEventListener() 和 onclick的区别：
- onclick不能同时执行两个函数，addEventListener()可以执行两个不同的函数；
- 移除事件侦听的方式不同
document.onclick=function(){
document.onclick=null;//移除事件侦听
console.log("a")
}
//事件会覆盖上面的事件
document.onclick=function(){
console.log("b");
}
document.addEventListener("click",clickHandler1);
document.addEventListener("click",clickHandler2);
function clickHandler1(e){
//移除事件侦听
document.removeEventListener("click",clickHandler1);
console.log("a");
}
function clickHandler2(e){
//不会覆盖上面的事件
console.log("b")；
}
- 事件匿名函数的不断迭代就会造成回调地狱，而使用事件注册时用的是命名函数就会减少造成回调地狱
// 事件匿名函数的不断迭代就会造成回调地狱
document.onclick=function(){
var bn=document.querySelector("button");
bn.onclick=function(){
console.log("aaa");
}
}
注意：以后写函数就不使用匿名函数
- addEventListener可以在捕获阶段和冒泡阶段触发，而onclick只能冒泡阶段触发
document.body.addEventListener("click", clickHandler);//冒泡阶段执行
document.body.addEventListener("click", clickHandler,true);//捕获阶段执行
- onclick支持IE低版本，addEventListener不支持IE8一下，低版本的IE使用 attachEvent 进行事件侦听；使用 detachEvent 移除事件侦听。
document.attachEvent("onclick",clickHandler);//IE8及以下使用，其他版本和其他浏览器不支持
function clickHandler(e){
console.log("aaa");
document.detachEvent("onclick",clickHandler);//移除事件侦听
}
事件侦听和移除的兼容写法：
function addEvent(elem,type,eventHandler){
try{
elem.addEventListener(type,eventHandler);
}catch(e){
elem.attachEvent("on"+type,eventHandler);
}
}
function removeEvent(elem,type,eventHandler){
try{
elem.removeEventListener(type,eventHandler);
}catch(e){
elem.detachEvent("on"+type,eventHandler);
}
}
addEvent(document,"click",clickHandler);
function clickHandler(){
}
高级版：事件侦听
js部分
//获取元素
var bn0=document.getElementById("bn0");
//绑定事件
on(bn0,"click",clickHandler);
function clickHandler(e){
console.log(e);
}
//侦听事件
function on(target,type,handler){
var b=judgeBrowser("IE");
if(b && Number(b)<9){
target.attachEvent("on"+type,handler);
}else{
target.addEventListener(type,handler);
}
}
/*
获取浏览器和版本
通过浏览器打开，会返回当前浏览器名和版本号
return
数组 [浏览器:String,浏览器版本号:String]
*/
function getBrowserRV(){
var str=navigator.userAgent;
// 判断是否是Chrome
if(str.indexOf("Chrome")>-1){
var index=str.indexOf("Chrome");
return str.slice(index,str.indexOf(" ",index+1)).split("/");
}
// 判断是否是Firefox
if(str.indexOf("Firefox")>-1){
var index=str.indexOf("Firefox");
return str.slice(index).split("/");
}
// 判断是否是IE11
if(str.indexOf("rv:")>-1 && str.indexOf("Trident")>-1){
return ["IE","11"];
}
// 判断是否是IE10及以下
if(str.indexOf("Trident")>-1){
var index=str.indexOf("MSIE");
return ["IE",str.slice(index,str.indexOf(";",index)).split(" ")[1]];
}
}
//判断浏览器版本
function judgeBrowser(browser){
var arr=getBrowserRV();
if(browser.toLowerCase()===arr[0].toLowerCase()){
return arr[1];
}else{
return false;
}
}