event.target和this区别

target定义：

　　　　target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

语法：　　　　

　　　　event.target

　　　　event.target.nodeName  　　//获取事件触发元素标签name（li,p...）

　　　　event.target.id　　　　　　　//获取事件触发元素id

　　　　event.target.className　　//获取事件触发元素classname

　　　　event.target.innerHTML　　//获取事件触发元素的内容（li）

　　　　等。。。

jquery:this 与 e.target区别

　　　　this会冒泡。e.target不冒泡就是指向事件触发的dom。

　　　　　　js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

事件委托：原生js

　　　　事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）。

　　　　使用事件委托时，如果目标元素上的其他事件处理程序使用.stopPropagation()阻止了事件传播，那么事件委托就会失效。

事件委托简单例子：

　　　　给ul添加监听click事件，利用冒泡机制具体捕获是ul下的哪一个li触发的click事件

HTML

<ul id="ul">
     <li id="li-1">1</li>
     <li id="li-2">2</li>
     <li id="li-3">3</li>
     <li id="li-4">4</li>
     <li id="li-5">5</li>
</ul>

js

// 给ul添加监听器
document.getElementById("ul").addEventListener("click",function(e) {
    // e.target是被点击的元素!
    // 筛选触发事件的子元素如果是li执行的事件
     if(e.target && e.target.nodeName == "LI") {
         // 获取到具体事件触发的li，输出其id7
          console.log("List item ",e.target.id.replace("post-")," was clicked!");
     }
 });  

    $(function(){
        $("li").on("click",function(e){
            console.log(e.target);
            console.log(this);
            $("#temp").html("clicked: " + e.target.nodeName);
            $(e.target).css("color","#FF3300");
        })
    });