JavaScript 事件监听实例代码[兼容IE,firefox] 含注释

这里为大家详细讲解“JavaScript 事件监听实例代码[兼容IE,firefox] 含注释” 的完整攻略。

1. 事件监听的概念

在 HTML 中，JavaScript 可以接收在页面上发生的事件，如用户单击按钮或者鼠标移动，处理这些事件就需要使用到事件监听器。

在理解事件监听之前，先来介绍一下事件的冒泡和捕获的概念。

1.1 事件的冒泡和捕获

事件冒泡和事件捕获在 JavaScript 中是两种处理事件方法。

事件冒泡是从子元素节点向父元素节点一级一级触发，直到根节点；

事件捕获是从根节点向下，一级一级捕获，直到子元素节点。

默认情况下，事件是从子节点向上传播，而事件捕获即从上面往下执行。可以通过在事件处理程序中设置 event.stopPropagation() 阻止事件冒泡；或通过在事件处理程序中设置 event.preventDefault() 阻止事件的默认行为。

1.2 事件监听和事件处理程序

事件监听就是指为指定的事件添加一个监听器，当事件触发时，事件监听器会自动执行相应的代码。

可以使用 addEventListener() 方法向一个元素添加事件监听器。

而事件处理程序是一段JavaScript 代码，它被绑定到某个特定元素上，当事件发生时被触发执行。

在绑定事件处理程序时可以使用三种方法：

1. HTML事件处理程序

2. DOM0级事件处理程序

3. DOM2级事件处理程序

推荐使用 DOM2 级事件处理程序，可以通过 addEventListener() 方法来绑定事件处理程序。

2. JavaScript 事件监听实例代码

下面是一个 JavaScript 事件监听的代码实例，并含有详细注释说明：

// 定义一个事件监听器函数 
function eventHandler(event) {
    alert("鼠标点击事件触发！");
}

// 找到元素
var elem = document.getElementById("myButton");

// 为元素添加事件监听器，在元素被点击时调用事件处理程序
if (elem.addEventListener) { 
    elem.addEventListener("click", eventHandler);
} 
// 兼容旧版本浏览器
else if (elem.attachEvent) {
    elem.attachEvent('onclick', eventHandler);
}

以上代码中，首先定义了一个事件监听器函数 eventHandler，当元素被点击时调用该函数，弹出一个提示框。

接着通过 document.getElementById() 方法找到元素，并使用 addEventListener() 方法为该元素添加点击事件监听器，当元素被点击时调用事件处理程序 eventHandler()。

对于旧版本的浏览器如 IE8 及以下版本，addEventLinstener() 方法不被支持，所以这里使用 attachEvent() 方法代替。attachEvent() 方法的第一个参数是事件名称，第二个是事件处理函数。由于使用的方法不同，为了兼容旧版浏览器，所以需要做个判断。

另外我们再来看一个实例代码：

function eventHandler(event) {
    var keyCode = event.which || event.keyCode;
    if (keyCode === 13) {
       alert("回车键被按下了！");
    }
}

var elem = document.getElementById("myInput");

if (elem.addEventListener) { 
    elem.addEventListener("keypress", eventHandler);
} else if (elem.attachEvent) {
    elem.attachEvent('onkeypress', eventHandler);
}

以上代码为一个实现了回车键监听的例子。当 document.getElementById("myInput") 所指定的文本框被操作时，如果按下的是回车键（keyCode 为 13），则弹出一个提示框。

总结

以上就是 JavaScript 事件监听的完整攻略，讲解了事件监听的概念和实现方法，也给出了两个完整代码实例进行说明。事件监听在网页交互中是十分重要的技术，它可以让网页动态响应用户的操作，提升用户体验。在实际开发中，也可结合其它 JS 库如 jQuery 等一起使用，来实现更强大、更有感染力的网页。