监听与解绑

监听与绑定

on 绑定事件写法

DOM.on + ’事件类型‘ = 事件处理函数

DOM.οnclick= as //不带括号

function as（）{} //事件处理函数

监听写法

addEventListener 监听

DOM.addEventListener('事件'，调用函数，状态)

DOM.addEventListener('click'，调用函数，false）

状态 ：事件捕获 事件目标阶段 事件冒泡 on绑定默认冒泡阶段调用函数 ture：事件捕获 false：事件冒泡

removeEventListener 解绑

DOM.removeEventListener(事件 ，调用有名函数)

IE版本监听写法

兼容处理 IE9以前不支持监听 用的是 attachEvent 和 datachEvent

DOM.attachEvent('onclick',调用函数，状态) 事件加on

兼容写法

//为任意一个元素绑定事件:元素,事件类型,事件处理函数
function addEventListener(element,type,fn) {
    if(element.addEventListener){
        //支持
        element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
    //IE老版本
        element.attachEvent("on"+type,fn);
    }else{
    //绑定写法
        element["on"+type]=fn;
    }
}


//为任意的一个元素解绑某个事件:元素,事件类型,事件处理函数
function removeEventListener(element,type,fn) {
    if(element.removeEventListener){
        element.removeEventListener(type,fn,false);
    }else if(element.detachEvent){
        element.detachEvent("on"+type,fn);
    }else{
        element["on"+type]=null;
    }
}

事件监听与绑定区别

• on会被后面的on事件覆盖 addEventListener不会覆盖

• addEventListener可以指定事件回调函数触发时机（捕获 或 冒泡）on事件只有在冒泡阶段触发

匿名解绑监听

var btn = document.getElementById('btn');
var cancel = document.getElementById('cancel');
var listenBySL = function(element, type, handler, capture){
	capture = capture || false;
    if(element.addEventListener){
        // W3C内核
        element.addEventListener(type, handler, capture);
    }else{
        // IE内核
        element.attachEvent('on'+type, handler, capture);
    }

    return {
        "remove":function(){
            if(element.removeEventListener){
                // W3C内核
                element.removeEventListener(type, handler, capture);
            }else{
                // IE内核
                element.detachEvent('on'+type, handler, capture);
            } 
    	}
    }
}
// 添加监听
var addAlert = listenBySL(btn,'click',function(){
    alert(123);
});
listenBySL(cancel,'click',function(){
    // 移除监听
    addAlert.remove();
    alert('移除成功');
});