事件冒泡和传播

2018-08-13 admin

事件冒泡和传播 举栗子 事件输出hello world 事件有两种,一种为事件传播,一种是事件冒泡

事件传播和事件冒泡

这还要从遥远的荒诞说起,两家网景和ie,为了能争夺市场,互相使用相反的技术,当网景使用事件传播的时候,ie使用事件冒泡。(两个正好相反)这个时候w3c来了,为了能规范规定,直接取折中,当事件发生时,先发生向下传播,当到底了以后再次使用事件冒泡,逐渐的冒泡到顶层window

DOM为一个完整的树

使用事件传播输出hello world

html如下

<!DOCTYPE html> 
<html>
  <head>
      <meta charset="utf-8">
      <link href="./index.css" type="text/css" rel="stylesheet">
    <title>Hello world</title>
  </head>
  <body>
    <div id="div1">
        <div id="div2">
            <span id="div3">点击这里</span>
        </div>
    </div>
  </body>
</html>
<script src="./index.js"></script>

css如下

* {
    margin:0;
    padding:0;
    border:0;
}

#div1 {
    width:300px;
    height:300px;
    background:#c7e0d9;
    position:relative;
}

#div2 {
    width:100px;
    height:100px;
    background:#8ac3d8;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    text-align:center;
    line-height:100px;
}

显示的效果如下 此处输入图片的描述 下面书写js

冒泡

先使用冒泡

// 获取元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

// 绑定事件
// 当单击外部方框的时候
div1.addEventListener('click', () => {
    alert("hello world! 你点击的是外框!");
}, false);
div2.addEventListener('click', () => {
    alert("hello world! 你点击的是内框");
}, false);
div3.addEventListener('click', () => {
    alert("hello world! 你点击的是文字");
}, false);

当为false的时候为冒泡。否则为事件传播

冒泡为上,事件传播为下,事件传播优于事件冒泡

此处输入图片的描述

可以明确的知道,此时为false为冒泡,即全部向上传播,这个比较简单不在阐述

阻止进一步冒泡

// 获取元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

// 绑定事件
// 当单击外部方框的时候
div1.addEventListener('click', () => {
    alert("hello world! 你点击的是外框!");
}, false);
div2.addEventListener('click', () => {
    alert("hello world! 你点击的是内框");
    event.stopPropagation();    // 阻止该事件进一步传播
}, false);
div3.addEventListener('click', () => {
    alert("hello world! 你点击的是文字");
}, false);

js如上,在div2内部使用event.stopPropagation()阻止进一步冒泡 结果如下 此处输入图片的描述 可以看到明显的被阻挡

传播

传播方向更冒泡相反,为向下,且传播优先于冒泡 并且事件先进行向上传,直到遇到设置为冒泡的元素的时候,停止向上传,开始进行从上到下的捕获,先最外层捕获,然后逐层捕获,直到完成。

// 获取元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

// 绑定事件
// 当单击外部方框的时候
div1.addEventListener('click', () => {
    alert("hello world! 你点击的是外框!");
}, true);
div2.addEventListener('click', () => {
    alert("hello world! 你点击的是内框");
}, true);
div3.addEventListener('click', () => {
    alert("hello world! 你点击的是文字");
}, true);

此处输入图片的描述

传播优先于冒泡

js如下

// 获取元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

// 绑定事件
// 当单击外部方框的时候
div1.addEventListener('click', () => {
    alert("hello world! 你点击的是外框!");
}, false);
div2.addEventListener('click', () => {
    alert("hello world! 你点击的是内框");
}, true);
div3.addEventListener('click', () => {
    alert("hello world! 你点击的是文字");
}, true);

演示 此处输入图片的描述

ps: 最近在写gitchat 有点慢

原文链接:https://segmentfault.com/a/1190000015980593

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37833.html

文章标题:事件冒泡和传播

相关文章
JavaScript和Java
JavaScript和Java在某些方面相似但完全不同。 JavaScript语言类似于Java但是没有Java的静态类型和强类型检查,不过它们的语法和 C 语言都很相似。 JavaScript基于原型的对象模型,而不是更常见的基于类的对象...
2015-11-12
JavaScript基本语法和规范
JavaScript是区分大小写的,使用Unicode字符集。 在JavaScript中,语句以“;”结尾。 JavaScript脚本的源文本被从左到右执行。 虽然有时“;”是不必要的,但我们建议总是在你的语句结束处添加分号;它将避免副作用...
2015-11-12
jquery拼接ajax 的json和字符串拼接的方法
整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,稍微整理精简一下做下分享。 jQuery拼接字符串ajax &lt;form id=&quot;myForm&quot; action=&quot;#&quot;&...
2017-04-01
数据类型和结构
ECMAScript标准定义了七种数据类型 1)布尔值(true 和 false) 2)null,一个特殊的关键字表示空,要注意,javascrip是区分大小写的,所以Null和null是不一样的 3)undefined 表示未定义 4)N...
2015-11-12
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
JavaScript中的call方法和apply方法使用对比
方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象。 说明: call 方法可以用来代替另一个对象调用一个方法。c...
2017-03-29
Web缓存基础:术语、HTTP报头和缓存策略
简介 对于您的站点的访问者来说,智能化的内容缓存是提高用户体验最有效的方式之一。缓存,或者对之前的请求的临时存储,是HTTP协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求,这受控于对该内容所声明的缓存策略...
2016-01-13
PHP 和 Node.js 的角摔
在最近 SitePoint 的 PHP vs Node.js Smackdown 一文中,Craig Buckler 对两种语言就如何应对一系列的10个挑战进行了比较来决定哪一个总体上更佳。 Craig 在书中讲到,这些比较总是有些矛盾。作...
2015-12-25
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
本文主要通过代码示例给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题;分步介绍,先给大家介绍IE7浏览器窗口大小改变事件执行多次bug,具体问题分析及解决方案请看下文。 var resizeTi...
2017-03-29
回到顶部