js_事件流

以你之姓@ 2022-08-03 16:44 142阅读 0赞

JavaScript的事件是以一种流的形式存在的，一个事件会有多个元素同时相应。可分为三个阶段：

1、捕获阶段（查找目标）

2、目标阶段

3、冒泡阶段（由目标向外响应）

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>事件流</title>
    <script>
       window.onload = function() {
    	 var a = document.getElementById("a");
    	 var b = document.getElementById("b");
    	 var c = document.getElementById("c");
    	 document.addEventListener("click",function() {
    		 alert("body")},true);//true,顺序为body、a、b，捕获阶段；false弹出顺序相反，冒泡阶段
    	 a.addEventListener("click",function() {
    		 alert("a")},true);
    	 b.addEventListener("click",function() {
    		 alert("b")},true);
    	 c.addEventListener("click",function() {
    		 alert("c")},true);
       }
    </script>
    <style>
    #a {
       background:blue;
       width:500px;
       height:500px;	
    }
    #b {
       background:#eeeeee;
       width:200px;
       height:200px;
       position:absolute;
       left:100px;
       top:100px;
    }
    #c {
       background:#00ff00;
       width:200px;
       height:200px;
       left:100px;
       top:100px;
    }
    </style>
    </head>
    
    <body>
    <div id="a">
    <div id="b">
    
    </div>
    </div>
    <div id="c">
    </div>
    </body>
    </html>

（注：未完待续，望指教）

发表评论取消回复

表情：

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

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

相关阅读

相关 Js事件流概述，以及阻止事件冒泡、阻止默认行为

目录一: 事件流概述二：阻止事件冒泡例子：原生js案例阻止事件冒泡例子：Vue2中的阻止事件冒泡的写法三：阻止默认行为例子：原生js案例阻止事件默认行为

今天药忘吃喽~/ 2023年10月02日 21:03/ 0 赞/ 23 阅读

相关 JavaScript 事件，事件流，事件委托

事件 HTML事件 HTML 事件可以是浏览器行为，也可以是用户行为。HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。示

今天药忘吃喽~/ 2023年01月13日 08:57/ 0 赞/ 238 阅读

相关 js事件的防抖和节流

1.事件防抖在函数频繁触发时在设置特定时间段内只调用最后一次，频繁调用时只要在时间段内，就会取消之前的调用。如：input实时搜索，接口触发次数频繁，但是没有必要

短命女/ 2022年12月28日 06:11/ 0 赞/ 179 阅读

相关 JS基础-事件模型(事件&事件流&自定义事件&事件冒泡/代理)

文章目录一、事件与事件流二、事件模型 1.DOM0级模型 2.IE事件模型 3.DOM2级模型 4.

谁践踏了优雅/ 2022年11月14日 10:13/ 0 赞/ 347 阅读

相关 js_事件流

JavaScript的事件是以一种流的形式存在的，一个事件会有多个元素同时相应。可分为三个阶段： 1、捕获阶段（查找目标） 2、目标阶段 3、冒泡阶段（由目标向外响应）

以你之姓@/ 2022年08月03日 16:44/ 0 赞/ 143 阅读

相关事件处理-事件流

事件流----描述的是从页面中接受事件的顺序。 IE----事件冒泡流 Netscape----事件捕获流事件

末蓝、/ 2022年06月11日 08:29/ 0 赞/ 315 阅读

相关 js事件流

参考[事件流解析][Link 1] 参考[讲解清楚明白的事件流][Link 2] 事件流包含三个阶段： 1. 事件捕获 2. 事件目标 3. 事件冒泡 elemen

怼烎@/ 2022年05月25日 14:17/ 0 赞/ 171 阅读

相关 JS 事件流事件冒泡和捕获

JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器来预订事件，以便事件发生时执行相应的代码。　

末蓝、/ 2022年03月15日 17:36/ 0 赞/ 423 阅读

相关 js中事件流、事件冒泡、事件监听、事件委托相关问题总结

1、事件流当触发某个事件时从子元素到父元素或者从父元素到子元素的触发过程成为事件流事件流有两种模式：事件冒泡从子元素向父元素触发事件捕获从

雨点打透心脏的1/2处/ 2022年01月10日 11:05/ 0 赞/ 531 阅读

相关事件流

事件流即事件的传递，常见的事件流机制：冒泡：事件的传递由最具体的元素，层层向外传递，直到最外层元素捕获：时间的传递由最外层向内层层传递，直到最具体的元素 >

Love The Way You Lie/ 2021年11月09日 05:54/ 0 赞/ 357 阅读