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 相关文章推荐
js的逻辑运算符 ||
May 31 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
js表达式与运算符简单操作示例
Feb 15 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的access操作类
2008/04/09 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
Python的print用法示例
2014/02/11 Python
python 多进程通信模块的简单实现
2014/02/20 Python
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
python基础梳理(一)(推荐)
2019/04/06 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
荷兰电脑专场:Paradigit
2018/05/05 全球购物
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
国际贸易专业推荐信
2013/11/15 职场文书
授权委托书怎么写
2014/04/03 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
给领导敬酒词
2015/08/12 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python