JavaScript 事件

这篇博客介绍了JavaScript中的事件处理,包括事件的基本概念、事件对象的使用,如clientX和clientY属性,以及事件冒泡和如何取消冒泡。还讲解了事件委派的概念,它是如何通过绑定祖先元素来处理后代元素事件,以提高程序性能。最后,讨论了事件绑定的不同方式,包括传统的事件绑定和addEventListener方法,以及它们的特点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JavaScript 事件简介

事件就是文档或浏览器窗口(用户与浏览器)中发生的一些特定的交互行为,JavaScript与HTML之间的交互是通过事件实现的

onclick 鼠标点击某个对象

 

JavaScript 事件对象

事件对象:当事件的响应函数被触发时 浏览器每次都会将一个事件对象作为实参传递响应函数 在事件对象中封装了当前事件相关的一切信息(在IE8中响应函数被触发 浏览器不会传递事件对象 在IE8以下会将事件对象作为window对象的属性保存的)

Onmousemove 该事件将会在鼠标元素中移动被触发

clientX 可以获取鼠标指针的水平坐标   clientY 可以获取鼠标指针的垂直坐标

 

JavaScript 事件冒泡

事件冒泡:所谓的冒泡指的是事件的向上传导 当后代元素上的事件被触发时 其祖先元素的相同事件也会被触发

取消冒泡 event.cancelBubble=true

 

JavaScript 事件委派

事件委派:指将事件统一绑定给元素共同的祖先元素 当后代元素上的事件触发时 会一直冒泡到祖先元素 从而通过祖先元素的响应函数来处理事件

事件委派利用冒泡 通过委派可以减少事件绑定的次数 提高程序的性能

事件对象的属性target:返回触发此事件的元素(事件的目标节点)

 

 

JavaScript 事件绑定

事件绑定:对象 .事件 = 函数形式绑定事件 只能同时为同一个元素绑定同一个事件一次(不能绑定多次 如绑定多次 后面的会覆盖掉前面的)

 

 

 

addEventListener()通过这个方法也可以为元素绑定响应函数 它可以同时为一个元素的相同事件绑定多个响应函数 当事件被触发时 响应函数将会按照函数的绑定顺序执行(这个方法不支持IE8及以下的浏览器)

 

 

 这是我所学的JavaScript 的事件希望可以帮助到你们。以上就是我的分享,新手上道,请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值