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 相关文章推荐
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 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
MySQL 日期时间函数常用总结
2012/06/12 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
php中require和require_once的区别说明
2014/02/27 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
php返回json数据函数实例
2014/10/09 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
javascript实现固定侧边栏
2021/02/09 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
Python不规范的日期字符串处理类
2014/06/10 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
数字漫画:comiXology
2020/06/13 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
乡文化站暑期培训方案
2014/08/28 职场文书
户籍证明格式
2014/09/15 职场文书
刑事代理授权委托书
2014/09/17 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
父亲节感言
2015/08/03 职场文书