事件监听、事件委托和回调函数"/>
【JavaScript】事件监听、事件委托和回调函数
1. 事件监听
on 方法：box.onclick = function(){}，但是这种方式会被覆盖，直接使用null覆盖偶就可以实现事件的解绑。
addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的前两个参数分别为【事件类型】和【事件回调】，addEventListener 第3个参数为 true 表示捕获阶段触发，false 表示冒泡阶段触发，默认值为 false。
使用removeEventListener解绑，匿名函数无法解绑。
e.stopPropagation() 写在子元素触发回调函数内部，阻止事件冒泡。e.preventDefault() 阻止链接或者表单域的默认跳转。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件监听</title>
</head>
<body><h3>事件监听</h3><p id="text">为 DOM 元素添加事件监听，等待事件发生，便立即执行一个函数。</p><button id="btn">点击改变文字颜色</button><script>// 1. 获取 button 对应的 DOM 对象const btn = document.querySelector('#btn')// 2. 添加事件监听btn.addEventListener('click', function () {console.log('等待事件被触发...')// 改变 p 标签的文字颜色let text = document.getElementById('text')text.style.color = 'red'})// 3. 只要用户点击了按钮，事件便触发了！！！</script>
</body>
</html>
1.1 鼠标事件
click 代表鼠标单击，dblclick 代表鼠标双击。
mouseenter监听鼠标是否移入 DOM 元素
<body><h3>鼠标事件</h3><p>监听与鼠标相关的操作</p><hr><div class="box"></div><script>// 需要事件监听的 DOM 元素const box = document.querySelector('.box');// 监听鼠标是移入当前 DOM 元素box.addEventListener('mouseenter', function () {// 修改文本内容this.innerText = '鼠标移入了...';// 修改光标的风格this.style.cursor = 'move';})</script>
</body>
mouseleave监听鼠标是否移出 DOM 元素
<body><h3>鼠标事件</h3><p>监听与鼠标相关的操作</p><hr><div class="box"></div><script>// 需要事件监听的 DOM 元素const box = document.querySelector('.box');// 监听鼠标是移出当前 DOM 元素box.addEventListener('mouseleave', function () {// 修改文本内容this.innerText = '鼠标移出了...';})</script>
</body>
mouseover 和 mouseout 会有冒泡效果。
mouseenter 和 mouseleave 没有冒泡效果 (推荐)。
1.2 键盘事件
keydown 键盘按下触发
keyup 键盘抬起触发
1.3 焦点事件
focus 获得焦点
blur 失去焦点
1.4 文本框输入事件
input ：在文本框中输入、删除或粘贴内容时，该事件会触发
change：给文本框注册change事件，文本框的值发生变化并且失去焦点时触发
1.5 其他事件
load：监听页面所有资源加载完毕（window.addEventListener）。
scroll：监听滚动条在滚动时持续出发的事件（window.addEventListener）。
resize：页面尺寸发生变化时触发事件（window.addEventListener）。
2. 事件对象
任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。
<body><h3>事件对象</h3><p>任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。</p><hr><div class="box"></div><script>// 获取 .box 元素const box = document.querySelector('.box')// 添加事件监听box.addEventListener('click', function (e) {console.log('任意事件类型被触发后，相关信息会以对象形式被记录下来...');// 事件回调函数的第1个参数即所谓的事件对象console.log(e)})</script>
</body>
事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为 event、e 。
e.type当前事件的类型e.clientX/Y光标相对浏览器窗口的位置e.offsetX/Y光标相于当前 DOM 元素的位置e.scrollTop获取被卷去的大小
注：
5. 在事件回调函数内部通过 window.event 同样可以获取事件对象
6. key 键盘按键值
3. 事件委托
自己不注册事件，将对应的事件注册给祖先元素，减少事件的注册，提高效率。
大量的事件监听是比较耗费性能的，如下代码所示
<script>// 假设页面中有 10000 个 button 元素const buttons = document.querySelectorAll('table button');for(let i = 0; i <= buttons.length; i++) {// 为 10000 个 button 元素添加了事件buttons.addEventListener('click', function () {// 省略具体执行逻辑...})}
</script>
利用事件流的特征，事件的的冒泡模式总是会将事件流向其父元素的，如果父元素监听了相同的事件类型，那么父元素的事件就会被触发并执行，正是利用这一特征对上述代码进行优化，如下代码所示：
<script>// 假设页面中有 10000 个 button 元素let buttons = document.querySelectorAll('table button');// 假设上述的 10000 个 buttom 元素共同的祖先元素是 tablelet parents = document.querySelector('table');parents.addEventListener('click', function () {console.log('点击任意子元素都会触发事件...');})
</script>
如果只是点击 button 子元素才会触发，那么加一个判断if(e.target.tagName === 'BUTTON')。
3. 环境对象
环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境。
<script>// 声明函数function sayHi() {// this 是一个变量console.log(this);}// 声明一个对象let user = {name: '张三',sayHi: sayHi // 此处把 sayHi 函数，赋值给 sayHi 属性}let person = {name: '李四',sayHi: sayHi}// 直接调用sayHi() // windowwindow.sayHi() // window// 做为对象方法调用user.sayHi()// userperson.sayHi()// person
</script>
this 本质上是一个变量，数据类型为对象。
4. 回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数。
<script>// 声明 foo 函数function foo(arg) {console.log(arg);}// 普通的值做为参数foo(10);foo('hello world!');foo(['html', 'css', 'javascript']);function bar() {console.log('函数也能当参数...');}// 函数也可以做为参数！！！！foo(bar);
</script>
函数 bar 做参数传给了 foo 函数，bar 就是所谓的回调函数。
<script>// 调用定时器，匿名函数做为参数setInterval(function () {console.log('我是回调函数...');}, 1000);
</script>
更多推荐
【JavaScript】事件监听、事件委托和回调函数
发布评论