事件代理?

1.什么是事件代理?

        事件代理也叫事件委托,只指定一个事件处理程序,就可以管理某一类型得事件。

        可以简单理解为,事件代理就是将本应该绑定子元素事件绑定给父元素代理。它的优点就是:减少事件得执行,减少浏览器重排重绘,优化页面性能,给新增元素绑定事

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 延迟代码执行 页面加载完毕后再执行window.onload = function () {var ul = document.querySelector('ul');console.log(ul, '头部获取');}</script>
</head><body><ul><li>我是第1个li</li><li>我是第2个li</li><li>我是第3个li</li><li>我是第4个li</li><li>我是第5个li</li><li>我是第6个li</li><li>我是第7个li</li><li>我是第8个li</li><li>我是第9个li</li><li>我是第10个li</li></ul><script>/*** 什么是事件委托/事件代理******************** 只指定一个事件处理程序 就可以管理某一类型的事件* 将本应该绑定给子元素事件绑定父元素代理* 优点:减少事件的执行,减少浏览器重排和重绘,优化页面性能,可以给新增元素绑定事件*/var ul = document.querySelector('ul');// children获取元素所有子元素节点var lis = ul.children;// console.log(lis,'获取子元素节点');// for(var i=0;i<lis.length;i++){//   lis[i].onclick = function(){//     this.style.backgroundColor = 'red';//   }// }// 给父元素绑定事件ul.onclick = function () {console.log(event.target, '事件对象');event.target.style.backgroundColor = 'red';}var newLi = document.createElement('li');newLi.innerHTML = '我是新增li';ul.appendChild(newLi);</script>
</body></html>

浏览器运行结果如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><ul><li id="one">第一个li标签</li><li id="two">第二个li标签</li><li id="three">第三个li标签</li></ul><script>// var one = document.getElementById('one');// var two = document.getElementById('two');// var three = document.getElementById('three');// one.onclick = function(){//   this.innerHTML = 'hello html'// }// two.onclick = function(){//   this.innerHTML = 'hello css'// }// three.onclick = function(){//   this.innerHTML = 'hello js'// }/*** 将li的事件代理给ul*/var ul = document.querySelector('ul');ul.onclick = function () {// console.log(event.target)// 获取点击的某一个li元素 var target = event.target;switch (target.id) {case 'one':target.innerHTML = 'hello html';break;case 'two':target.innerHTML = 'hello css';break;case 'three':target.innerHTML = 'hello js';break;default:target.innerHTML = '我是li标签';}}</script>
</body></html>

浏览器运行结果如下:

 


2.事件类型

        select 输入框选择字符触发    resize 窗口缩放触发    scroll 滚动事件     获取滚动条距离上方位置 document.documentElement.scrollTop || window.pageYoffset;
        鼠标事件
            mouseenter    mousemove    mouseleave    mouseup    mousedown    mousewheel
        键盘事件
            keyup 键盘抬起    keydown 键盘按下    keypress 键盘持续按下
        输入框事件
            focus 聚焦    blur失焦    input 监听输入框事件    textInput 监听输入框事件 使用dom2级事件进行绑定

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: red;}</style>
</head><body><input type="text"><div>我是一个div</div><!-- <div style="height: 5000px;"></div> --><script>var input = document.querySelector('input');/*** 1.select 当选择输入框字符时候触发 火狐不支持*/input.onselect = function () {console.log(window.getSelection().toString(), '我被触发了');}/*** 2.当页面发生缩放时候触发*/// window.onresize = function(){//   console.log(window.outerWidth,window.outerHeight)// }/*** 3.滚动事件 scroll*/window.onscroll = function () {// console.log(window.pageYOffset,'获取距离上方位置')console.log(document.documentElement.scrollTop, '获取距离上方位置')}/*** 4.监听输入框值事件*/input.oninput = function () {console.log(event.target.value, '输入框输入的值')}/***5. 聚焦事件 focus*/// input.onfocus = function () {//   this.style.backgroundColor = 'red'// }/*** 6.失焦事件 blur*/input.onblur = function () {// this.style.backgroundColor = 'blue';}/*** 鼠标事件 * mouseenter 鼠标移入 * mouseleave 鼠标移除* mousemove  鼠标一直移动* mousedown * mouseup * mousewheel * click * dbclick*/var div = document.querySelector('div');div.onmouseenter = function () {console.log('鼠标移入');}div.onmouseleave = function () {console.log('鼠标移出');}div.onmousemove = function () {console.log('鼠标一直移动');}div.onmousedown = function () {console.log('鼠标按下');}div.onmouseup = function () {console.log('鼠标抬起')}div.onmousewheel = function () {console.log('鼠标滚轮');}div.ondblclick = function () {console.log('鼠标双击');}/*** 键盘事件 * keydown 键盘按下事件* keyup   键盘抬起事件* keypress 键盘持续按下事件*/// input.onkeydown = function () {//   console.log(event.keyCode, '键盘keyCode我被按下了');// }// input.onkeyup = function () {//   console.log('键盘抬起');// }// input.onkeypress = function () {//   console.log('键盘持续按下事件');// }input.addEventListener('textInput', function (event) {console.log(event.data,'00000');})</script>
</body></html>

