IE事件处理和W3C事件处理的区别

 

注意:

W3C事件的 target 与 currentTarget 的区别？

• target 只会出现在事件流的目标阶段
• currentTarget 可能出现在事件流的任何阶段
• 当事件流处在目标阶段时，二者的指向相同
• 当事件流处于捕获或冒泡阶段时：currentTarget 指向当前事件活动的对象(一般为父级)

手写事件侦听器(浏览器兼容)

 

//   手写事件侦听器

var eventUtil = {
    getEvent: function(e) {
        return e || window.event;
    },

    getTarget: function(e) {
        return e.target || e.srcElement;
    },

    addListener: function(el, type, handler) {
        if(el.addEventListener) {
            el.addEventListener(type, handler, false);
        } else if (el.attachEvent) {
            el.attachEvent('on' + type, handler);
        } else {
            el['on' + type] = handler;
        }
    },

    removeListener: function(el, type, handler) {
        if(el.removeListener) {
            el.removeListener(type, handler, false);
        } else if (el.detachEvent) {
            el.detachEvent(type, handler);
        } else {
            el['on' + type] = null;
        }
    },

    preventDefault: function(e) {
        if(e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }
    },

    stopPropagation: function(e) {
        if(e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
    }
};

// 调用
(function() {
    var btn = document.getElementById('btn');
    var link = document.getElementsByTagName('a')[0];

    eventUtil.addListener(btn, 'click', function(e) {
        var e = eventUtil.getEvent(e);
        var target = eventUtil.getTarget(e);
        console.log(event.type, target);
        eveventUtil.stopPropagation(e)
    });

    eventUtil.addListener(link, 'click', function(e) {
        // 阻止点击连接跳转, 即阻止默认事件
        var e = eventUtil.getEvent(e);
        eventUtil.preventDefault(e)
    });

    eventUtil.addListener(document.body, 'click', function() {
        console.log('click body');
    });
})();

javascript事件模型:

• Dom0级模型

        又称为原始事件魔性, 在该模型中, 事件不会传播, 即没有事件流的概念. 事件绑定监听函数比较简单, 有两种方式

// 1. html代码中直接绑定
<input type = "button" onclick = "fun()">

// 2. 通过js代码指定属性值
var btn = document.getElementById('btn');
btn.onclick = fun;

// 移除监听函数
btn.onclick = null;

• IE事件模型

       IE事件模型有两个过程: 事件处理和事件冒泡

var btn = document.getElementById('.btn');
btn.attachEvent(‘onclick’, showMessage);
btn.detachEvent(‘onclick’, showMessage);

• Dom2级模型(属于W3C标准模型)

      在该事件模型中, 一次事件共有三个过程: 

      事件捕获--事件处理--事件冒泡

var btn = document.getElementById('.btn');
btn.addEventListener(‘click’, showMessage, false);
btn.removeEventListener(‘click’, showMessage, false);

/**
  * 参数说明:
  * eventType指定事件类型(不要加on)
  * handler是事件处理函数
  * useCapture是一个boolean用于指定是否在捕获阶段进行处理，一般设置为false与IE浏览器保持一致

**/