JavaScript中的事件

旧城等待， 2022-06-15 11:52 146阅读 0赞

### **事件流** ###

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

<body>
    <div id="div">
        <button id="btn1">按钮</button>
    </div>
    </body>

### **事件处理** ###

**1、HTML事件处理：**  
直接添加到HTML结构中  
**2、DOM级事件处理**  
把一个函数赋值给一个事件处理程序属性  
**3、DOM2级事件处理**  
addEventListener（“事件名”，“事件处理函数”，“布尔值”）；  
true：事件捕获  
false：事件冒泡  
removeEventListener（）；  
**4、IE事件处理程序**  
attachEvent  
detachEvent

<script> var btn1 = document.getElementById("btn1"); if(btn1.addEventListener){ btn1.addEventListener("click",demo); }else if(btn1.attachEvent){ btn1.attachEvent("onclick",demo); }else{ btn1.onclick = demo(); } function demo() { alert("hello") } </script>

### **事件对象** ###

**1、事件对象**  
在触发DOM事件的时候都会产生一个对象  
**2、事件对象event**  
1）type：获取事件类型  
2）target：获取事件目标  
3）stopPropagation（）：阻止事件冒泡  
4）preventDefault（）：阻止事件默认行为

<script> document.getElementById("btn1").addEventListener("click",showType); document.getElementById("div").addEventListener("click",showDiv); document.getElementById("aid").addEventListener("click",showA); function showType(event) { alert(event.type); alert(event.target); event.stopPropagation();//阻止事件冒泡 } function showDiv() { alert("div") } function showA(event) { event.stopPropagation(); event.preventDefault(); } </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，146人围观）

还没有评论，来说两句吧...

相关阅读

相关 Javascript中的事件对象

1、事件对象在DOM中发生事件时，所有相关信息都会被收集并存储在一个名为event的对象中。这个对象包含了一些基本信息，比如导致事件的元素、发生的事件类型、可能与特定事

ゝ一纸荒年。/ 2022年11月11日 13:20/ 0 赞/ 123 阅读

相关 34、JavaScript中事件中的this

1、JavaScript中事件中的this 1.1 在IE下为--->window 1.2 在FF和Chrome下为---->绑定事件对象的本身

àì夳堔傛蜴生んèń/ 2022年09月21日 11:55/ 0 赞/ 101 阅读

相关 JavaScript中的事件处理

JavaScript中的事件处理 1 JavaScirpt中的事件 2 事件的注册（绑定） 2.1 静态注册事件 2.2 动态注册事

浅浅的花香味﹌/ 2022年08月31日 10:00/ 0 赞/ 157 阅读

相关浅谈JavaScript中的事件

事件在javascript中是响应用户的一种基本操作,本文列举了两种javascript中的事件模型及其绑定的方式,希望能对你的学习带来一点帮助.这些都是非常基础的但或许其中有

╰+哭是因爲堅強的太久メ/ 2022年08月23日 14:55/ 0 赞/ 180 阅读

相关 javascript中的事件冒泡

在html页面中，如果两个控件正好叠加，并且两个控件都绑定了临听事件的话，里面的控件在事件被触发时，会发生事件冒泡的现象。示例如下： <

淡淡的烟草味﹌/ 2022年08月07日 07:56/ 0 赞/ 156 阅读

相关 JavaScript中的事件

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

旧城等待，/ 2022年06月15日 11:52/ 0 赞/ 147 阅读

相关 JavaScript中的事件冒泡？事件传播的解释

[JavaScript中的事件冒泡？事件传播的解释][JavaScript] 事件冒泡是你在学习javaScript旅途中遇到的一个术语，它涉及到当一个元素被

迷南。/ 2022年06月09日 08:51/ 0 赞/ 170 阅读

相关 JavaScript中事件编程的分类

事件编程中事件的分类： 1.鼠标点击事件：单击：onclick / 双击：ondbclick 2.和焦点相关的事件：聚焦事件：onfocus / 失去焦点事件：onbl

冷不防/ 2022年04月24日 02:10/ 0 赞/ 107 阅读

相关理解JavaScript中的事件处理

什么是事件？事件(Event)是JavaScript应用跳动的心脏，也是把所有东西粘在一起的胶水。当我们与浏览器中 Web 页面进行某些类型的交互时，事件

迷南。/ 2022年04月21日 15:47/ 0 赞/ 129 阅读

相关 JavaScript中的触发事件

这两天在敲订餐管理系统的界面的时候，才感觉到自己在前端这里才疏学浅，什么都没有整理过，因为页面的效果想使用JavaScript来展示，却发现不知道JS的代码是如

你的名字/ 2021年05月12日 11:54/ 0 赞/ 680 阅读