浏览器运行结果如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/180436.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CentOS 7 部署 MariaDB 的 2 种方法

有两种安装 MariaDB 服务器的方法。您可以安装 CentOS 7 存储库中可用的默认版本&#xff0c;也可以通过手动添加 MariaDB 存储库来安装最新版本。 如果安装过MariaDB或MySQL&#xff0c;使用以下命令彻底删除它们: yum remove mariadb* yum remove mysql* 方法一: 使用 Yum…

Make Pixels Dance: High-Dynamic Video Generation论文解析

高动态视频生成的新进展 Make Pixels Dance: High-Dynamic Video Generation高动态视频生成的新进展前言视频生成模式摘要论文十问实验数据集定量评估指标消融研究 训练和推理技巧训练技术推理技术 更多的应用 Make Pixels Dance: High-Dynamic Video Generation 高动态视频生…

VBA技术资料MF87:创建固定顺序名称的一组文件夹

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。我的教程一共九套&#xff0c;分为初级、中级、高级三大部分。是对VBA的系统讲解&#xff0c;从简单的入门&#xff0c;到…

gRPC Java、Go、PHP使用例子

文章目录 1、Protocol Buffers定义接口1.1、编写接口服务1.2、Protobuf基础数据类型 2、服务器端实现2.1、生成gRPC服务类2.2、Java服务器端实现 3、java、go、php客户端实现3.1、Java客户端实现3.2、Go客户端实现3.3、PHP客户端实现 4、运行效果 本文例子是在Window平台测试&a…

Unity UGUI图片锯齿严重怎么解决

在开发的时候&#xff0c;发现图片锯齿严重&#xff0c;打包到移动端或者在编辑器都这样&#xff0c;如下图 原因&#xff1a; 查了一些资料&#xff0c;找到了原因如下&#xff1a;关于为什么会发生这种情况&#xff1a;看起来你的源资源比你在屏幕上显示的大小大得多。所以当…

深入浅出 Vue 中的插槽 slot

深入浅出 Vue 中的插槽 slot start 最近被问到好几次 Vue 中的插槽相关知识&#xff0c;掌握的还是有些不全面。抱着重新学习的心态&#xff0c;写这篇博客。首先对基础知识做一个回顾&#xff0c;然后再对源码实现做一个学习。作者&#xff1a;番茄编写时间&#xff1a;2023…

STM32_10(I2C)

I2C通信 I2C&#xff08;Inter IC Bus&#xff09;是由Philips公司开发的一种通用数据总线两根通信线&#xff1a;SCL&#xff08;Serial Clock&#xff09;、SDA&#xff08;Serial Data&#xff09;同步&#xff0c;半双工带数据应答支持总线挂载多设备&#xff08;一主多从…

QAC支持的静态度量属性

上面介绍了Coverity支持的12个度量属性&#xff0c;下面我们看看QAC这款工具支持的度量属性。下面分成3类&#xff0c;函数度量、文件度量和类度量。 函数度量指标不多&#xff0c;一共有8个。 文件度量度量指标一共10个&#xff0c;如下表。 类度量指标一个8个&#xff0c;如…

python实现C++简易自动压行

突发奇想&#xff0c;想要将自己的c压行之后交上去。但是苦于手动压行效率太低&#xff0c;在网上搜索压行网站没有找到&#xff0c;突然发现压行不就是检查检查去个换行符吗。于是心血来潮&#xff0c;用python实现了一个简易压行程序。 首先&#xff0c;宏定义等带#的文件不…

正则表达式及文本三剑客grep,awk,sed

