js自定义事件CustomEvent和dispatch
用CustomEvent和dispatch来模拟一个vue的emit方法
<script type="text/javascript">
window.vue = {
eventNameObx: {}
}
window.vue.on = function(eventName, callback) {
window.addEventListener(eventName, (evt) => {
callback(evt)
})
}
window.vue.emit = function(eventName, options) {
if (!vue.eventNameObx[eventName]) {
vue.eventNameObx[eventName] = new CustomEvent(eventName, {
detail: options
})
}
// 随后在对应的元素上触发该事件
if(window.dispatchEvent) {
window.dispatchEvent(vue.eventNameObx[eventName]);
} else {
window.fireEvent(vue.eventNameObx[eventName]);
}
}
</script>
<script type="text/javascript">
vue.on('abc', (evt) => {
console.log('abc ===== ', evt.detail)
})
setTimeout(() => {
window.vue.emit('abc', {emitoption: 33333})
}, 5000)
</script>
