关于事件委托的理解

事件委托的理解：

事件委托：（也叫事件代理）就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
JS里的事件委托：就是当事件触发时，把要做的事委托给父元素来处理。

传统js下的事件委托

//html中的代码
<ul>
	<li class="item">item 1</li>
	<li class="item">item 2</li>
	<li class="item">item 3</li>
	<li class="item">item 4</li>
	<li class="item">item 5</li>
</ul>

2利用事件委托加事件：

//js中的代码
var oUl = document.getElementsByTagName('ul')[0];
oUl.onclick = function(ev) {
	var ev = ev || event;
	var _this = ev.target || ev.srcElement;
	if(_this.tagName.toLowerCase() == 'li'){
		_this.style.backgroundColor = 'yellow';
	}
}

vue中进行事件委托

通过把每一项(item)的click事件委托给父元素来实现

//html
<table @click="edit">
  <tr v-for="item in list">
    <td>{{item.name}}</td>
    ...
    <td>
      <button :data-id="item.id" title="eidt">编辑</button>
   </td>
  </tr>
</table>


//js
edit (event){
    if(event.target.title == "edit"){ //如果点击到了edit 
        let id = evenr.target.dataset.id;
        //拿着id参数执行着相关的操作
        this.$router.push({path:'/detail',query:{id:id}})
    }
}

事件委托的好处

1、提高性能

2、动态添加的元素也会有事件（能为之后新增的DOM元素添加事件）

哪些事件适用

click / mousedown / mouseup / keyup / keypress

哪些事件不适用

1、没有冒泡特性的事件

例如：focus / blur

2、事件触发频繁

例如：mousemove