面试准备之JavaScript事件模型

1.事件模型各阶段

DOM Level 2 Events(事件模型)：捕获阶段-目标阶段-冒泡阶段
事件监听：

/*
 *event: 字符串，指定事件名
 *function: 指定要事件触发时执行的函数
 *useCapture: 布尔值，指定事件是否在捕获或冒泡阶段执行
 */
element.addEventListener(event, function, useCapture)
复制代码

移除事件监听：

element.removeEventListener(event, function, useCapture)
复制代码

Internet Explorer 8 及更早IE版本: 目标阶段-冒泡阶段
事件监听：

element.attatchEvent(event, function)
复制代码

移除事件监听：

element.detachEvent(event, function)
复制代码

2.事件对象

• DOM事件模型中的事件对象常用属性:
  1. type用于获取事件类型
  2. target获取事件目标
  3. stopPropagation()阻止事件冒泡
  4. preventDefault()阻止事件默认行为
• IE事件模型中的事件对象常用属性:
  1. type用于获取事件类型
  2. srcElement获取事件目标
  3. cancelBubble阻止事件冒泡
  4. returnValue阻止事件默认行为

3.事件委托/代理

优势：

• 节省内存占用，减少事件注册
• 新增子对象时无需再次对其绑定事件，适合动态添加元素

示例：

<ul id="parent">
  <li class="child">one</li>
  <li class="child">two</li>
  <li class="child">three</li>
</ul>

<script type="text/javascript">
  //父元素
  var dom= document.getElementById('parent');

  //父元素绑定事件，代理子元素的点击事件
  dom.onclick= function(event) {
    var event= event || window.event;
    var curTarget= event.target || event.srcElement;

    if (curTarget.tagName.toLowerCase() == 'li') {
      //事件处理
    }
  }
</script>
复制代码

4.实现事件模型

编写bind绑定，trigger触发函数

function Emitter() {
  this._listener= []; //_listener[自定义的事件名]= [所用执行的匿名函数1，所用执行的匿名函数2,...]
};

Emitter.prototype.bind= function(eventName, handle) {
  var listener= this._listener[eventName] || []; //是否存在eventName事件，否则新建数组
  listener.push(handle);
  this._listener[eventName]= listener; 
};

Emitter.prototype.trigger= function(eventName) {
  var args= Array.prototype.slice.apply(arguments).slice(1); //取得除eventName之外的其他参数
  var listener= this._listener[eventName];

  if (!Array.isArray(listener)) {
    return false;
  };

  //遍历事件
  listener.forEach(function(handleFun) {
    try{
      handleFun.apply(this, args);
    }catch (e){
      console.error(e);
    }
  });
};

// 实例
var emitter= new Emitter();

// 绑定函数
emitter.bind('output', function(arguments_1, arguments_2) {
  console.log(arguments_1, arguments_2);
});

//触发函数
emitter.trigger('output', 'a', 'b');
复制代码

5.事件广播

var event= new Event('build'); 

// listener for the event
element.addEvenetListener('build', function(e) {...}, false);

//Dispatch the event 
element.dispatchEvent(event);
复制代码

参考链接

• js实现事件模型bind与trigger
• JS事件模型
• Creating and triggering events