Js 事件基础
一:js中常见得事件
// 创建一个侦听事件 , 事件类型为 点击 click ,回调函数为clickHandler ,默认 冒泡 document.addEventListener('click',clickHandler) // 事件回调函数的参数 MouseEvent - 鼠标事件 function clickHandler(e) { console.log("我被点击了") }
在上面得代码中侦听事件得对象为 document 就是网页,当我们点击网页得任何一个位置就会触发点击事件,那么就会执行事件的回调函数 clickHandler,打印结果
1.2:删除事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="btn">按钮</button> </body> <script> // 获取dom元素 var btn = document.querySelector('#btn') // 侦听事件 btn.addEventListener('click',clickHandler1) // 事件回调函数 var num = 0 function clickHandler1(e){ num++ console.log('当num > 3 得时候删除事件') if (num>3){ // 删除事件 e.currentTarget.removeEventListener('click',clickHandler1) } } </script> </html>
当我们不断点击按钮,就会不断的触发事件,每点击一次 num 的值就会增加,当num大于3时,就删除本次创建的事件和事件回调函数,为什么要删除事件呢?因为当元素的事件不再使用时,必须删除,否则会造成内存堆积,侦听事件都会被存储在堆中,当元素被删除了,也必须删除该元素的所有事件。
2:事件侦听 与 抛发
事件侦听语法 : 事件侦听对象.addEventListener(事件类型,事件回调函数,是否捕获时执行)
创建事件对象语法:var evt = new Event(事件类型) -指创建一个事件对象
// 侦听事件 document.addEventListener('奥里给',customHandler) // 创建一个事件对象 var evt = new Event('奥里给') // 抛发事件 document.dispatchEvent(evt) // 事件回调函数 function customHandler(e) { console.log(e.type) //e.type 查看事件的类型
}
事件三阶段案例:先写好html代码显示三个背景颜色不一样的块。如下
// 获取 标签 var div0 = document.querySelector('.div0') // 绿色背景块 var div1 = document.querySelector('.div1') // 浅粉色块 var div2 = document.querySelector('.div2') // 红色块 // 给每个块都添加点击事件 div0.addEventListener('click',clickHandler0) div1.addEventListener('click',clickHandler1) div2.addEventListener('click',clickHandler2) function clickHandler0(e){ console.log('点击div0') } function clickHandler1(e){ console.log('点击div1') } function clickHandler2(e){ console.log('点击div2') }
当我们在点击红色块时,我们会发现,div1和div2都被打印了,这就是事件的冒泡,我们点击的真正目标为红色块div2,但是却触发了其他两个块,那么事件如何进行三阶段的呢? 首先当我们点击红色块div2时,事件进入一阶段,捕获阶段,他会先进入div0,查找目标,当没有发现,会进入下一层查找目标,当进入粉丝块时,也没有发现我们想要的目标,当进入红色块div2 时,就会找到我们点击的目标,div2,这个时候事件的一阶段就变成了二阶段,目标阶段,就会开始向外发送信息触发事件,执行事件回调函数,并由二阶段变成三阶段,冒泡阶段,这时是由内向外的一个过程,不断的往外并触发经过的块的事件,直到最外层,这就是事件三阶段的全过程。那么我们可不可以让他不冒泡呢,有
div0.addEventListener('click',clickHandler0) div1.addEventListener('click',clickHandler1) div2.addEventListener('click',clickHandler2) function clickHandler0(e){ console.log('点击div0') } function clickHandler1(e){ console.log('点击div1') } function clickHandler2(e){ e.stopPropagation() // 阻止事件冒泡 console.log('点击div2') }
最新文章
- 微软将向Linux用户提供SQL Server程序
- WPF 打印
- mvc-3模型和数据(2)
- eclipse js卡顿
- Intrusion Detection of Specific Area Based on Video
- C# 在腾讯的发展(作者是微软连续10年的MVP)
- OpenCV4Android释疑: 透析Android以JNI调OpenCV的三种方式(让OpenCVManager永不困扰)
- 51NOD 1222&#160;最小公倍数计数 [莫比乌斯反演 杜教筛]
- cocos2d-x高级学习
- Petrozavodsk Winter-2018. Carnegie Mellon U Contest
- Redis集群概述
- jmeter完成md5加密的接口请求参数
- jvm启动参数设置 -Dfile.encoding=UTF-8 解决freemark乱码
- Mac pip install mysql-python
- sigmoid belief network boltszmann machine
- js数组排序实用方法集锦
- React JSX基本语法规则
- Atcoder Grand Contest 010 B - Boxes 差分
- SpringBoot 分页处理
- template-web.js 真分页绑定表格