小蜗牛xmg

事件绑定

题目

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

知识点

  • 通用事件绑定

          

          

          

  1. DOM树形结构
  2. 事件冒泡（按层级）
  3. 阻止冒泡
  4. 冒泡的应用（代理）
  • 代理

          

<!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>

　　

posted on 2017-07-06 17:30  小蜗牛xmg  阅读(119)  评论(0)    收藏  举报

导航