事件对象

事件冒泡

<div id="box1">

        <div id="box2"></div>

</div>

var div1 = document.getElementById("box1");

        var div2 = document.getElementById("box2");

        div1.onclick = function() {

            alert(1)

        }

        div2.onclick = function(event) {

　　　　 alert(2)

        }

阻止事件冒泡

当点击div2的时候，先弹出2，然后弹出阻止事件冒泡

div2.onclick = function(event) {

            // window.event ? window.event.cancelBubble = true : e.stopPropagation

          //或者

            var event = event || window.event;

            event.stopPropagation();

            event.cancelBubble = true;

 

            alert(2)

     }

 

这个时候点击div2，只出现2，不会出现1，这就是阻止事件冒泡

 

阻止浏览器默认行为

 

<a href="http://www.baidu.com">百度</a>

document.getElementsByTagName("a")[0].onclick = function(event){

　　　　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标签，都同样具有点击事件功能

事件捕获

和事件冒泡是相反的过程