js事件机制

事件监听

类似<button onclick="alert('你点击了这个按钮');">点击这个按钮</button>的方式，这种方式会使JS与HTML高度耦合，不利于开发和维护，不推荐使用。

DOM属性绑定

使用DOM元素的onXXX属性设置，简单易懂，兼容性好。确定是只能绑定一个处理函数。

事件监听函数

element.addEventListener(<event-name>, <callback>, <use-capture>);

移除事件监听

element.removeEventListener(<event-name>, <callback>, <use-capture>);

自定义事件 Event、CustomEvent 和 dispatchEvent。

1.直接自定义事件，使用 Event 构造函数：
var event = new Event('build'); // Listen for the event. elem.addEventListener('build', function (e) { ... }, false); // Dispatch the event. elem.dispatchEvent(event);
2.CustomEvent 可以创建一个更高度自定义事件，还可以附带一些数据，具体用法如下：
var myEvent = new CustomEvent(eventname, options);
其中options可以是:
{ detail: { ... }, bubbles: true, cancelable: false }
3.dispatchEvent这个用于触发自定义的事件。

事件代理

currentTarget

事件的Event对象比较常用的几个属性和方法：

• type(string): 事件的名称，比如 “click”。
• type(string): 事件的名称，比如 “click”。
• preventDefault (function): 这个方法可以禁止一切默认的行为
• stopPropagation (function):阻止事件冒泡

! IE浏览器下的情况

event = event || window.event使用 window.event 来获取事件对象
node = event.srcElement || event.target;处理触发事件的节点