本文内容学习于：后盾人 (houdunren.com)
一、事件监听绑定方式 addEventListener 操作事件
使用 addEventListener 添加事件处理程序有以下几个特点:
"transtionend /DOMContentLoaded 等事件类型只能使用 addEventListener 处理.同一事件类型设置多个事件处理程序，按设置的顺序先后执行.也可以对未来添加的元素绑定事件
参数说明:
1.参数一事件类型
2.参数二事件处理程序
3.参数三为定制的选项，可传递 object 或 boolean 类型。后面会详细介绍使用区别
二、使用 removeEventListener 删除绑定的事件处理程序
<div id="app">houdunren.com</div>
<button id="hd">删除事件</button>
<script>
const app=document.querySelector('#app’) const hd = document.querySelector('#hd') function show() {
console.log('APP我执行了')app.addEventListener('click' show)
hd.addEventListener('click', function (() {
app.removeEventListener ('click', show)})
</script>
三、事件选项
addEventListener 的第三个参数为定制的选项，可传递 object 或 boolean 类型
下面是传递对象时的说明:
选项 可选参数
once true/false 只执行一次事件
capture true/false 事件是在捕获/冒泃哪个阶段执行，true:捕获阶段 false:冒泡阶段
passive true/false声明事件里不会调用 preventDefault))，可以减少系统默认行为的等待
如:使用 once:true 来指定事件只执行一次
<button id="app">houdunren.com</button>
<script>
const app=document.querySelector('#app’) app.addEventListener(
'click',
function () {
alert('houdunren@向军大叔')}，
{ once: true }</script>
四、冒泡捕获
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查找子元素，并对他做出处理。
这在为多个元素添加相同事件时很方便
会使添加事件变得非常容易
<ul id="ul">
<li id="1">l</1i><li id="2">2</1i><li id="3">3</1i></ul>
<script>
var ul = document.querySelector ('ul');
ul.addEventListener('click', function() {
var target = event.target; switch(target.id) {
case il':
console.log('target.id 1====>' + target.id); break; case '2':
console.log('target.id 2=-_=>’ + target.id); break; case '3':
console.log('target.id 3====>’ + target.id); break;
})
</script>
使用"事件委托”时，并不是说把原生事件委托的元素越靠近顶层越好。事件冒询的过程中也需要耗时，越靠近顶层，事件的“事件传播链”越长，也就越耗时。
5.未来元素:使用事件代理(事件委托)来对未来元素进行事件绑定
五、默认行为
·使用 onclick 绑定的事件处理程序，return false 可以阻止默认行为
·推荐使用event.preventDefault()阻止默认行为
六、窗口文档
1.事件类型
事件名 说明
window.onload 文档解析及外部资源加载后
DOMContentLoaded 文档解析后执行，不需要等待图片/样式文件等外部资源加载，该事件只能通过 addEventListener设置
window.beforeunload 文档刷新或关闭时
window.unload 文档卸载时
scroll 页面滚动时
2-1. onload
window.onload 事件在文档解析后及图片、外部样式文件等资源加载完后执行
<script>
window.onload = function () {
alert ('houdunren.com')}
</script>
2-2. DOMContentLoaded
DOMContentLoaded 事件在文档标签解析后执行，不需要等外部图片、样式文件、Js 文件等资源加载
<script>
window.addEventListener('DOMContentLoaded',(event)=> {
console.log('houdunren.com’)})
</script>
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.禁止复制
<body>
houdunren.com<script>
document.addEventListener('copy',() => {
event.preventDefault (() alert('禁止复制内容')})
</script></body>
4.relatedTarget
relatedTarget 是控制鼠标移动事件的来源和目标对象的
<div id="app">houdunren.com</div>
<div id="cms">hdcms.com</div>
<script>
const app = document.querySelector(`#app`) const cms = document.querySelector(`#cms`) app.addEventListener('mouseout',(() => {
console.log(event.target)
console.log(event.relatedTarget)})
</script>
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 提交表单
65
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
