08.js基础知识-高级事件
2021/12/29 6:08:45
本文主要是介绍08.js基础知识-高级事件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
高级事件
- 注册事件
- 删除事件
- DOM事件流
- 事件对象
- 阻止事件冒泡
- 事件委托
- 常用的鼠标事件
- 常用的键盘事件
1.注册事件
注册事件分为传统方式和方法监听注册事件
addEventListener(type,listener,[useCapture])同一个元素同一个事件可以注册多个监听器按注册顺序依次执行
type:事件类型字符串,如click,mouseover
listener:事件处理函数,事件发生时,会调用该监听函数
useCapture:可选参数,是一个布尔值,默认false
2.删除事件方式
传统方式删除事件:eventTarget.οnclick=null;
方法监听注册方式:eventTarget.removeEventListener(type,listener)
3.DOM事件流
事件流描述的是从页面中接收事件的顺序,事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程就是DOM事件流
DOM事件流分为3个阶段:1.捕获阶段,2.当前目标阶段,3.冒泡阶段
js代码中只能执行捕获或者冒泡其中的一个阶段
onclick和attachEvent只能得到冒泡阶段
addEventListener(type,listener,[useCapture])中第三个为true表示在事件捕获阶段调用处理程序父元素->子元素,false表示在事件冒泡阶段调用事件处理程序子元素->父元素
4.事件对象
根事件相关的一系列信息数据的集合都放到这个对象里,这个对象就是事件对象
e.target返回触发事件对象的属性和方法,this返回的是绑定事件的对象(元素)
e.type返回事件的类型
e.preventDefault()该方法阻止默认事件,比如不让链接跳转;用return false也可以
5.组织冒泡事件两种方式
标准写法:利用事件对象里的stopPropagation()方法
非标准写法:e.cancelBubbke - true
6.事件委托
事件委托原理!!重点:不要给每个子节点设置监听事件,直接给父节点设置监听事件,这样利用冒泡原理点击子节点就会直接执行父节点的监听事件
7.常用的鼠标事件
document.addEventListener('contextmenu',function(e)){e.preventDefault()}禁止鼠标右键菜单
8.鼠标事件对象
鼠标事件对象mouseevent和键盘对象keyboardevent
ClientX和clientY相对于浏览器窗口可视区;e.pageX和e.pageY文档页面;e.screenX和e.screenY相对于电脑屏幕
9.鼠标键盘事件
onkeyup某个键盘按键被松开时触发;keyup不区分字母大小写
onkeydown某个键盘按键被按下时触发,keydown不区分字母大小写
onkeypress某个键盘按键被按下时触发,但是不识别功能键,keypress事件区分字母大小写
先执行down->press->up
键盘事件对象:用keyCode打印键盘对象;
keydown和keypress在文本框里事件触发时文本还没有落入文本框中
这篇关于08.js基础知识-高级事件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28基于Python+Vue开发的口腔牙科预约管理系统
- 2024-09-28基于Python+Vue开发的酒店客房预订管理系统
- 2024-09-27使用js将ETH账户的资产打散其他账户web3
- 2024-09-27我轻松地将我的 React.js 应用程序翻译成了多种语言。下面是我是如何做到的... ??
- 2024-09-27?? 使用 useMemo 和 useCallback 加速 React:告别缓慢的重新渲染!??
- 2024-09-27Vue CLI多环境配置教程:新手入门指南
- 2024-09-27Vue CLI多环境配置教程:快速入门指南
- 2024-09-27Vue CLI教程:新手入门指南
- 2024-09-27Vue CLI教程:初学者快速入门指南
- 2024-09-27Vue3公共组件教程:入门与实践