1.EventTarget接口

1.1 概述

DOM的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest AudioNode AudioContext ）也部署了这个接口。
该接口主要提供三个实例方法

addEventListener: 绑定事件的监听函数
removeEventListener: 移除事件的监听函数
dispatchEvent: 触发事件

1.2 EventTarget.addEventListener()

target.addEventListener(type,listener[,useCapture])

listener[,useCapture] 表示listener,useCapyure或者listener。[]符号表示非必须
该方法接收三个参数

type: 事件名称，大小写敏感
listener: 监听函数。事件发生时，会调用该监听函数
useCapture
- 1.capture:布尔值，表示监听函数是否在捕获阶段（capture）触发，默认为false。
- 2.once:布尔值，表示监听函数是否只触发一次，然后就自动移除默认{once:false}。
- 3.passive:布尔值，表示监听函数不会调用事件的(preventDefault)方法，如果今天函数调用了，浏览器会输出警告⚠️，但不是错误

代码
},{once:true})

1.3 EventTarget.removeEventListener()

手动移除addEventListener方法添加的事件监听函数。该方法没有返回值，且附加的三个参数必须和要被移除的addEventListener参数一模一样.即removeEventListener方法移除的监听函数，必须是addEventListener方法添加的那个监听函数，而且必须在同一元素节点，否砸无效


1.4 EventTarget.dispatchEvent()
代替人工的手动触发，使用脚本进行触发事件。该方法返回一个布尔值，只要有一个监听函数调用了Event.preventDefault()(阻止默认事件)，则返回false，否则为true

事件模型


监听函数


HTML的on-属性 
元素节点的事件属性 el.onclick=function(){}



this的指向
函数内部this指向当前元素节点


事件的传播


第一阶段：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）

第二阶段：从目标节点上触发，成为“目标阶段”（target phase）

第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）




        点击

bubbles

我们可以创建一个带有名称的冒泡事件并将其“hello”捕获document.
我们只需要设置bubbles为true

event.preventDefault()

在允许阻止默认事件cancelable: true条件下，如果设置event.preventDefault,dispatchEvent(event)会返回false,否则返回true

let event = CustomEvent('hide',{ cancelabel : true // 允许阻止默认事件，如果不设置event.preventDefault将无效 }) console.log(elem.dispatchEvent(event)) // false</code></pre>

其他

1.事件对象中的事件是同步的
2.new Event(),new MouseEvent()被叫做@L_404_0@

{
                action();
                isRunning = false;
            })
        }
    }

函数防抖 - debounce

防抖的原理就是：你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行，真是任性呐! #摘自参考5
以下代码是卡动画防止在一帧时间中（大概16ms）渲染多次。


以下代码是表单验证时onkeyup非常适合使用防抖，等输入完后才进行验证

每天一点，学习JavaScript【事件】

1.EventTarget接口

1.1 概述

1.2 EventTarget.addEventListener()

1.3 EventTarget.removeEventListener()

1.4 EventTarget.dispatchEvent()

事件模型

bubbles

event.preventDefault()

其他

函数防抖 - debounce

猜你在找的JavaScript相关文章

每天一点，学习JavaScript【事件】

1.EventTarget接口

1.1 概 述

1.2 EventTarget.addEventListener()

1.3 EventTarget.removeEventListener()

1.4 EventTarget.dispatchEvent()

事件模型

bubbles

event.preventDefault()

其他

函数防抖 - debounce

猜你在找的JavaScript相关文章

1.1 概述