2022年 7月
 123
45678910
11121314151617
18192021222324
25262728293031

近期发布

近期评论

    2022 年 7 月 5 日

    Neusofts

    科技改变生活,创新引领未来

    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);