事件委托以及在 angular & vue & react 中的应用

背景

在 js 中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。导致这一问题的原因有很多方面，比如：

 

每个函数都是对象，每个对象都会占用内存，内存中的对象越多，性能就越大；
必须事先指定所有事件处理程序而导致的 DOM 访问次数，会延迟整个页面的交互时间；

 

那我们该怎样从事件处理程序方面，提升性能呢？

对这个问题的解决方法就是 “事件委托”。

 

事件委托

事件委托利用了事件冒泡，只指定一个 event handler，就可以管理某一类型的所有事件。比如 click 事件会一直冒泡到 document 层次，也就是我们可以为整个页面指定一个onclick handler， 而不必给每一个可单击的元素分别添加 event handler； 

<ul>
 <li id="goWhere"> Go Where</li>
 <li id="goWhen"> go When</li>
 <li id="goWhat"> go What </li>
</ul>

按照我们传统的做法，需要分别给三个 li 添加 event handler;

const item1 = document.getElementById('goWhere');
const item2 = document.geyElementById('goWhen');
const item3 = document.getElementById('goWhat');

EventUtil.addHandler(item1, 'click', function(event) {
	console.log(item1);
})
EventUtil.addHandler(item2, 'click', function(event) {
	console.log(item2);
})
EventUtil.addHandler(item3, 'click', function(event) {
	console.log(item3);
})

如果在一个复杂的 web 应用程序中，对多有可单击的元素都采用这种方式，那么结果就会有很多代码用与 event handler, 此时，我们使用 事件委托。只需在它的 DOM 树中尽量最高的层次上添加一个 event handler， 则可以把代码精简成：

    const list = document.getElementById('go');
    EventUtil.addHandler(list, 'click', function(event) {
    	event = EventUtil.getEvent(event);
    	const target = EventUtil.getTarget(event);
    	
    	switch(target.id) {
    		case 'goWhere':
    			console.log(target);
    			break;
    		case 'goWhen':
    			console.log(target);
    			break;
    		case 'goWhat':
    			console.log(target);
    			break;
    	}
    })

在这段代码里，我们只在 父级元素 ul 里面添加了一个 onclick 事件处理程序。由于所有的li 都是ul 的子元素，而且他们会冒泡，所以单击事件最终会被这个函数处理。在这里，只获取了一个 DOM 元素，只添加了一个事件处理程序，这个占用的内存就会更少。

适合采用事件委托技术的事件包括 click、mousedown、mouseup、keydown、keyup 和 keypress，而 从一个元素移到子节点时，都会触发 mouseout，这需要计算元素的位置，所以 mouseout 和 mouseover 并不很适合；

 

总结

下来就是说，在有大量交互事件的重复型元素上，我们可以将事件委托给他们的父级，代为处理，这样可以减少 dom 元素的访问以及事件处理程序的代码，可以减少内存，优化性能。

广州包装设计公司http://www.maiqicn.com 电脑刺绣绣花厂 ttp://www.szhdn.com

事件委托分别在 react、vue 和 angular 中的使用

react: react 进行dom 事件绑定时不是直接绑定事件的，而是通过所谓的合成事件 SyntheticEvent 进行托管的。将所有的事件绑定到 document 上，这样在真实点击的时候，冒泡到 document 上。react 通过document 去 dispatchEvent 统一处理事件;

vue：vue 自身没有做事件代理，如果需要，则直接代理到父节点。对于 mpvue 写小程序来说，还是很有必要的，毕竟安卓机小程序性能太差。

    <ul @click="meths">
      <li v-for="(item,key) in 10" :key="key" :>"key">{{item}}</li>
    </ul>

    // vue
    meths(e) {
      if (e.target.nodeName.toLowerCase() === 'li') {
        console.log(e.target.dataset.index)
      }
    }
 // mpvue
    meths(e) {
        console.log(e.target.dataset.index)
    }

angular：angular 中自身是没有实现事件代理的，如果需要，我们可以这样做：

<ul #ulEl id="parent-list">
  <li id="post-1">Item 1</li>
  <li id="post-2">Item 2</li>
  <li id="post-3">Item 3</li>
  <li id="post-4">Item 4</li>
  <li id="post-5">Item 5</li>
  <li id="post-6">Item 6</li>
</ul>

在 ts 文件中

import {ElementRef, Renderer, ViewChild, Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor (private renderer: Renderer){ }
  @ViewChild('ulEl') ulEl: ElementRef;

  ngOnInit() {
    this.tmpListener = this.renderer.listen(this.ulEl.nativeElement, 'click', this.logElement);
  }

  // 获取 event.target 的缩写
  logElement({target}) {
      if(target && target.nodeName == "LI") {
      console.log('Target id: ', target.id);
      // 添加业务逻辑
    }
  }

  ngOnDestroy() {
    this.tmpListener();
  }
}