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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
javascript一些不错的函数脚本代码
Sep 10 Javascript
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
使用JavaScript通过前端发送电子邮件
May 22 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 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 gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
深入解析php中的foreach函数
2013/08/31 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
JS上传图片预览插件制作(兼容到IE6)
2016/08/07 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
jquery编写日期选择器
2017/03/16 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
Django中的forms组件实例详解
2018/11/08 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
Python tornado上传文件的功能
2020/03/26 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
幼教毕业生自我鉴定
2014/01/12 职场文书
信息技术教学反思
2014/02/12 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL