Poised-flw的前端博客

使用场景

主要目的在于不借助第三方库（如：jquery和zepto）实现自定义事件的触发或者普通事件模拟操作。

jq的触发方式

$('xxx').trigger('eventName.nickname', data);

W3C标准浏览器实现方法

IE9+和chrome、firefox都可以直接用Event构造函数创建一个事件处理对象。

最基本的用法

var event = new Event('eventName'); // 创建一个名为'eventName'的事件对象

高级用法

上面方法创建的事件对象基本只能保证事件能正常触发，并能不能保证事件冒泡特性的延续性（即压根就不会冒泡），所以：可以在新建事件对象的时候传递一些默认值

var event = new Event('eventName', {
        bubbles: true, // true代表事件可以被冒泡
        cancelable: true // true代表事件可以被stopPropagation方法阻止冒泡
    });

综合用法

注意事项

并不能在事件处理函数中通过return false来阻止冒泡，需要自己实现
W3C浏览器结合dispatchEvent方法即可实现自定义事件的触发 & 模拟需求
CustomEvent构造函数效果和使用Event一样。
Event构造函数相当于基类，不在基础别的属性或方法。当然除了Object

低版本的ie浏览器兼容

IE较特殊的一个非标准方法createEventObject，该方法存在于document下。类似于标准浏览器中的document.createEvent。

综合用法

<div id="test">click me!</div>
<script>
var oTest = document.getElementById('test');

oTest.attachEvent('onclick', function () {
    alert('click');
});

// trigger click
var eventObj = document.createEventObject();
event.cancelBubble = true;
event.data = 'trigger from simulate';

oTest.fireEvent('onclick', eventObj);
</script>

事件触发

使用场景

W3C标准浏览器实现方法

低版本的ie浏览器兼容

参考资料