js 事件的传播机制(实例讲解)


Posted in Javascript onJuly 20, 2017

事件的默认传播机制:

捕获阶段:从外向里依次查找元素

目标阶段:从当前事件源本身的操作

冒泡阶段:从内到外依次触发相关的行为(我们最常用的就是冒泡阶段)

具体见下图:

js 事件的传播机制(实例讲解)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #outer{
      margin:20px auto;
      padding:20px;
      width:300px;
      height:300px;
      background:#008000;
    }
    #inner{
      padding:20px;
      width:200px;
      height:200px;
      background:blue;
    }
    #center{
      padding:20px;
      width:100px;
      height:100px;
      background:yellow;
    }
  </style>
</head>
<body>
  <div id='outer'>
    <div id='inner'>
      <div id='center'></div>
    </div>
  </div>
  <script>
    var outer = document.getElementById('outer'),inner = document.getElementById('inner'),center = document.getElementById('center');
    //使用DOM0级事件绑定给元素的某一个行为绑定的方法,都是在行为触发后的冒泡阶段把方法执行的
    document.body.onclick = function(){
      console.log('body')
    }
    outer.onclick = function(){
      console.log('outer')
    }
    inner.onclick = function(){
      console.log('inner')
    }
    center.onclick = function(){
      console.log('center')
    }

    //addEventListener 第一个参数是行为的类型 第二个参数是给当前的行为定义的方法 第三个参数是控制在哪个阶段发生:true 在捕获阶段发生 false在冒泡阶段发生
    document.body.addEventListener('click',function(){
      console.log('body')
    },false)
    outer.addEventListener('click',function(){
      console.log('outer')
    },true)
    inner.addEventListener('click',function(){
      console.log('inner')
    },false)

    //输出 outer inner body
  </script>
</body>
</html>

以上这篇js 事件的传播机制(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
详谈for循环里面的break和continue语句
Jul 20 #Javascript
js is_valid_filename验证文件名的函数
Jul 19 #Javascript
vue Render中slots的使用的实例代码
Jul 19 #Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 #Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 #Javascript
深入理解vue Render函数
Jul 19 #Javascript
Vue AST源码解析第一篇
Jul 19 #Javascript
You might like
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
js随机生成一个验证码
2017/06/01 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
python实现无证书加密解密实例
2014/10/27 Python
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python解析json文件相关知识学习
2016/03/01 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
Python实现学校管理系统
2018/01/11 Python
python代码过长的换行方法
2018/07/19 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
控制工程专业个人求职信
2013/09/25 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
高中课程设置方案
2014/05/28 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS
vue选项卡切换的实现案例
2022/04/11 Vue.js