Javascript之事件处理

最新推荐文章于 2025-04-22 08:22:40 发布

Only同学

最新推荐文章于 2025-04-22 08:22:40 发布

阅读量379

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： html javascript

本文链接：https://blog.csdn.net/sinat_33091263/article/details/50294613

Javascript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了HTML中的四种事件处理方式：直接添加到HTML结构中的事件、DOM0级事件处理、DOM2级事件处理及IE事件处理程序。每种方法都有详细的示例代码，展示了如何为HTML元素添加事件监听。

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

1.HTML事件处理

直接添加到HTML结构中

缺点：修改一处同时需要修改两处函数的名称如果被修改，html中的onclick事件也要修改。

如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
</head>
<body>
<div id="div">
<button id="btn" onclick="demo()">按钮</button>
</div>
<script>
function demo () {
alert("Hello html事件处理");
}
</script>
</body>
</html>

2.DOM 0级事件处理

把一个函数值赋给一个时间处理程序属性

优点：不需要修改HTML中的button 只需修改一处

缺点：如果有多个事件会被覆盖掉只会显示最后一个事件

如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
</head>
<body>
<div id="div">
<button id="btn">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn");
btn1.onclick=function () {
alert("dom0级事件处理程序1");
}
btn1.onclick=function () {
alert("dom0级事件处理程序2"); //会覆盖掉dom 事件处理程序1
}

// btn1.onclick=null; //清楚当前事件
</script>
</body>
</html>

3.DOM 2级事件处理

优点：不会被覆盖掉使用起来很方便符合用户的使用心得

addEventListener（“事件名”，“事件处理函数”，“布尔值”）；

true：事件捕获

false：事件冒泡

remove EventListener（）； //移除事件

如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
</head>
<body>
<div id="div">
<button id="btn">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn")
btn1.addEventListener("click",demo1);
btn1.addEventListener("click",demo2);
btn1.addEventListener("click",demo3);
function demo1() {
alert("DOM 2级事件处理程序1");
}
function demo2() {
alert("DOM 2级事件处理程序2");
}
function demo3() {
alert("DOM 2级事件处理程序3");
}

btn1.removeEventListener("click",demo2);
//移除demo2；

</script>
</body>
</html>

4.IE事件处理程序(使用方法和参数和addEventListener一样)

attachEvent

detachEvent（移除事件）

如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
</head>
<body>
<div id="div">
<button id="btn">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn")
if (btn1.addEventListener) {
btn1.addEventListener("click",demo);
}else if (btn1.attachEvent){
btn1.attachEvent("onclick","demo");
}else{
btn1.onclick=demo();
//以前有些浏览器只能支持DOM 0级事件所以这里添加一个DOM 0 级事件
}

function demo () {
alert("Hello");
}
</script>
</body>
</html>