js event事件

Myth丶恋晨 2021-08-27 20:33 477阅读 0赞

<html>
    
    <head>
        <title>event事件</title>
        <meta charset="utf-8">
        <style>
          
        </style>
    </head>
    
    <body>
            <h2>事件监听 事件冒泡 事件代理</h2>
            <p>事件代理 就是对于瀑布流样式的结构 不好监控里面的事件 就监听外面的事件</p>
      <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>    
                <button id="btn2">加载更多</button>
            </div>
       
    </body>
    
    </html>
    <script src="../js/jquery.min.js"></script>
    <script>
        //写一个公共的监听事假 addEventListen
        /*  function fnAddEnevt(elem,type,fn){  //不通用
             elem.addEventListener(type,fn)
         } */
    
         //通用的 兼容普通和代理 事件
         function fnAddEnevt(elem,type,seletor,fn){
             if(seletor==null){
                 fn=seletor;
                 seletor=null;
             }
             elem.addEventListener(type,event=>{
                 const target=event.target;
                 if(seletor){
                     if(target.math(seletor)){
                         fn.call(target,event)
                     }
    
                 }else{
                    fn.call(target,event)
                 }
             })
         }
    
    
         // 普通绑定
    const btn1 = document.getElementById('btn1')
    fnAddEnevt(btn1, 'click', function (event) {
        // console.log(event.target) // 获取触发的元素
        event.preventDefault() // 阻止默认行为
        alert(this.innerHTML)
    })
    
    // 代理绑定
    const div3 = document.getElementById('div3')
    fnAddEnevt(div3, 'click', 'a', function (event) {
        event.preventDefault()
        alert(this.innerHTML)
    })
    
    
    
         const p1=document.getElementById("p1")
         fnAddEnevt(p1,"click",function(e){
             console.log("p1 click")
           //  e.preventDefault();//阻止默认行为 比如a标签跳转
           e.stopPropagation()//阻止冒泡
             
         })
    
         //冒泡 从一个触发点 一直外父级扩撒
    
         const p2=document.getElementById("p2")
         fnAddEnevt(p2,"click",event=>{
             console.log(event.target) //目标对象
         
         })
    
         const body=document.body
         fnAddEnevt(body,"click",event=>{
             console.log(event.target) //目标对象
             console.log("body 取消")
         
         })
    
    
         //事件代理 div3中a 标签的点击事件不好监控的时候 就监控div3
         const div3=document.getElementById("div3")
         fnAddEnevt(div3,"click",function(e){
             e.preventDefault();//阻止默认行为
             console.log(e.target.nodeName)
             if(e.target.nodeName=='A'){//是a标签
              
              alert(e.target.innerHTML)
             }
    
         })
    
    
    
    </script>