JS自定义事件

JS自定义事件

element.addEventListener("click", function() {
    // 我是临时工
});

这是个简单的为DOM元素分配事件处理函数的方法(IE 不支持)，有别于：

element.onclick = function() {
   // 我是临时工 
};

addEventListener()可以为元素分配多个处理函数（而非覆盖），因此，我们可以继续：

element.addEventListener("click", function() {
    // 我是二代临时工
});

然后，当element被click(点击)的时候，就会连续触发“临时工”和“二代临时工”函数。

抽象→具象→本质→数据层
你有没有觉得这种行为表现有点类似于往长枪里面塞子弹(add)，（扣动扳手 – click）发射的时候按照塞进去的顺序依次出来。这种行为表现为我们实现自定义事件提供了思路：我们可以定义一个数组，当添加事件的时候，我们push进去这个事件处理函数；当我们执行的时候，从头遍历这个数组中的每个事件处理函数，并执行。

当多个事件以及对应数据处理函数添加后，我们最终会得到一个类似下面数据结构的对象：

_listener = {
    "click": [func1, func2],
    "custom": [func3],
    "defined": [func4, func5, func6]