事件,就是网页中某一个特别值得关注的瞬间。
事件经常由用户操作或通过其他浏览器功能来触发。
但是也可以使用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