事件模型(事件冒泡/事件委托)的整理

时间 2020-01-16

原文原文链接

事件冒泡/捕获

事件冒泡	事件捕获
IE和标准浏览器	标准浏览器
传播顺序：先捕获，后冒泡
早期IE只支持事件冒泡，不支持事件捕获

绑定事件

.addEventListener('click',function(){}，false)	.attachEvent('onclick',function(){})
标准浏览器	IE
三个参数: 1.事件类型，没有on 2.事件处理函数 3.布尔型的数值，默认false（事件冒泡），true（事件捕获）	有两个参数： 1.事件类型，有on 2.事件处理函数
阻止事件冒泡/捕获 : e.stopPropagation();	阻止事件冒泡 : window.event,cancelBubble=true
	问题： 1.顺序相反 2.this指向window

事件冒泡优势

1.有不少子元素，而且绑定同一种事件，能够委托给父元素代理（事件代理/事件委托）浏览器

<body>
<ul id="ul1">
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>

<script>
    var oUl = document.getElementById('ul1');
    oUl.onclick = function(e){
        //获取事件源
        var target=e?target = e.target:window.event.srcElement;
        console.log(target.innerHTML);
    };

</script>
</body>

2.对于后生成事件的绑定，能够用事件委托app

<body>
    <button id="btn">增长</button>
    <ul id="ul1">
        <li>001</li>
        <li>002</li>
        <li>003</li>
        <li>004</li>
        <li>005</li>
    </ul>

    <script>
        var oUl = document.getElementById('ul1');
        var aLi = oUl.getElementsByTagName('li');
        var oBtn = document.getElementById('btn');
        oUl.onclick = function (e) {
            console.log(e.currentTarget);//this
            console.log(e.target);//事件源
            };

        oBtn.onclick = function () {
            var oLi = document.createElement('li');
            oLi.innerHTML = Math.random();
            oUl.appendChild(oLi);
        };

    </script>
</body>

e.currentTarget=this  
e.target获取事件源  
能够经过e.currentTarget和e.target的比较得知是否是由事件冒泡触发的

总结：事件模型/事件冒泡/事件委托：利用事件冒泡，把子元素委托给父元素绑定dom