目录 正则表达式 前瞻 代表字符 表示次数 位置锚定 分组或其他 grep 选项 范例 awk 前瞻 awk常见的内置变量 范例 sed 前瞻 sed格式 范例 搜索替代 格式 范例 分组后项引用 格式 范例 正则表达式 前瞻 通配符&#xff1a;匹配的是文件名 正则表达式&a…

Windows10免安装PostgreSQL

1. PostgreSQL简介2. 下载3. 安装环境4. 安装 4.1. 初始化数据库4.2. 启动数据库4.3. 注册服务4.3. 卸载服务 1. PostgreSQL简介 PostgreSQL 是一种特性非常齐全的自由软件的对象-关系型数据库管理系统&#xff0c;是以加州大学计算机系开发的 POSTGRES 4.2版本为基础的对象关…

java开发需要掌握的maven相关知识和Junit单元测试

maven简介 什么是maven&#xff1a; maven是一款管理和构建java项目的工具&#xff0c;是apache旗下的一个开源项目。 maven的作用&#xff1a; 依赖管理&#xff1a; 方便快捷的管理项目依赖的资源&#xff08;jar包&#xff09;。 项目构建&#xff1a; 标准化的跨平台&#…

开发知识点-CSS样式

CSS样式 fontCSS 外边距 —— 围绕在元素边框的空白区域# linear-gradient() ——创建一个线性渐变的 "图像"# transform ——旋转 元素![在这里插入图片描述](https://img-blog.csdnimg.cn/20191204100321698.png)# rotate() [旋转] # 边框 (border) —— 围绕元素内…

计算机毕业设计php+bootstrap小区物业管理系统

意义&#xff1a;随着我国经济的发展和人们生活水平的提高&#xff0c;住宅小区已经成为人们居住的主流&#xff0c;人们生活质量提高的同时&#xff0c;对小区物业管理的要求也越来越高&#xff0c;诸如对小区的维修维护&#xff0c;甚至对各项投诉都要求小区管理者做得好&…

人工智能-优化算法之梯度下降

梯度下降 尽管梯度下降&#xff08;gradient descent&#xff09;很少直接用于深度学习&#xff0c; 但了解它是理解下一节随机梯度下降算法的关键。 例如&#xff0c;由于学习率过大&#xff0c;优化问题可能会发散&#xff0c;这种现象早已在梯度下降中出现。 同样地&#x…

《微信小程序开发从入门到实战》学习三十四

4.2 云开发JSON数据库 MySQL、Oracle之类的“关系型数据库”。JSON数据库是“非关系型数据库”&#xff0c;没有行表列的概念。 4.2.1 JSON数据库基本概念 集合:一个数据库有多个集合&#xff0c;一个集合存储通常是同一类数据&#xff0c;可看作为JSON数组&#xff0c;数组…

P25 C++ const关键字

前言 本期我们要讲的是 C 中的 const 关键字。 const 在改变生成代码方面做不了什么&#xff0c;它有点像类和结构体的可见性&#xff0c;这是一个机制&#xff0c;可以让我们的代码更加干净&#xff0c;并对开发人员写代码强制特定的规则。 const 就像你做出的承诺&#xf…

王者小游戏

游戏里的经验动物 Bear package beast; import sxt.GameFrame; public class Bear extends Beast {public Bear(int x, int y, GameFrame gameFrame) {super(x, y, gameFrame);setImg("C:\\Users\\辛欣\\OneDrive\\桌面\\王者荣耀图片(1)\\王者荣耀图片\\beast\\bear.jp…

MacBook如何远程控制华为手机?

将手机屏幕投影到电脑上可以提供更大的屏幕空间&#xff0c;方便观看电影、浏览照片、阅读文档等。然而&#xff0c;除了想将手机投屏到电脑&#xff0c;还想要在电脑上直接操作手机&#xff0c;有方法可以实现吗&#xff1f; 现在使用AirDroid Cast的远程控制手机功能就可以实…

【CVE-2023-49103】ownCloud graphapi信息泄露漏洞(2023年11月发布)

漏洞简介 ownCloud owncloud/graphapi 0.2.x在0.2.1之前和0.3.x在0.3.1之前存在漏洞。graphapi应用程序依赖于提供URL的第三方GetPhpInfo.php库。当访问此URL时&#xff0c;会显示PHP环境的配置详细信息&#xff08;phpinfo&#xff09;。此信息包括Web服务器的所有环境变量&a…