事件綁定

時間 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() 方法