js事件监听是学习js过程中必然要学习和掌握的。下面是js事件监听的代码
function addEventHandler(target, type, func) {
if (target.addEventListener)
target.addEventListener(type, func, false);
else if (target.attachEvent)
target.attachEvent("on" + type, func);
else target["on" + type] = func;
}
有人问我，为什么我要用事件监听呢？因为我在target后面加一个.onclick或者.onmouseover 等等的事
件，各个浏览器都是完全兼容的啊。下面几点就说明我们为什么要使用事件监听器。
第一
：当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就
是说，在对象的onclick事件发生时，只会执行最后绑定的方法。而是用事件监听则不会有覆盖的现象，
每个绑定的事件都会被执行。但是IE家族先执行后绑定的方法，也就是逆绑定顺序执行方法，其他浏览器
按绑定次数顺序执行方法。
第二
：也是最重要的一点，采用事件监听给对象绑定方法后，可以解除相应的绑定，写法如下
function removeEventHandler(target, type, func) {
if (target.removeEventListener)
target.removeEventListener(type, func, false);
else if (target.detachEvent)
target.detachEvent("on" + type, func);
else delete target["on" + type];
}
第三
：解除绑定事件的时候一定要用函数的句柄，把整个函数写上是无法解除绑定的。看实例：
错误的写法：
addEventHandler(Button1, "click", function() { alert("3"); } );
removeEventHandler(Button1, "click", function() { alert("3"); });
正确的写法：
function test(){alert("3");}
addEventHandler(Button1, "click", test );
removeEventHandler(Button1, "click", test);
下面为整个HTML代码示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1.0-Transitional.dtd
">
<html xmlns="http://www.w3.org/1999/xhtml
">
<head>
<title>Javascript事件监听</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<button id="Button1">测试</button>
<script type="text/javascript">
function addEventHandler(target, type, func) {
if (target.addEventListener)
target.addEventListener(type, func, false);
else if (target.attachEvent)
target.attachEvent("on" + type, func);
else target["on" + type] = func;
}
function removeEventHandler(target, type, func) {
if (target.removeEventListener)
target.removeEventListener(type, func, false);
else if (target.detachEvent)
target.detachEvent("on" + type, func);
else delete target["on" + type];
}
var Button1 = document.getElementById("Button1");
var test1 = function() { alert(1); };
function test2() {alert("2")}
addEventHandler(Button1,"click",test1);
addEventHandler(Button1,"click",test2 );
addEventHandler(Button1,"click", function() { alert("3"); } );
addEventHandler(Button1,"click", function() { alert("4"); } );
removeEventHandler(Button1,"click",test1);
removeEventHandler(Button1,"click",test2);
removeEventHandler(Button1,"click",function() { alert("3"); });
</script>
</body>
</html>
分享到：
相关推荐
而通过JavaScript方法添加事件监听器，可以更灵活地控制事件处理过程，并且可以轻松地添加和移除监听器。 在前端开发中，对this关键字的理解和使用是必要的。在事件处理函数中，this关键字默认指向触发事件的元素，...
在标题提到的"EventDispatcher, js事件派发器, javascript事件派发器"中，我们可以理解这是一个JavaScript实现的事件派发器，可能是作者的原创工作。用户可以通过GitHub上的问题跟踪系统（Issue）报告任何发现的错误...
被动事件监听器（Passive Event Listeners）是现代Web开发中的一个重要优化策略，尤其是在构建高性能的Web应用程序时。这个概念的引入主要是为了提高页面的滚动性能和响应速度，特别是对于移动设备上的触摸事件。...
JavaScript事件监听器是一种用于处理DOM元素（文档对象模型）事件的技术，它允许开发者在特定事件触发时执行一段代码。在JavaScript中，事件监听器的主要作用是避免了传统的事件处理方式可能导致的问题，例如方法...
1. `addEventListener`：这是JavaScript中添加事件监听器的标准方法，可以为同一个元素添加多个同类型的事件监听器，不会覆盖原有的监听器。 ```javascript element.addEventListener('click', function() { // 当...
JavaScript事件监听器是一种非常重要的前端技术，它允许开发者对用户与网页的交互做出响应。事件监听器涉及的概念包括事件类型、事件处理函数、事件冒泡等。在不同的浏览器中，事件监听的方式略有不同，常见的方法有...
事件处理程序是在HTML元素中直接指定的，而事件监听器则是在JavaScript代码中添加的，这种方式更加灵活且易于维护。 例如，要为一个按钮添加点击事件处理，使用事件处理程序的方法是： ```html ('Button clicked!'...
事件委托是一种优化性能的策略，通过在父元素上设置事件监听器，来处理子元素的事件。这样减少了监听器的数量，提高了代码效率。 八、合成事件与原生事件 在现代浏览器中，有些事件是合成事件，如`input`事件，它会...
在JavaScript中，监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一：适用于IE浏览器，仅在关闭时提示 ```javascript window....
总之，`globally.js`是一个优化JavaScript事件处理的库，通过批量添加和管理全局事件监听器，提高了代码的可读性和效率。学习和使用这样的库可以帮助开发者更好地理解和应用事件处理机制，并提升项目开发的效率。
- 对于一些重要的操作，建议使用多个事件监听器组合使用，以增加可靠性。 - 不同浏览器之间可能存在差异，因此在编写代码时需要考虑到浏览器的兼容性问题。 综上所述，`onbeforeunload`和`onunload`是JavaScript中...
可以使用`addEventListener`方法添加事件监听器，并处理不同的滚轮事件名称。 ```javascript document.addEventListener('DOMContentLoaded', function() { var body = document.body; // 针对大部分浏览器 ...
总结来说，通过本文，我们可以学习到如何在JavaScript中设置事件监听器，如何处理鼠标的点击事件和键盘的按键事件，以及如何利用这些事件实现页面跳转。此外，我们还了解到了一个实用的在线资源，可以用来查询和学习...
Node.js的`EventEmitter`类提供了几个关键的方法，如`on()`用于添加监听器，`emit()`用于触发事件，以及`removeListener()`用于移除监听器。开发者可以利用这些方法在Node.js应用中灵活地使用事件驱动编程范式。 ...
js实现监听浏览器关闭和刷新事件支持三大浏览器，点击直接看效果
总之，通过使用JavaScript监听键盘按下事件，我们能够为用户提供更加丰富和灵活的交互体验。无论是简单的回车键监听，还是复杂的组合键操作，掌握这一技术对于提升网页的交互能力都至关重要。希望本文的介绍能够帮助...
Node.js事件模块还支持一次性监听器的概念，通过EventEmitter类的once方法可以实现。一旦监听器被触发，它会自动从事件监听器列表中移除。这对于那些只需执行一次的任务非常有用，比如初始化设置或仅需执行一次的...