第九课-1 事件的状态Event 对象 ，事件，元素，节点的关系，事件委托currentTarget与target的区别

<ul>
    <li>1itme1</li>
    <li>2itme2</li>
    <li>3itme3</li>
    <li>4itme4</li>
    <li>5itme5</li>
</ul>

<script>
    var lis=document.getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
        lis[i].addEventListener("click", function (ev) {  //ev代表的当前事件
            alert(ev.target.innerText);
        })
    }

</script>

event详解

https://www.w3school.com.cn/jsref/dom_obj_event.asp

target 返回触发此事件的元素（事件的目标节点）。   背下这句话，事件、元素、目标节点

事件就是事件，事件可以用来操作DOM，但是事件本事不是DOM，不是元素，他就是一个事件

如下的写法是错误的

    a.addEventListener("click", f);
    function f(ev) {
        console.log(ev.parentElement);
        console.log(ev.parentNode);
    }

这样写是错误的，ev是事件，事件没有父元素和节点

 

上一个代码

<ul id="ok">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <p>这是P</p>
</ul>
//这种就是事件代理，也就是说li的节点元素并没有click事件，点击后它回去找他的父级，找到父级事件后把父级的事件加载到自身了
<script>
    var a=document.getElementById("ok");
    a.addEventListener("click", function (ev) {
        console.log(ev.target);
        console.log(ev.currentTarget);
    })
</script>

 

再说一下target和currentTarget

currentTarget是在事件流的捕获、目标及冒泡阶段

target是在事件流的目标阶段，就是有很清晰的时间触发节点

只有当事件流处于目标阶段的时候，两个指向才是一样的。

当事件流处于捕获或者冒泡，也就是所谓的事件代理或者委托的时候，currentTarget指向的是当前活动事件的父级

currentTarget在事件流的捕获、目标及冒泡阶段。

 

事件委托和代理：摘抄于https://www.cnblogs.com/lauzhishuai/p/11263210.html

事件委托的原理：

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。