js event事件

最新推荐文章于 2024-04-28 12:24:08 发布

xinxin_zhu

最新推荐文章于 2024-04-28 12:24:08 发布

阅读量151

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/xinxin_zhu/article/details/105069919

版权

javascript 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

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

xinxin_zhu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js event事件

<html><head> <title>event事件</title> <meta charset="utf-8"> <style> </style></head><body> <h2>事件监听事件冒泡 ...
复制链接

扫一扫