JavaScript事件一瞥

最新推荐文章于 2025-08-15 22:56:20 发布

weixin_30487201

最新推荐文章于 2025-08-15 22:56:20 发布

阅读量54

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/amylis_chen/archive/2011/07/16/2108235.html

本文详细介绍了HTML中的事件处理方式，包括HTML事件处理、DOM0级事件处理、DOM2级事件处理及IE事件处理等不同方法，并对事件对象及其常用属性进行了说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、 html事件处理

html事件处理的写法如下：

<input type="button" value="Click Me" onclick="sayHello()" />
<script language="javascript" type="text/javascript">
function sayHello() {
alert("Hello World");
}
</script>

html事件处理的写法使HTML与JavaScript过于紧密的耦合，增加代码维护的成本，另外假如JavaScript代码写在页面底部，有可能HTML元素出现的时候，JavaScript代码还没加载，这是点击HTML元素时，就会出错。

2、 DOM0事件处理

DOM0事件处理的写法如下：

<input type="button" value="Click Me" id="btnHello" />
var btn = document.getElementById("btnHello");
btn.onclick = function () {
alert("Hello World");
}

DOM0事件处理方法被认为是元素的方法，在处理程序中用this可以访问元素的任何属性和方法。

DOM0删除事件处理方法只需把处理程序的属性设置为NULL即可，

btn.onclick = null。

3、 DOM2事件处理程序

DOM2事件处理程序的写法如下：

<input type="button" value="Click Me" id="btnHello" />
var btn = document.getElementById("btnHello");
btn.addEventListener("click", function () {
alert("Hello World");
}, false);

AddEventListener(),最后一个参数如果是true表示在事件捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序。

这种写法的好处是可以给同一事件添加多个处理程序。

可以用如下形式移除事件处理程序。

IE事件处理程序：

IE只支持事件冒泡，通过attachEvent()和detachEvent()添加和解除事件处理。

<input type="button" value="Click Me" id="btnHello" />
<script language="javascript" type="text/javascript">
var btn = document.getElementById("btnHello");
var sayHello = function () {
alert("Hello World");
};
btn.attachEvent("onclick", sayHello, false);
</script>

IE的时间处理程序在全局作用域中运行，因此this等于window。

事件对象

凡是兼容DOM的浏览器都会将一个event对象传入到事件处理程序中。

<input type="button" value="Click Me" id="btnHello" />
<script language="javascript" type="text/javascript">
var btn = document.getElementById("btnHello");
btn.onclick = function (event) {
alert(event.target.id);
}
btn.addEventListener("click", function (event) {
alert(event.target.id);
}, false);
</script>

可以用preventDefault()取消事件默认行为,stopPropagation()方法停止事件在DOM层中的传播。

IE中的事件对象

IE中，使用DOM0进行事件处理程序是，event作为window一个属性存在。如果是DOM2，就做为一个event对象传入。

<input type="button" value="Click Me" id="btnHello" />
<script language="javascript" type="text/javascript">
var btn = document.getElementById("btnHello");
btn.onclick = function () {
alert(window.event.srcElement.id);
}
btn.attachEvent("onclick", function (event) {
alert(event.srcElement.id);
});
</script>

在IE中可以用event.returnValue=false;来取消事件的默认行为，用event.cancelBuble=true

来阻止事件冒泡。

转载于:https://www.cnblogs.com/amylis_chen/archive/2011/07/16/2108235.html