js--事件--通用的事件侦听器函数

最新推荐文章于 2021-10-04 16:14:01 发布

github_34514750

最新推荐文章于 2021-10-04 16:14:01 发布

阅读量6.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javaScript 文章标签： js 事件

本文链接：https://blog.csdn.net/github_34514750/article/details/53084034

javaScript 专栏收录该内容

52 篇文章

订阅专栏

本文介绍了一个通用的事件监听器函数实现，该函数能够根据不同浏览器环境选择合适的事件添加方式，并提供事件对象、事件目标的获取及事件默认行为的阻止等功能。此外还探讨了事件的移除、事件冒泡的取消等主题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于事件写了一系列文章

1.事件流（事件捕获和事件冒泡）
http://blog.csdn.net/github_34514750/article/details/53067077
2.事件处理程序
http://blog.csdn.net/github_34514750/article/details/53083973
3.事件对象
http://blog.csdn.net/github_34514750/article/details/53084014
4.通用的事件侦听器函数
本文介绍通用的事件侦听器函数
5.事件循环（event loop）
http://blog.csdn.net/github_34514750/article/details/53067106
6.事件代理（(event delegation）
http://blog.csdn.net/github_34514750/article/details/53067133

1.写一个通用的事件侦听器函数(机试题)。

var EventUtil = {
    //根据情况分别使用dom2 || IE || dom0方式 来添加事件
    addHandler: function(element,type,handler) {
        if(element.addEventListener) {
            element.addEventListener(type,handler,false);
        } else if(element.attachEvent) {
            element.attachEvent("on" + type,handler);
        } else {
            element["on" + type] = handler;
        }
    },

    //根据情况分别获取DOM或者IE中的事件对象，事件目标，阻止事件的默认行为
    getEvent: function(event) {
        return event ? event: window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault: function(event) {
        if(event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }

    //根据情况分别使用dom2 || IE || dom0方式 来删除事件
    removeHandler: function(element,type,handler){
        if(element.removeHandler) {
            element.removeEventListener(type,handler,false);
        } else if(element.detachEvent) {
            element.detachEvent("on" + type,handler);
        } else {
            element["on" + type] = null;
        }
    }

    //根据情况分别取消DOM或者IE中事件冒泡
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
}

var btn = document.getElementById("myBtn"),
    handler = function () {
        alert("Clicked");
    };

EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);