事件对象

　　　　var event = event || window.event;
　　　　// event.preventDefault();//IE9以下不兼容
　　　　return false;
　　　　// event.returnValue = false;//兼容老版本的IE
　　　　}

事件委托（事件代理）

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>

点击每个li出现对应的数字

1.循环每个li

v

var lis = document.getElementsByTagName("li");

        for (var i = 0; i < lis.length; i++) {

            lis[i].onclick = function() {

                console.log(this.innerHTML)

            }

        }

这个可以达到目的，但这样相当于添加了多个点击事件，事件处理程序的数量将直接关系到页面的整体性能，因为添加事件需要不断的与DOM节点进行交互，导致浏览器引擎对页面不断的渲染与重绘。

var ul = document.getElementsByTagName("ul")[0];
　　ul.onclick = function(event){
　　var event = event || window.event;
　　var target = event.target || event.srcElement;
　　console.log(target.innerHTML)
}

只需要添加一次事件，大大减少了与DOM的交互次数，提升了性能。后面无论我们在ul下面新增加多少个li标签，都同样具有点击事件功能

事件捕获

和事件冒泡是相反的过程