JavaScript事件监听

  • 2019-06-15
  • 15
  • 0
  • 0

一、事件event对象

  1. Event事件对象,用来获取事件的详细信息:鼠标位置、键盘按键。在主流浏览器下默认传参给事件函数的第一个参数,ie低版本会挂载在window下的event属性里,保存了触发事件参数,这是个全局对象。
  2. Event对象的兼容:e = e || window.event;
obj.onclick = function(e){
    e = e || window.event;
}
  1. event.type返回事件的类型。
  2. 取消事件的传递,主流浏览器下使用e.stopPropagation();方法,IE浏览器下使用e.cancelBubble=true属性。

二、DOM事件

  1. DOM 0级事件,onclick被认为是元素的属性方法,只能绑定一个。
  2. DOM 2级事件,主流浏览器下使用addEventListener(事件名称,事件函数,是否捕获)注册事件,第一个参数传事件类型(click),第二个参数传事件函数,第三个函数传是否捕获,true使用捕获,默认false使用冒泡。事件名称没有on,事件执行的顺序是正序this指触发该事件的对象。IE浏览器下使用attacheEvent(事件名称,事件函数)注册事件,第一个参数传事件类型(onclick),第二个参数传事件函数。没有捕获,事件名称有onthis指向window
  3. DOM 2级事件,主流浏览器下使用removeEventListener(事件名称,事件函数,是否捕获)注销事件,第一个参数传事件类型(click),第二个参数传事件函数,第三个参数传是否捕获,状态要和注册事件一一对应。IE浏览器使用detachEvent(事件名称,事件函数)注销事件。第一个参数传事件类型(onclick)。
var oBox = document.getElementById('box');
var captrue = true; //捕获
document.addEventListener('click', function(){
    console.log('document点击')
},captrue);

document.body.addEventListener('click', function(e){
    e.stopPropagation();  //停止事件传递,下面的oBox点击事件不会触发
    console.log('body点击')
},captrue);

oBox.addEventListener('click',function(e) {
    e.stopPropagation();
    console.log('box点击')
},captrue);
//IE浏览器下
var fn = function(e){
    e = e || window.event;
    //e.stopPropagation();
    e.cancelBubble = true;
    console.log('点击box')
};
oBox.attachEvent('onclick',fn);
//oBox.addEventListener("click",fn);

var timer;
document.onclick = function(){
    timer = setTimeout(function(){
        console.log('单击')
    },300);
}
//文档双击就会取消 oBox的点击事件
document.ondblclick = function(){
    console.log('双击');
    clearTimeout(timer);
    oBox.detachEvent('onclick',fn);
}

三、事件冒泡

  1. 事件冒泡指子元素触发事件的时候,会 冒泡(触发)父级的相同的事件 。
  2. 主流浏览器下使用e.stopPopagation();,IE浏览器下使用e.cancelBubble=true;

四、兼容事件注册

evenetBind(box,'click',function(event){
    console.log(event);
    eventUnbind(this,'click',true);
},true);

/*
* 绑定事件
* ele 元素节点
* event 事件类型
* hadler 处理事件函数
* capture 是否捕获
*/
function evenetBind(ele,eventType,handler,capture) {
    //用包装函数做处理
    ele['evet'+eventType] = handler;

    //先判断是否为主流浏览器
    if(ele.addEventListener){
        ele.addEventListener(eventType,ele['evet'+eventType],capture);
    }else if(ele.attachEvent){
        //ie需要做处理
        ele['evet'+eventType] = function(){
            //处理低版本ie 的this指向问题
            handler.call(ele,window.event);
        };
        ele.attachEvent('on'+eventType,ele['evet'+eventType]);
    }else{
        ele['on'+eventType] = handler;
    }
}

//注销事件
function eventUnbind(ele,event,capture){
    //如果在就是主流浏览器
    if(ele.removeEventListener){
        ele.removeEventListener(event,ele['evet'+event],capture);
    }else if(ele.detachEvent){
        ele.detachEvent('on'+event,ele['evet'+event]);
    }else{
        ele['on'+event] = null;
    }
}

评论

还没有任何评论,你来说两句吧