事件捕获、事件冒泡、事件委托
时间:2020-05-28
本文章向大家介绍事件捕获、事件冒泡、事件委托,主要包括事件捕获、事件冒泡、事件委托使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
事件捕获、事件冒泡
addEventListener:向指定元素添加事件句柄。(第三个参数默认false冒泡阶段,true为捕获阶段)
onclick:事件会在元素被点击时发生。(发生在冒泡阶段)
一次点击事件流程如下图
注意:
- 目标元素不区分捕获阶段和冒泡阶段,按注册顺序执行。
- 事件执行顺序 与视觉位置无关, 只与真实dom层级有关(例如用z-index把子元素放在父元素之下, 错位漏出子元素,点击子元素,事件捕获 还是父到子,冒泡子到父)
事件委托
对“事件处理程序过多”问题的解决方案就是事件委托.
事件委托利用了事件冒泡, 只指定一个事件处理程序,就可以管理某一类型的所有事件.
优点
- 减少事件注册,节省内存
- 简化了dom更新对应的事件更新
<ul id="oul">
<li id="a">aaaaa</li>
<li id="b">bbbbb</li>
<li id="c">ccccc</li>
</ul>
var oul = document.getElementById('oul');
oul.onclick = function (e) {
switch (e.target.id) {
case 'a':
alert('This is a');
break;
case 'b':
alert('This is b');
break;
case 'c':
alert('This is c');
break;
}
}
阻止事件
阻止捕获和冒泡阶段中当前事件的进一步传播。
event.stopPropagation();
阻止默认事件。
event.preventDefault();
原文地址:https://www.cnblogs.com/whosmeya/p/12979650.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 数组属性和方法
- Greenplum编译安装
- 宏任务和微任务到底是什么?
- React中的setState是异步的吗?
- java安全编码指南之:堆污染Heap pollution
- ECMAScript6基础学习教程(五)对象
- React入门系列(三)创建组件
- prometheus学习笔记(2)-利用java client写入数据
- Vue入门系列(一)Vue技术栈
- Openwrt智能路由系统开发--内容总结
- 干爆红队-爆破CS Teamserver 密码
- 使用Golang免杀Tips
- centos7卸载自带jdk并安装新的jdk
- 即使不懂单元测试,会用这个工具也够了~
- 统计分布讲解
- 使用PyTorch Lightning自动训练你的深度神经网络