JavaScript捕获和冒泡探讨
时间:2019-11-15
本文章向大家介绍JavaScript捕获和冒泡探讨,主要包括JavaScript捕获和冒泡探讨使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<div id="div"> <input type="button" value="banana" id="banana" /> </div>
在此页面中我们添加如下的代码:
var btn = document.getElementById('banana'); var div = document.getElementById('div'); btn.addEventListener('click', function () { console.log('capture', 'btn'); }, true); btn.addEventListener('click', function () { console.log('bubble', 'btn'); }, false); div.addEventListener('click', function () { console.log('capture', 'div'); }, true); div.addEventListener('click', function () { console.log('bubble', 'div'); }, false);
给button和div我们都是先绑定的捕获事件,此时运行的结果如下:
capture div
capture btn
bubble btn
bubble div
可以看出是先运行的 捕获div - > 捕获 btn - > 冒泡 btn -> 冒泡 div.
我们改改事件绑定的先后顺序,代码如下:
var btn = document.getElementById('banana'); var div = document.getElementById('div'); btn.addEventListener('click', function () { console.log('bubble', 'btn'); }, false); btn.addEventListener('click', function () { console.log('capture', 'btn'); }, true); div.addEventListener('click', function () { console.log('bubble', 'div'); }, false); div.addEventListener('click', function () { console.log('capture', 'div'); }, true);
再看运行的结果:
capture div
bubble btn
capture btn
bubble div
此时结果是 捕获 div -> 冒泡 btn -> 捕获 btn -> 冒泡 div .
猜测结论: 在最后一个捕获元素中,冒泡和捕获的事件执行的先后顺序与事件绑定的先后顺序有关,谁先绑定就优先执行谁。
我们再改改页面代码:
<div id="div"> <div id="div1"> <input type="button" value="banana" id="banana" /> </div> </div>
改改绑定事件的代码:
var btn = document.getElementById('banana'); var div = document.getElementById('div'); var div1 = document.getElementById('div1'); btn.addEventListener('click', function () { console.log('bubble', 'btn'); }, false); btn.addEventListener('click', function () { console.log('capture', 'btn'); }, true); div.addEventListener('click', function () { console.log('bubble', 'div'); }, false); div.addEventListener('click', function () { console.log('capture', 'div'); }, true); div1.addEventListener('click', function () { console.log('bubble', 'div1'); }, false); div1.addEventListener('click', function () { console.log('capture', 'div1'); }, true);
点击button执行的结果:
capture div
capture div1
bubble btn
capture btn
bubble div1
bubble div
此时结果是 : 捕获 div - > 捕获div1 - > 冒泡 btn -> 捕获 btn -> 冒泡 ->div1 -> 冒泡 div.
其它的元素都是按照先捕获后冒泡的顺序在执行,只有最后一个捕获元素中,冒泡和捕获的事件执行的先后顺序与事件绑定的先后顺序有关,谁先绑定就优先执行谁。
原文地址:https://www.cnblogs.com/huaan011/p/11867815.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux 【Shell脚本经典案例】
- 【Vulnhub】SecTalks: BNE0x00 - Minotaur
- Spring Boot扩展机制 - Spring Factories
- Google Analytics上实施透明度和用户意见征求框架
- 浅析鸿蒙 JavaScript GUI 技术栈
- C#串口操作类,包括串口读写操作
- Go by Example 中文版: 时间
- Go by Example 中文版: 时间戳
- Day14.模块&包
- 关于 JavaScript 错误处理的最完整指南(下半部)
- 踩坑记录 | Android 逆向之如何处理 Kali Nat 模式无法上网?
- gson 替换 fastjson 引发的线上问题分析
- P1003 铺地毯
- 花10分钟写一个 Python 脚本,搞定了初中老师一个下午的工作
- 微信小程序导航栏页面滑动切换