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事件监听机制是前端开发中极其重要的一环，它允许开发者对用户行为（如点击、按键、鼠标移动等）作出响应。事件监听涉及的几个核心概念包括事件传播的两种方式：事件捕获和事件冒泡，以及兼容性问题和事件...
总结，Cocos Creator提供了两种主要的事件监听机制，`cc.Class.prototype.on` 和 `cc.EventTarget.addListener`，两者都可以有效地帮助开发者实现游戏逻辑。选择哪种方式取决于具体的需求和场景，但重要的是理解每种...
首先，我们来了解一下JavaScript中的事件监听机制。在Web开发中，事件监听是响应用户操作的一种基本方式，它使得网页能够感知用户的动作（如点击、按键等）并在相应的事件发生时执行特定的代码。常见的JavaScript...
通过分析`download-client-listener-master`这个压缩包内的代码，我们可以进一步了解其具体实现方式，包括可能的事件监听、状态更新机制以及错误处理策略。 总的来说，理解和掌握如何监听浏览器的文件下载事件，...
#### 二、原生JavaScript监听键盘事件 原生JavaScript提供了三种主要的键盘事件监听方法：`onkeydown`、`onkeypress` 和 `onkeyup`。 1. **`onkeydown`**： - 触发时机：当一个键被按下时触发。 - 使用示例： `...
JavaScript事件绑定机制是JavaScript编程中一个非常重要的概念，它涉及到用户与网页交互时的响应处理。在提供的内容中，展示了三种不同的事件绑定方式，分别使用jQuery库的不同方法来实现。这里我们将详细探讨这些...
在讨论如何使用JavaScript来创建一个跨浏览器的事件处理机制时，我们首先需要了解不同浏览器之间在事件处理方面的差异性，以及为了兼容这些差异，开发者们采取了哪些策略。以下是从给出的文件内容中提取出来的相关...
总的来说，理解JavaScript中的事件冒泡和事件监听是构建交互式Web应用的基础。通过合理利用这两种机制，开发者可以创建出响应用户行为的复杂交互，并且能确保这些交互在各种浏览器中都能正常工作。在实际项目中，...
此外，还有一些高级事件机制，如事件委托（event delegation），它利用事件冒泡原理，将事件监听器添加到父元素上，从而减少内存消耗和提高性能。还有`Event`对象，它提供了`preventDefault()`方法阻止默认行为（如...
本文详细介绍了JavaScript中的事件处理机制，包括事件流、事件监听器以及事件对象的相关属性和方法。通过理解这些概念，开发者可以更好地利用JavaScript来创建具有丰富交互功能的网页应用。希望本文能帮助读者更深入...
在Unity3D中，鼠标碰撞检测与事件监听是游戏交互性的重要组成部分，尤其是在开发3D游戏时。这个教程将介绍如何通过JavaScript（JS）脚本来实现这一功能。以下是对该教程内容的详细解释： 首先，我们看到代码中的`...
需要注意的是，由于JavaScript的事件机制，这个库只能在浏览器环境中运行，不能应用于服务器端的JavaScript环境（如Node.js）。此外，对于复杂的组合键需求，可能需要更强大的库，例如` Mousetrap.js` 或 `keymaster...
这种滚动事件的监听机制可以极大地增强网页的交互性，使得用户在浏览过程中有更流畅、自然的感受。在实际项目中，我们还可以结合CSS3动画和现代前端框架（如React、Vue或Angular）进一步优化滚动效果，实现更为复杂...
事件委托（也称为事件代理）是事件监听的一个重要应用，它利用了事件冒泡的机制来简化事件处理器的管理。事件冒泡是指一个事件不仅仅在触发它的元素上被处理，还会向上冒泡到父元素，直至根元素。事件委托就是利用这...
总之，`globally.js`是一个优化JavaScript事件处理的库，通过批量添加和管理全局事件监听器，提高了代码的可读性和效率。学习和使用这样的库可以帮助开发者更好地理解和应用事件处理机制，并提升项目开发的效率。
JavaScript事件是浏览器或Node.js环境中发生的特定行为，如用户点击按钮、页面加载完成或输入框获得焦点等。事件驱动编程是JavaScript的核心特性之一，通过监听和处理这些事件，我们可以创建响应式的用户体验。 二...
### JS键盘监听事件addkey无eval版 #### 知识点概述 本篇文章将深入探讨一个自定义的JavaScript键盘监听事件处理函数`addkey`，该函数采用了一种不使用`eval`的安全方法来实现对键盘按键的监听。在Web开发中，监听...
通过学习和实践，不仅可以提升AutoJS编程技巧，还能加深对Android UI事件处理机制的理解。 总结，下拉菜单事件监听是AutoJS自动化脚本开发中的一个重要环节，它涉及到UI组件的创建、事件监听和用户交互的响应。掌握...
总的来说，"js页面监听"涉及到JavaScript中的事件处理机制和DOM操作。掌握这些技术，开发者可以构建出响应用户行为、富有交互性的网页应用。而通过封装好的DOM选择器，可以更高效地选取和操作页面元素，提升开发效率...