JavaScript 事件

  本文内容学习于：后盾人 (houdunren.com)

一、事件监听绑定方式 addEventListener 操作事件

使用 addEventListener 添加事件处理程序有以下几个特点:
"transtionend /DOMContentLoaded 等事件类型只能使用 addEventListener 处理.同一事件类型设置多个事件处理程序，按设置的顺序先后执行.也可以对未来添加的元素绑定事件

参数说明:
1.参数一事件类型
2.参数二事件处理程序
3.参数三为定制的选项，可传递 object 或 boolean 类型。后面会详细介绍使用区别

二、使用 removeEventListener 删除绑定的事件处理程序

houdunren.com

删除事件

三、事件选项
addEventListener 的第三个参数为定制的选项，可传递 object 或 boolean 类型
下面是传递对象时的说明:

选项    可选参数    
once    true/false    只执行一次事件    
capture true/false    事件是在捕获/冒泃哪个阶段执行，true:捕获阶段 false:冒泡阶段    
passive true/false声明事件里不会调用 preventDefault))，可以减少系统默认行为的等待

如:使用 once:true 来指定事件只执行一次

houdunren.com

四、冒泡捕获
1.冒泡行为:、

标签元素是嵌套的，在一个元素上触发的事件，同时也会向上执行父级元素的事件外理程序，一直到HTMI，标签元素。，大部分事件都会冒泡，但像focus事件则不会
event.target 可以在事件链中最底层的定义事件的对象 event.currentTarget== this 即当前执行事件的对象

2.阻止冒泡: event.stopPropagation()

3.事件捕获:通过设置第三个参数为 true 或{ capture:true}在捕获阶段执行事件处理程序
事件执行顺序为 捕获 >事件目标>冒泡，在向下传递到目标对象的过程即为事件捕获。事件捕获在实际使用中频率不高。

const app =document.querySelector('#app')

app.addEventListener(
'click',
(event) => {
console.log('app event')

{ capture: true }

}

4.事件代理:又叫 事件委托

借助冒泡思路，我们可以不为子元素设置事件，而将事件设置在父级。然后通过父级事件对象的event.target查找子元素，并对他做出处理。

这在为多个元素添加相同事件时很方便

会使添加事件变得非常容易

• l
• 2
• 3

使用"事件委托”时，并不是说把原生事件委托的元素越靠近顶层越好。事件冒询的过程中也需要耗时，越靠近顶层，事件的“事件传播链”越长，也就越耗时。

5.未来元素:使用事件代理(事件委托)来对未来元素进行事件绑定

五、默认行为

·使用 onclick 绑定的事件处理程序，return false 可以阻止默认行为

·推荐使用event.preventDefault()阻止默认行为

六、窗口文档
1.事件类型

事件名                          说明    
window.onload             文档解析及外部资源加载后    
DOMContentLoaded    文档解析后执行，不需要等待图片/样式文件等外部资源加载，该事件只能通过 addEventListener设置    

window.beforeunload   文档刷新或关闭时
window.unload             文档卸载时    
scroll                            页面滚动时    

2-1. onload
window.onload 事件在文档解析后及图片、外部样式文件等资源加载完后执行

2-2. DOMContentLoaded
DOMContentLoaded 事件在文档标签解析后执行，不需要等外部图片、样式文件、Js 文件等资源加载

2-3. beforeunload
当浏览器窗口关闭或者刷新时，会触发 beforeunload 事件，可以取消关闭或刷新页面。

...返回值为非空字符串时，有些浏览器会做为弹出的提示信息内容

...部分浏览器使用 addEventListener 无法绑定事件

window.onbeforeunload = function(e){ return'真的要离开吗?}

2-4. unload
window.unload 事件在文档资源被卸载时执行，在 beforeunload 后执行

...不能执行 alertconfirm 等交互指令

...发生错误也不会阻止页面关闭或刷新

window.addEventListener('unload', function (e){
        localStorage.setItem('name','houdunren')

})

3.禁止复制

houdunren.com

4.relatedTarget
relatedTarget 是控制鼠标移动事件的来源和目标对象的

houdunren.com

hdcms.com

5.mouseenter 与 mouseleave
事件从子元素移动到父元素时不触发父元素事件(不产生冒泡行为)
ps: mouseover mouseout 鼠标移入、鼠标移出(这一组事件会产生冒泡行为)

七、表单事件

事件类型               说明    
focus                     获取焦点事件    
blur                       失去焦点事件    
element.focus()    让元素强制获取焦点
element.blur (()    让元素失去焦点    
change                 文本框在内容发生改变并失去焦点时触发，select/checkbox/radio 选项改变时触发事件    
input                    Input、textarea 或 select 元素的 value 被修改时，会触发 input事件。而change是鼠标离开后或选择一个不同的 option时触发。    
submit                提交表单