js/vue/jq——事件委托

事件委托好处：
1，性能好
2，新添加的元素会动态跟踪事件

js事件委托

window.onload = function(){
  var Ul = document.getElementById("ul");
  var Li = oUl.getElementsByTagName("li");

/*
event：事件源，在哪个事件中，操作的那个元素就是事件源
ie浏览器：window.event.srcElement
标准下:event.target
nodeName:找到元素的标签名
*/
  Ul.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLowerCase() == "li"){
    target.style.height = "100px";
    }
  }
  Ul.onmouseout = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLowerCase() == "li"){
    target.style.height = "200px";
    }
  }
}

关于更多event事件源，参见：https://blog.csdn.net/lucky541788/article/details/81809283
vue事件委托

	<div class="preview" ref="preview" @click="deleteCanvas($event)"></div>

	// methods
	deleteCanvas (e) {
		// 功能：点击删除其对应的子元素
        this.$refs.preview.removeChild(e.target)
      }

jq事件委托

<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
</ul>
<button>新增一个li</button>

$(function () {
            $('button').click(function () {
                $('ul').append("<li>我是第0个li</li>");
            });
            // $('ul>li').click(function () {
            //     alert($(this).text());
            // });
            $('ul').delegate('li', 'click', function () {
                alert($(this).text());
            })
        });

来源：CSDN

作者：肖ZE

链接：https://blog.csdn.net/lucky541788/article/details/82077935