javascript事件冒泡,事件捕获和事件委托详解
作者:Patty_2000 发布时间:2024-04-10 14:02:47
标签:javascript,事件冒泡,事件捕获,事件委托
1、事件冒泡:在javascript事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止。并不是所有的事件都有冒泡现象,比如如下几个:blur
事件 ,focus
事件, load
事件
2、事件委托:事件捕获恰好与事件冒泡相反,它从顶层祖先元素开始,直到事件触发元素。
js事件捕获一般通过DOM2事件模型addEventListener
来实现的:
target.addEventListener(type, listener, useCapture)
第三个参数默认设置为false,表示在冒泡阶段出发事件,设置为true时表示在捕获阶段触发,一般我们工作中似乎很少使用事件捕获。但还是要理解一下
<div id="box">
<div id="middle">
<div id="inner"></div>
</div>
</div>
<script>
//事件捕获
window.onload=function(){
let box=document.getElementById("box");
let middle=document.getElementById("middle");
let inner=document.getElementById("inner");
box.addEventListener("click",function(){console.log("box")},true);
middle.addEventListener("click",function(){console.log("middle")},true);
inner.addEventListener("click",function(){console.log("inner")},true);
}
</script>
点击inner,控制台依次输出:box,middle,inner
阻止事件冒泡
平时会用到大量的事件冒泡事件,但是可能我们在某个子级标签不需要传递事件给父级,这时候就需要阻止它事件的冒泡。
一般,使用stopPropagation来阻止事件的冒泡,IE中使用cancleBuble=true,stopPropagation也是事件对象(Event)的一个方法,作用是阻止目标元素的冒泡事件,但是会不阻止默认行为。
//阻止事件冒泡
let btna = document.getElementById('btn');
btna.onclick=function(e){
window.event? window.event.cancelBubble = true : e.stopPropagation();
};
3、事件委托:事件委托又可以叫事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
益处:减少dom操作可以提高网页性能,当一个页面的父级元素和很多子级元素都需要操作同一件事件的时候,我们不可能每个元素都去给它绑定一个事件
<ul id="getNum">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
let ptclick = document.getElementById('getNum');
let lilist = ptclick.querySelectorAll('li');
for(let i=0;i<lilist.length;i++){
lilist[i].index = i;
};
ptclick.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
console.log(e.target.index);
};
</script>
来源:https://blog.csdn.net/Patty_2000/article/details/121238245
0
投稿
猜你喜欢
- 本文将通过一下几个方面来一一进行解决 1、程序的主要功能
- python中支持SSH协议的模块主要有Paramiko和netmiko两种,本次实验采用netmiko模块。netmikko模块为pyth
- 在日常工作中;经常会遇到这样的需求:Oracle 数据表跟文本或者文件格式进行交互;即将指定文件内容导入对应的 Oracle 数据表中;或者
- 以下是通过Excel 的VBA连接Oracle并操作Oracle相关数据的示例Excel 通过VBA连接数据库需要安装相应的Oracle客户
- 本文介绍了python OpenCV学习笔记直方图反向投影的实现,分享给大家,具体如下:官方文档 – https://docs.opencv
- 本文实例为大家分享了python多进程读图提取特征存npy的具体代码,供大家参考,具体内容如下import multiprocessingi
- 写在前面好久没更新Blog了,从CRUD Boy转型大数据开发,拉宽了不少的知识面,从今年年初开始筹备、组建、招兵买马,到现在稳定开搞中,期
- 在linux服务器部署thinkphp5的时候PHP报了Warning: require(): open_basedir restricti
- 目录一、数据库瓶颈二、分库分表2、水平分表3、垂直分库4、垂直分表三、分库分表工具四、分库分表步骤五、分库分表问题1、非partition
- import md5 import sys def sumfile(fobj): m = md5.new() while True: d =
- git checkout . #本地所有修改的。没有的提交的,都返回到原来的状态git stash #把所有没有提交的修改暂存到stash里
- 本文实例讲述了Python利用神经网络解决非线性回归问题。分享给大家供大家参考,具体如下:问题描述现在我们通常使用神经网络进行分类,但是有时
- 一、实验目的:1.掌握Python中柱状图、条形图绘图函数的使用2.利用上述绘图函数实现数据可视化二、实验内容:1.练习python中柱状图
- 引言with 语句是从 Python 2.5 开始引入的一种与异常处理相关的功能(2.5 版本中要通过 from __future__ im
- 如下所示:区别ArrayTensor类型uint8,float32系列{}各类型相互转换uint8转float64:image = imag
- 在使用ORACLE的过程过,我们会经常遇到一些ORACLE产生的错误,对于初学者而言,这些错误可能有点模糊,而且可能一时不知怎么去处理产生的
- 前言删除数据表的时候,表的定义和表中所有的数据均会被删除。因此,在进行删除操作前,最好对表中的数据做一个备份,以免造成无法挽回的后果。mys
- 自动签到的python脚本源码新建一个python文件,checkin.py,保存到电脑上某个位置,我这里保存到的是E:\pyproject
- 如下所示:一. visualize.pyfrom graphviz import Digraphimport torchfrom torch
- 本文实例讲述了python命令行参数解析OptionParser类的用法,分享给大家供大家参考。具体代码如下:from optparse i