如何用原生js触发浏览器绑定事件？

Question

就是如何触发addEventListener绑定的事件，是通过使用一个模拟事件对象吗？
如果是的话，怎么检测到用户使用了addEventListener并创建模拟事件？
其实就是想知道jquery中trigger的实现，可是源码hack太多太绕看不懂，希望可以在这里搞懂，谢谢大家。

Answer 1

@madthumb 你回答的是事件绑定而不是事件触发，题主想问的其实是类似 $.trigger() 的功能。

要回答这个问题（完整地）并不容易，所以我简单一点：

如果你只需要触发那些常见的事件，比如说鼠标点击，并且不考虑跨浏览器兼容的问题的话，只需要这样做：

document.getElementById('myLink').click()

当然这么做的兼容性并不好，比如说 FireFox 就不干。另外 onclick() 这样的方法只能用于在 HTML 中的内联写法。

如果事情稍微复杂一些，比如说你要触发一些自定义的事件，那么你必须要理解 DOM 里面的“事件对象模型”，本质上 $.trigger() 就是对这些概念的封装。不过问题是 DOM 的一致性和兼容性一直都不太好，所以关于事件的对象模型长期以来都处于一个比较混乱的状况下，如果不用 jQuery 的话，想找到一个既简单又足够健壮的解决方案并不容易。

很长时间以来，人们都是这样做的：

// 创建一个事件对象，就好像你绑定事件回调函数里获得的那个事件对象一样
var myEvent = document.createEvent('Event')

// 初始化这个事件对象，为它提高需要的“特性”
myEvent.initEvent('myEventName', true, true)

// 按照常见的方式绑定对该事件的监听，这里的 element 可以是任何一个元素，你懂的
element.addEventListener('myEventName', function(evt) {
  // 这里，evt 就是你创建的事件对象了，不过它会更丰富一些——这些是浏览器为你做的
})

// 然后这样触发它
element.dispatchEvent(myEvent)

你必须要去阅读 createEvent initEvent dispatchEvent 这些方法的文档来完整认识它们（文档可以去 MDN 找），上面介绍的只是基本用法。$.trigger() 所封装的也就是它们（及其相关的兼容性处理等等）。不过这些方法已经有点“过时”了，特别像 initEvent 这样的方法更是已经被（新的 DOM 标准）废弃了。

以下是更“现代”的做法，不过老样子：兼容性会是问题：

var myEvent = new Event('myEventName')

element.dispatchEvent(myEvent)

绑定回调是一样的我就不重复了。另外“现代”的做法里触发内建事件要用对应的接口，比如说：

var event = new MouseEvent('click', {
  'view': window,
  'bubbles': true,
  'cancelable': true
});

其实除了具体方法的文档外，更重要的是先理解整个事件对象模型体系，这是一个非常非常庞大的体系：https://developer.mozilla.org/en-US/docs/Web/Events

Answer 2

这个是我自己js库里面的，仅供参考。

function addEvent(element, evnt, funct){
    if (element.attachEvent) // IE < 9
        return element.attachEvent('on'+evnt, funct);
    else
        return element.addEventListener(evnt, funct, false);
}

// 用法
addEvent(
    document.getElementById('myElement'), //目标元素
    'click',                              //监听事件  
    function () { alert('hi!'); }         //回执函数
);