JavaScript事件

最新推荐文章于 2024-09-10 20:37:24 发布

dengjiao5378

最新推荐文章于 2024-09-10 20:37:24 发布

阅读量123

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/CherishZeng/p/10207314.html

本文详细介绍了JavaScript事件处理的各种方式，包括HTML事件处理、DOM0级事件处理、DOM2级事件处理及IE事件处理程序。深入探讨了事件流、事件冒泡与事件捕获的概念，并解释了事件对象的使用，如type、target、stopPropagation和preventDefault方法。

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

JavaScript事件详解
事件流
事件处理
事件对象

事件流：描述的是在页面中接受事件的顺序
事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）
事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件

事件处理
1、HTML事件处理：直接添加到HTML结构中

<button id="btn" onclick="hello()">按钮</button>
<script>
function hello() {
alert("hello")
}
</script>

缺点：如果事件名字修改需要修改两处，当代码量很大时，不太友好

2、DOM0级事件处理：把一个函数赋值给一个事件处理程序属性

<button id="btn" onclick="hello()">按钮</button>
<script>
var btn1 = document.getElementById("btn");
btn1.onclick = function () { //添加事件点击
alert("hello 0级事件处理")
}
btn1.onclick = null;//清除点击事件
</script>

缺点：事件会被覆盖掉

<button id="btn" onclick="hello()">按钮</button>
<script>
var btn1 = document.getElementById("btn");
btn1.onclick = function () { //添加事件点击
alert("hello 0级事件处理1")
}
btn1.onclick = function () { //添加事件点击
alert("hello 0级事件处理2")
}
</script>

3、DOM2级事件处理

addEventListener（“事件名”，“事件处理函数”，“布尔值”）；
true:事件捕获
false：事件冒泡
removeEventListener（）；

<button id="btn" onclick="hello()">按钮</button>
<script>
var btn1 = document.getElementById("btn").addEventListener("click",function () {
alert("DOM 2级事件处理程序")
})
</script>

优点：并不覆盖click的点击事件

4、IE事件处理程序 IE8以下只能支持以下两个方法方法与DOM2级事件类似
attachEvent 添加事件
detachEvent 移除事件

事件对象
在触发DOM事件的时候都会产生一个对象
事件对象event：
1、type：获取事件类型

<button id="btn" onclick="hello()">按钮</button>
<script>
document.getElementById("btn").addEventListener("click",showType);
function showType(event) {
alert(event.type) 会弹出click
}
</script>

2、target：获取事件目标

<button id="btn" onclick="hello()">按钮</button>
<script>
document.getElementById("btn").addEventListener("clixk",showType);
function showType(event) {
alert(event.target); 
}
</script>

3、stopPropagation()：阻止事件冒泡

<div id="div">
<button id="btn" onclick="hello()">按钮</button>
</div>

<script>
document.getElementById("btn").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",show);
function showType(event) {
//alert(event.type)
alert(event.target);
event.stopPropagation();//组织事件冒泡
}
function show() {
alert(event.target);
}
</script>

4、preventDefault():阻止事件默认行为

document.getElementById("btn").preventDefalut();

转载于:https://www.cnblogs.com/CherishZeng/p/10207314.html