事件,就是网页中某一个特别值得关注的瞬间。
事件经常由用户操作或通过其他浏览器功能来触发。
但是也可以使用Javascript在任意时刻触发特定的事件,这个时候的事件和浏览器创建的事件一样。 也就是说这些事件还是有冒泡等属性,而且浏览器也会响应该事件去执行相应的事件处理程序。
我们来跑一个最简单的例子,比如现在页面有一个按钮,长这样:
<
button
id=
"myBtn"
>click me!
</
button
>
我们增加一个点击事件处理程序:
// 事件处理
document.
getElementById(
'myBtn').
addEventListener(
'click', ()
=>{
console.
log(
'hi, you trigger the click event')
})
然后我们在页面加载完成之后去模拟一个点击事件。
//模拟一个点击事件
var
btn =
document.
getElementById(
'myBtn')
// good
// 以前是通过document.createEvent()来创建事件,不过后来被废弃了,现在使用Event()构造函数
var
event =
new
MouseEvent(
'click')
//MouseEvent继承自UIEvent
//触发事件
btn.
dispatchEvent(
event)
这样在页面加载完成之后【我们没有点击按钮】,但是在console里面看到了,打印信息,但是我们并没有手动触发这个事件,我们模拟事件已经完成了。
MouseEvent的信息可以参考MDN detail ,MouseEvent是继承自UIEvent,你还可以模拟其他类型的事件,除了鼠标事件,还有ClipboardEvent等等等,可以从Event 页面查看。
其中特殊的一个是CustomEvent,允许我们自定义任意功能的事件。
我们以往知道的事件就是点击事件,获取焦点事件,change事件等,我们可以定义特定类型的事件,比如叫做 'any'。首先事件是绑定到某一个dom target上面。
<
div
id=
"myDiv"
>
div with custom event
</
div
>
然后添加事件监听:
// 先监听
document.
getElementById(
'myDiv').
addEventListener(
'any', (
data)
=>{
console.
log(
'your custom event trigger the process method',
data)
})
触发这个自定义事件:
// 触发any 事件
const
data = {
name:
'jackkk', }
// 创建event对象的初始化数据
const
customeEvent =
new
CustomEvent(
'any', {
bubbles:
true,
detail:
data
})
document.
getElementById(
'myDiv').
dispatchEvent(
customeEvent)
而且我们可以利用事件的冒泡特性,获取到这个data数据,不用在上面的监听程序里面修改代码。相当于,事件触发动作在一处触发,但是我们可以利用冒泡特性,添加多个监听程序。有发布-订阅模式的影子,一个subject的数据变化->dispatchEvent(event),然后通知多个observer,这里的多个observers 可以是 myDiv的任意祖先元素。
所以我们可以写一个另外的监听程序,在这里共享或者说同步获取到数据变化:
document.
addEventListener(
'any', (
data)
=>{
console.
warn(
'get the data from event dispath',
data)
})
参考: MDN
《JS高程》13.5
75team