js_事件流

以你之姓@ 2022-08-03 16:44 78阅读 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 条评论，78人围观）

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

相关阅读

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

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

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

相关 js事件的防抖和节流

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

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

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

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

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

相关事件流----事件冒泡事件捕获

DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件. 1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 IE

拼搏现实的明天。/ 2022年08月21日 14:49/ 0 赞/ 245 阅读

相关 js_事件流

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

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

相关事件处理-事件流

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

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

相关 js事件流

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

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

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

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

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

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

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

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

相关事件流

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

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