事件代理和委托学习

参考资料：

          又被事件冒泡坑了一把，这次要彻底弄懂浏览器的事件流

          JavaScript事件代理和委托

事件委托：

　　实际案例：我们平时在开发时，有这种情况,一个ul里有有好多个li子元素,这个li的数量可以是固定的，也可以是动态添加删除的，而且每个li都必要有一个点击事件，

<ul class= 'list'>
    <li class='item1'>item1</li>
    <li class='item2'>item2</li>
    <li class='item3'>item3</li>
    <li class='item4'>item4</li>
</ul>

 

这时我们会有这些解决办法(事件有限，先以jquery为例)

　　1.给每一个li添加一次点击事件，例如for循环里执行

$('li').on('click',function(){
  //do something...
})

　　2.就是写一个函数，然后在li标签里添加onclick事件（这种方式不推荐）

//js里有一个函数；
function clickLI (){
   //do something...  
}

<!-- html代码如下；-->
...
  <li class='item1' onclick=clickLI() >item1</li>
...

 

    3.1 事件委托，即我把click事件绑定到父级 ul 上

$('.list').click(function(event) {
    var target = event.target;
    if (target&&target.nodeName.toUpperCase()== 'LI') {
        // dosomething
    }
})

 

　　3.2 事件委托时，li里又有子元素的情况

...
<li class="item">
    <div class="name">xxx</div>
    <p class="age">xxxxxxs</p>
</li>
...

 

当我们试图使用事件委托希望给所有的li添加元素时，在利用选择器判断的过程中发现，目标event.target元素居然是li的子元素，这个时候就没办法准确的将事件绑定到li上了，这个时候我们就要用到阻止事件捕获的传递了。

js里理论上是有这个方法的，但是我没找到，但是我看到了一个css3里的属性pointer-events: none;（关于pointer-events在文章末有介绍）

  

li>  * {
  pointer-events: none;
}

 

      这块jquery做的比较好了已经

$('ul').on('click', 'li.item', function(event) {
        console.log(event.target.innerHTML);
})

 

这里第二个参数'li.item'就是被委托的对象了。

事件代理：

。。。。。。。。。。

它和委托有什么区别呢？

。。。。。。。。。。

知识点：

　　.toUpercase() 将字符串全部转换为大写字母

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

      CSS：pointer-events

　　　　pointer-events直译为指针事件，当把值设置为none后，他有如下相关特性。

1. 1. 　　阻止用户的点击动作产生任何效果
   2. 　　阻止缺省鼠标指针的显示
   3. 　　阻止CSS里的hover和active状态的变化触发事件
   4. 　　阻止JavaScript点击动作触发的事件