js事件总结

•  事件冒泡：

什么是事件冒泡，就是最深dom节点触发事件，然后逐级向最外层触发事件。打个比方一棵dom tree：li<ul<div每级都有事件绑定，然后我们触发li的事件，这时ul上的事件也会触发，接着div上的事件也会在ul事件触发之后执行。

demo：

    <div>
        <ul id="ul">
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
        <a href="http://www.baidu.com">我是连接</a>
    </div>

$(function(){
    $("li").click(function(event){
        alert('我是li');
    });
    $("div").click(function(event){
        alert("我是div");
    });
    $("a").click(function(event){
        alert("我是a");
    });
});

 当点击li时，首先会alert出“我是li”，然后会alert出“我是div”；那么如何阻止div上的事件触发呢，可以使用event.stopPropagation()方法阻止事件冒泡~

$(function(){
    $("li").click(function(event){
        alert('我是li');
        event.stopPropagation(); //阻止事件冒泡
    });
    $("div").click(function(event){
        alert("我是div");
    });
    $("a").click(function(event){
        alert("我是a");
    });
});

 当点击a时，会触发一个事件alert出“我是a”，随后跳转页面，那么如果我们只想触发事件不跳转页面呢，可以使用event.preventDefault()方法阻止默认事件~

这里有个最简单方式可以同时阻止冒泡又可以阻止默认事件，我们可以用return false。

总结：比较简单，总结了一下。(1)阻止事件冒泡：event.stopPropagation(2)阻止默认事件：event.preventDefault(3)return false均可阻止。

•  事件委托：

js事件委托是由事件冒泡产生的，指定一个事件处理，就可以管理某一类的事件。

比如上面的如果每个li我们都要绑定一个触发事件呢，我们需要用一个循环来绑定事件

$(function(){
    var 
        el_lis = document.getElementsByTagName('li');
    for(var i in el_lis){
        if(el_lis.hasOwnProperty(i)){
            el_lis[i].addEventListener('click',function(){
                alert('我是li');
            })
        }
    }
});

 

我们知道多次与dom打交道会让一个页面的性能降低，如果出现很多li时，我们也要利用一个循环来绑定事件吗，为何不利用事件冒泡在外层去绑定一个事件呢~这就是事件委托。

我们将事件绑定在ul上：

$(function(){
    var 
        el_ul = document.getElementsByTagName('ul');
    el_ul[0].addEventListener('click',function(event){
        alert('我是li');
    })
});

 

 那么如果我们让每一个li都有各自不同的触发事件呢，这时引入一个概念就是目标事件。

$(function(){
    var 
        el_ul = document.getElementsByTagName('ul');
    el_ul[0].addEventListener('click',function(event){
        switch(event.target.textContent){
            case "a":
                alert("我是a");
                break;
            case "b":
                alert("我是b");
                break;
            case "c":
                alert("我是c");
                break;
        }
    })
});

 

目标事件event.target指定了目标dom，这样根据dom的不同可以执行不同的函数。

总结：以上就是事件委托，事件委托可以在一定程度上优化页面的性能，避免了多次与dom打交道，减少dom操作，这就是委托的根本目的。