每日一条js之原生事件（监听、冒泡、事件委托）

收集了一些比较偏僻的js原生事件和注意点

一、click和onclick的区别

当我们在使用点击事件的时候会用到这两个点击事件，但是有时候能成功有时候却失败。

原因是因为click不能作用在动态加载的元素上，onclick可以。

图省事往后原生js全用onclick了哈哈。

动态加载的元素比如说原生ajax请求到的数据后的回调函数中要将动态数据渲染到页面上时插入html代码。

二、prenentDefault（）阻止冒泡事件

有一些业务场景可能会发生这种情况：父元素有一个点击事件，子元素也有一个点击事件并且子元素的位置在父元素正上方。这时候如果我们点击了子元素，点击事件会沿着子元素往上查找所有父、祖元素的点击事件并触发，但是我们的目标只是子元素的点击事件。这时候我们就要用到阻止冒泡事件。

下面是阻止冒泡事件的兼容写法  

if (e) {              
    e.stopPropagation();              
    e.preventDefault();            
} else {              
    window.event.returnValue = false;              
    window.event.cancelBubble = true;            
  }          
}

三、addEventListener（）添加监听事件

方法：nodeName.addEventListener（'click',fn(),false）

上面代码的意思是监听到nodeName一个节点对象的DOM点击事件，后执行fn（）函数，false不进行冒泡捕捉。

监听事件通常和事件委托还有冒泡事件挂钩，其应用场景如下：

比如你从后端得到了一个需要循环展示的数据并且每条循环展示的数据都有一个对应的点击事件。这样的情况下如果ajax的回调中for循环给每一条数据都加上一条单独的点击事件这会对性能产生很大的影响（数据越多影响越大，少的话可能感觉不出来）。因此这里就需要用到事件委托、冒泡事件、监听事件。

思路如下：

1.每条信息的点击事件冒泡到父元素。

2.父元素监听到子元素的冒泡事件获取到点击事件得到的参数。

3.子元素将点击事件委托给父元素执行。

代码如下：

var oUl = document.getElementById("ul");
oUl.onclick = function(e){
  var e = e || window.event;
  var target = e.target || e.srcElement;
  if(target.nodeName.toLowerCase() == 'li'){
    alert('点到了li元素上才执行');
  }
}

这样就不用给每条数据加点击事件，直接在父元素上执行子元素的点击事件节省了大量的性能损耗。因为我急于求成js基础不好就去看了vue框架这个过程有点类似前端框架中的组件传值。个人觉得理解这个思路对往后一些前端主流框架的学习有很大的帮助。