事件绑定成功之后,事件的执行函数就如同待字闺中的小姑娘。除了由坐在电脑前的大叔们用键盘、鼠标等硬件行为触发外,需要在代码中直接调用又该如何实现?
首先需要将事件绑定至指定DOM节点上
// 在一个节点上绑定一个事件
let test = document.createElement('div');
test.id = 'test';
test.innerHTML = '测试事件';
document.body.appendChild(test);
test.addEventListener('mousedown', function(){
console.log('hello jTool');
}, false)
事件绑定成功之后,事件的执行函数就如同待字闺中的小姑娘。除了由坐在电脑前的大叔们用键盘、鼠标等硬件行为触发外,需要在代码中直接调用又该如何实现?在 jQuery 中的事件类中包含一个trigger方法, 我之前写的类库 jTool 中同样也实现了该方法, 下面就以 jTool 的视角来说明下 trigger 如何实现。
绑定事件时使用 DOM 对象的 .addEventListener() 方法, 而实现 trigger 则是使用 DOM 对像的 .dispatchEvent() 方法。
.dispatchEvent()
需要以参数形式传入被派发的事件对象, 该事件对象可以通过 javascript 的全局构造函数 Event。
// 触发事件
var myEvent = new Event('mousedown');
test.dispatchEvent(myEvent); // => true