面試準備之JavaScript事件模型

時間 2019-11-09

原文原文鏈接

1.事件模型各階段

DOM Level 2 Events(事件模型)：捕獲階段-目標階段-冒泡階段
事件監聽：javascript

/* *event: 字符串，指定事件名 *function: 指定要事件觸發時執行的函數 *useCapture: 布爾值，指定事件是否在捕獲或冒泡階段執行 */
element.addEventListener(event, function, useCapture) 複製代碼

移除事件監聽：html

element.removeEventListener(event, function, useCapture) 複製代碼

Internet Explorer 8 及更早IE版本: 目標階段-冒泡階段
事件監聽：java

element.attatchEvent(event, function) 複製代碼

移除事件監聽：segmentfault

element.detachEvent(event, function) 複製代碼

2.事件對象

DOM事件模型中的事件對象經常使用屬性:
1. type用於獲取事件類型
2. target獲取事件目標
3. stopPropagation()阻止事件冒泡
4. preventDefault()阻止事件默認行爲
IE事件模型中的事件對象經常使用屬性:
1. type用於獲取事件類型
2. srcElement獲取事件目標
3. cancelBubble阻止事件冒泡
4. returnValue阻止事件默認行爲

3.事件委託/代理

優點：數組

節省內存佔用，減小事件註冊
新增子對象時無需再次對其綁定事件，適合動態添加元素

示例：app

<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觸發函數dom

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);
複製代碼