FireFox : addEventListener()方法
IE : attachEvent()方法
为HTML元素添加一个事件监听, 而不是直接对元素的事件属性（如：onclick、onmouseover）赋值。
这两种方法处理事件还是有很大区别的！事件属性只能赋值一种方法，即：
button1.onclick = function() { alert(1); };
button1.onclick = function() { alert(2); };
这样后面的赋值语句就将前面的onclick属性覆盖了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Javascript事件监听示例</title>
</head>
<body>
<button id="Button1">测试</button>
<script type="text/javascript">
/// <summary>
/// 添加事件监听
/// </summary>
/// <param name="target">载体</param>
/// <param name="type">事件类型</param>
/// <param name="func">事件函数</param>
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;
}
/// <summary>
/// 移除事件监听
/// </summary>
/// <param name="target">载体</param>
/// <param name="type">事件类型</param>
/// <param name="func">事件函数</param>
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 Button1Click = function() { alert(1); };
addEventHandler(Button1, "click", Button1Click);
addEventHandler(Button1, "click", function() { alert(2); } );
addEventHandler(Button1, "click", function() { alert(3); } );
removeEventHandler(Button1, "click", function() { alert(2); } ); // 移不出
removeEventHandler(Button1, "click", Button1Click); // 可以移除
</script>
</body>
</html>
而添加事件监听就可以并行。
特别是当团队合作时，事件并行的需求增多，比如：监听document对象的鼠标事件或者window对象的载入事件等。
使用事件属性则很容易造成事件覆盖掉。
经过测试IE(8)中先显示3再显示2，而firefox(3)中则先显示2再显示3，这个是为什么呢？测试的结果即真理，没啥好想的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Javascript事件监听</title>
</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 Button1Click = function() { alert(1); };
addEventHandler(Button1, "click", Button1Click);
addEventHandler(Button1, "click", function() { alert(2); } );
addEventHandler(Button1, "click", function() { alert(3); } );
removeEventHandler(Button1, "click", function() { alert(2); } );
removeEventHandler(Button1, "click", Button1Click);
</script>
</body>
</html>
分享到：
相关推荐
JavaScript事件监听机制是前端开发中极其重要的一环，它允许开发者对用户行为（如点击、按键、鼠标移动等）作出响应。事件监听涉及的几个核心概念包括事件传播的两种方式：事件捕获和事件冒泡，以及兼容性问题和事件...
本文实例讲述了javascript事件监听与事件委托。分享给大家供大家参考，具体如下： 事件监听与事件委托 在js中，常用到element.addEventListener()来进行事件的监听。但是当页面中存在大量需要绑定事件的元素时，这种...
JavaScript事件监听器是一种非常重要的前端技术，它允许开发者对用户与网页的交互做出响应。事件监听器涉及的概念包括事件类型、事件处理函数、事件冒泡等。在不同的浏览器中，事件监听的方式略有不同，常见的方法有...
标题中提到的是“JavaScript 事件监听实例代码[兼容IE,firefox] 含注释”，这表明本文将讨论如何用JavaScript编写事件监听器的代码，并且确保这段代码能在Internet Explorer和Firefox两种浏览器中正常工作。...
原生JavaScript监听滚轮事件稍微复杂一些，因为需要考虑浏览器兼容性问题。可以使用`addEventListener`方法添加事件监听器，并处理不同的滚轮事件名称。 ```javascript document.addEventListener('...
实时代码编辑器 我构建了一个实时代码编辑器。 我学习了如何使用iframe广告代码。 我还学习了如何使用JavaScript事件监听器onkeyup编写HTML，CSS和JavaScript的值并编译结果。
要实现这一功能，我们需要借助JavaScript的事件监听器。 首先，我们需要获取到页面的滚动条位置。在JavaScript中，`window`对象提供了`scrollY`属性，它表示浏览器窗口顶部到文档顶部的距离，也就是滚动条滚动的...
在组件不再需要监听事件时，通常会在`onDisable`或`onDestroy`函数中调用`off`方法来移除监听器，以避免内存泄漏。 ### 2. `cc.EventTarget.addListener` 方法 另一种事件监听的方法是使用`cc.EventTarget....
在探讨JavaScript事件监听添加与删除的方法时，我们首先要明确几个核心概念：事件监听器（Event Listener）以及它们如何通过`addEventListener`和`removeEventListener`方法被添加和移除。 `addEventListener`是...
在JavaScript中，监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一：适用于IE浏览器，仅在关闭时提示 ```javascript window....
这涉及到CSS样式操作和JavaScript事件监听，如onmouseover和onmouseout事件，以及修改元素的style属性。 4. **动画2.html.bak**：可能包含JavaScript实现的简单动画效果，例如元素的平移、旋转或缩放。JavaScript...
此外，游戏的按键设置功能意味着玩家可以根据个人偏好定制操作，这需要JavaScript能够监听键盘事件，并将这些事件与游戏内动作对应起来。 在技术实现上，这款游戏可能利用了HTML5的Canvas API来绘制游戏场景，包括...
主要涉及CSS定位、JavaScript事件监听以及DOM操作。 2. **轮播图（Carousel）**：轮播图是展示多张图片或内容的常见方式，通过定时切换显示内容，实现自动滚动。关键技术包括定时器（setTimeout或setInterval）、...
3. JavaScript事件监听：通过addEventListener绑定点击事件，当用户点击菜单项时触发相应的JavaScript函数。 4. 动态改变样式：在JavaScript函数中，根据需求调整选中项的CSS属性，如left、width等，实现平滑的滑动...
3. **JavaScript事件监听**：使用JavaScript的`addEventListener`方法，监听图片的`mouseover`和`mouseout`事件。当`mouseover`事件触发时，显示遮罩层；`mouseout`事件触发时，隐藏遮罩层。 4. **DOM操作**：通过...
在创建漂浮广告时，我们通常会利用JavaScript事件监听器，如`window.scroll`事件，以便在用户滚动页面时调整广告的位置。 1. **HTML结构**： 在HTML中，我们需要创建一个包含广告内容的元素，例如一个div。我们...