JS事件总结

一、事件流

事件流描述的是从页面中接受事件的顺序。
IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获

跨浏览器的事件处理程序

    var eventUtil = {
            //添加句柄
            addHandle: function(element, type, handle) {
                if (element.addEventListener) {
                    element.addEventListener(type, handle, false);
                } else if (element.attachEvent) {
                    element.attachEvent("on" + type, handle);
                } else {
                    element["on" + type] = handle;
                };
            },
            //删除句柄
            removeHandle: function(element, type, handle) {
                if (element.removeEventListener) {
                    element.removeEventListener(type, handle, false);
                } else if (element.dettachEvent) {
                    element.dettachEvent("on" + type, handle);
                } else {
                    element["on" + type] = null;
                };
            },
            // 阻止冒泡
            noBubble: function() {
                if (event && event.stopPropagation) {
                    event.stopPropagation();
                    console.log('notIe');
                } else {
                    window.event.cancelBuble = true;
                    console.log('ie');
                }
            },
            // 阻止元素默认行为
            noPrevent: function() {
                if (event && event.preventDefault) {
                    event.preventDefault();
                    console.log('notIe');
                } else {
                    // console.log(event.preventDefault);
                    window.event.returnValue = false;
                    console.log('ie');
                }
            }
        }
//调用
eventUtil.addHandle(element,"click",Fun);

1. DOM中的事件对象

(1)、type:获取事件类型
(2)、target:事件目标
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的默认行为

2. IE中的事件对象

(1)、type:获取事件类型
(2)、srcElement:事件目标
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默认行为

参考文档:
简书-JS事件探秘

发布了43 篇原创文章 · 获赞 12 · 访问量 9万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章