如何使用javaScript写⼀个通用的事件侦听器函数

• 事件侦听器函数（Event listener function）
  • js 写⼀个通用的事件侦听器函数
  • 一个通用的事件侦听器函数的示例
• 扩展：完整JavaScript封装实例

事件侦听器函数（Event listener function）

事件侦听器函数（Event listener function）是编程中用于处理特定事件的函数。

它通常是在事件触发时被调用，并执行所定义的操作。

在不同的编程语言和框架中，事件侦听器函数的实现方式可能会有所不同。

在使用事件侦听器函数时，你需要将其与特定的事件进行关联。

例如: 在图形用户界面（GUI）编程中，你可以将按钮的点击事件与一个事件侦听器函数绑定，这样当用户点击按钮时，事件就会被触发，相应的操作也会被执行。

js 写⼀个通用的事件侦听器函数

当处理JavaScript的事件时，我们可以使用现有的 addEventListener 方法创建一个通用的事件侦听器函数。

下面是一个示例：

function eventListener(eventName, callback) {
  document.addEventListener(eventName, callback);
}

这个函数将接收两个参数：

1. eventName：要监听的事件名称。
2. callback：当事件被触发时要执行的回调函数。

在函数内部，我们使用addEventListener方法将指定的事件名称和回调函数注册到文档对象上。

这样，当触发该事件时，回调函数将被执行。

你可以根据需要修改这个函数以适应特定的场景和需求。

使用此通用事件侦听器函数可以方便地注册和管理各种类型的事件。

在编写JavaScript代码时，请确保将其放置在页面加载完成之后执行，或者放在DOM Ready事件处理程序中。

这将确保在事件侦听器函数绑定之前所有的DOM元素都已加载完毕。

更多精彩内容，请微信搜索“前端爱好者“， 戳我 查看 。

一个通用的事件侦听器函数的示例

这个示例是基于纯JavaScript的实现。

function eventListener(target, eventName, callback) {
  if (target.addEventListener) {
    // 支持addEventListener方法的浏览器
    target.addEventListener(eventName, callback);
  } else if (target.attachEvent) {
    // 兼容旧版IE的attachEvent方法
    target.attachEvent('on' + eventName, callback);
  } else {
    // 不支持以上两种方法的浏览器
    target['on' + eventName] = callback;
  }
}

这个通用的事件侦听器函数 eventListener 接受三个参数：

1. target：要绑定事件的目标元素。
2. eventName：要监听的事件名称。
3. callback：当事件被触发时执行的回调函数。

代码解析

上述代码中：

• 函数先检查目标元素是否支持 addEventListener 方法，如果支持，则使用 addEventListener 方法进行事件绑定。
• 如果不支持，则检查是否支持旧版的 attachEvent 方法
• 如果也不支持，则将回调函数直接赋值给 target 的 on[eventName] 属性，即原生事件属性。

以下是一个示例，展示如何使用 eventListener 函数来监听点击事件：

// 获取按钮元素
var button = document.getElementById('myButton');

// 定义事件处理函数
function handleClick() {
  console.log('按钮被点击了！');
}

// 使用 eventListener 函数绑定事件
eventListener(button, 'click', handleClick);

在上述示例中，我们获取一个按钮元素，定义了一个点击事件的处理函数 handleClick，然后使用 eventListener 函数将 handleClick 函数与按钮的 click 事件进行绑定。当按钮被点击时，handleClick 函数将被调用，输出一条消息到控制台。

你可以根据需要修改和扩展这个通用的事件侦听器函数，以适应不同的事件和场景。

扩展：完整JavaScript封装实例

eventTool = {
        // 页面加载完成后
        readyEvent : function(fn) {
            if (fn==null) {
                fn=document;
            }
            var oldonload = window.onload;
            if (typeof window.onload != 'function') {
                window.onload = fn;
            } else {
                window.onload = function() {
                    oldonload();
                    fn();
                };
            }
        },

        //兼容模式绑定事件
        // 视能力分别使用dom0| |dom2 | |IE方式 来绑定事件
        // 参数： 操作的元素 ,事件名称 ,事件处理程序 
        addEvent : function(element, type, handler) {
            if (element.addEventListener) {
                //事件类型、需要执行的函数、是否捕捉
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, function() {
                    handler.call(element);
                });
            } else {
                element['on' + type] = handler;
            }
        },
        // 移除事件
        removeEvent : function(element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.datachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        },
        // 兼容阻止事件
        stopPropagation : function(ev) {
            if (ev.stopPropagation) {
                ev.stopPropagation();
            } else {
                ev.cancelBubble = true;
            }
        },
        // 取消事件的默认行为
        preventDefault : function(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        // 获取事件目标
        getTarget : function(event) {
            return event.target || event.srcElement;
        },
        // 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
        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;
        }
    };