事件绑定

时间 2019-12-09

标签事件绑定繁體版

原文原文链接

题目html

编写一个通用的事件监听函数
描述事件冒泡流程
对于一个无限下拉加载图片的页面，如何给每一个图片绑定事件

知识点node

通用事件绑定

事件冒泡
stopPropagation() 方法

DOM树形结构
事件冒泡（按层级）
阻止冒泡
冒泡的应用（代理）

代理

<!DOCTYPE HTML>
<html>
<head></head>
    <body>
        <div id='div1'>
            <p id='p1'>激活</p>
            <p id='p2'>取消</p>
            <p id='p3'>取消</p>
            <p id='p4'>取消</p>
        </div>
        <div id='div2'>
            <p id='p5'>取消</p>
            <p id='p6'>取消</p>
        </div>
        <div id="div3">
            <a href="#">a1</a>
            <a href="#">a2</a>
            <a href="#">a3</a>
            <a href="#">a4</a>
            <a href="#">a5</a>
        </div>
    </body>
<script>
    function bindEvent(elem,type,fn){
        elem.addEventListener(type,fn)
    }
    //var p1=document.getElementById('p1')
    var body=document.body
    // bindEvent(p1,'click',function(e){
    //     e.stopPropagation()
    //     alert('激活')
    // })
    bindEvent(body,'click',function(e){
        alert(e.target.innerHTML)
        //alert('取消')
    })
    var div3=document.getElementById('div3')
    bindEvent(div3,'click',function(e){
        console.log(e)
        e.stopPropagation()
        e.preventDefault()
        var target= e.target
        if(target.nodeName==='A'){
            alert(target.innerHTML)
        }
    })
</script>
</html>

事件绑定

stopPropagation() 方法