• 178-9621-6589
  • NeuSofts@NeuSofts.Com

IE和Dom事件流

IE和Dom事件流

1.事件流的区别

IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件
示例:

复制代码代码如下:

<body>
    <div>
        <button>点击这里</button>
    </div>
</body>

冒泡型事件模型: button->div->body (IE事件流)

捕获型事件模型: body->div->button (Netscape事件流)

DOM事件模型: body->div->button->button->div->body (先捕获后冒泡)

 

2.事件侦听函数的区别

IE使用:

[Object].attachEvent("name_of_event_handler", fnHandler); //绑定函数
[Object].detachEvent("name_of_event_handler", fnHandler); //移除绑定

DOM使用:

[Object].addEventListener("name_of_event", fnHandler, bCapture); //绑定函数
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除绑定

bCapture参数用于设置事件绑定的阶段,true为捕获阶段,false为冒泡阶段。

综合示例:

// 把所有方法封装到一个对象里面,充分考虑兼容写法
var EventUtil = {
    // 添加DOM事件
    addEvent: function (element, type, handler) {
        if (element.addEventListener) { //DOM2级
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {  //IE
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    // 移除DOM事件
    removeEvent: function (element, type, handler) {
        if (element.removeEventListener) { //DOM2级
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {  //IE
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
    // 阻止事件冒泡
    stopPropagation: function (ev) {
        if (ev.stopPropagation) {
            ev.stopPropagation();
        } else {
            ev.cancelBubble = true;
        }
    },
    // 阻止默认事件
    preventDefault: function (ev) {
        if (ev.preventDefault) {
            ev.preventDefaule();
        } else {
            ev.returnValue = false;
        }
    },
    // 获取事件源对象
    getTarget: function (ev) {
        return event.target || event.srcElement;
    },
    // 获取事件对象
    getEvent: function (e) {
        var ev = e || window.event;
        if (!ev) {
            var c = this.getEvent.caller;
            while (c) {
                ev = c.arguments[0];
                if (ev && Event == ev.constructor) {
                    break;
                }
                c = c.caller;
            }
        }
        return ev;
    }
};

var btn = document.getElementById("id");
var handler = function (event) {
    event = EventUtil.getEvent(event);
};
EventUtil.addEvent(btn, "click", handler);
Neusofts