事件操作方式

最新推荐文章于 2024-09-12 11:40:49 发布

黄酱！

最新推荐文章于 2024-09-12 11:40:49 发布

阅读量462

点赞数

分类专栏： JS 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/tianranran/article/details/121816019

版权

JS 专栏收录该内容

91 篇文章 2 订阅

订阅专栏

<!-- 
        操作事件
           1. 属性事件   DOM0级
               <div onclick="函数()">按钮</div>
            
           2. 绑定事件   DOM2级
                var divEle = document.querySelector('div')
                divEle.onclick = function(){
                    //执行的代码
                }
           3. 事件监听
              addEventListener 非IE 7，8
                事件源.addEventListener(事件类型,function(){
                    事件处理函数
                })
              attachEvent ：IE 7 8 下使用
                 事件源.attachEvent(事件类型,事件处理函数)
            
        三种事件操作方式区别
           

     -->
</head>
<body>
    <div>按钮</div>

    <script>
          var divEle = document.querySelector('div')
          divEle.addEventListener('click',function(){
              //触发事件后执行的代码
              alert('事件监听')
          })


事件操作区别
<div>按钮</div>
    <script>
        var divEle = document.querySelector('div')

        // divEle.onclick = function(){
        //     console.log('这是第一个事件绑定操作');
        // }

        // divEle.onclick = function(){
        //     console.log('这是第二个事件绑定操作');
        // }

        divEle.addEventListener('click',function(){
            console.log('这是第一个事件监听操作');
        })

        divEle.addEventListener('click',function(){
            console.log('这是第二个事件监听操作');
        })
点击事件只能操作一次 后者覆盖前者

 <title>事件传播行为</title>
    <!-- 
        由内向外：事件冒泡
        由外向内: 事件捕获

        点击元素： 事件目标对象

        addEventListener的第三个参数决定了是事件捕获还是事件冒泡
           addEventListener(事件类型，事件处理函数,捕获true|冒泡false)
              => 默认冒泡false,可以不写

     -->
</head>
<body>
    <ul>
        <li>
            <p>
                <a href="#">元素一</a>
            </p>
        </li>
    </ul>

    <script>
        var aEle = document.querySelector('a')
        var pEle = document.querySelector('p')
        var liEle = document.querySelector('li')
        var ulEle = document.querySelector('ul')

        aEle.addEventListener('click',function(){
            alert('a')
        },true)
        
        pEle.addEventListener('click',function(){
            alert('p')
        },true)
        liEle.addEventListener('click',function(){
            alert('li')
        },true)
        ulEle.addEventListener('click',function(){
            alert('ul')
        },true)
        默认为冒泡 false
        true为事件捕捉

事件目标对象

!-- 
        <!-- 
        事件对象和事件目标对象
            事件对象  => 事件触发时自动创建,可以在事件处理函数中定义一个形参e来接收
            事件目标对象 => 事件对象的一个属性target获取， 表示当前点击的事件源
               => 兼容IE  
                 var target = e.target ||  e.srcElement  

        this表示当前对象
           =>在事件处理函数中的this表示的就是事件源

     -->
</head>
<body>
    <ul>
        <li>元素一</li>
    </ul>

    <script>
        var liEle = document.querySelector('li')
        liEle.addEventListener('click',function(e){
             e = e || window.event //事件对象
             var target = e.target || e.srcElement //IE兼容性写法
             console.log(target);
             console.log(target.innerHTML);
             console.log(target.nodeType,  target.nodeName);

             console.log('this ',this);


        })

事件委托

<title>事件委托</title>
    <!-- 
        事件委托
          =>元素本来由自身处理的事件，委托给它的父级元素处理，
          => 代收包裹
             
     -->
</head>

<body>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王二</li>
    </ul>

    <script>
        var liEles = document.querySelectorAll('li')

        // for (var i = 0; i < liEles.length; i++) {
        //     liEles[i].addEventListener('click', function (e) {
        //         e = e || window.event //事件对象
        //         var target = e.target || e.srcElement //事件目标对象

        //         alert(target.innerHTML+'本人收包裹')
        //     })
        // }

        var ulEle = document.querySelector('ul')
        ulEle.addEventListener('click', function (e) {
            e = e || window.event //事件对象
            var target = e.target || e.srcElement //事件目标对象
            if (target.innerHTML == '张三') {
                alert('收张三包裹')
            } else if (target.innerHTML == '李四') {
                alert('收李四包裹')
            } else if (target.innerHTML == '王二') {
                alert('收王二包裹')
            }
        })


什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。



DOM事件流
DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。

事件顺序有两种类型：事件捕捉和事件冒泡。

阻止事件冒泡
通常情况下我们都是一步到位，明确自己的事件触发源，并不希望浏览器自作聪明、漫无目的地去帮我们找合适的事件处理程序，即我们明确最精准目标，这种情况下我们不需要事件冒泡。另外通过对事件冒泡的理解，我们知道程序将做多较多额外的事情，这必然增大程序开销。还有一个重要的问题是：事件冒泡处理可能会激活我们本来不想激活的事件，导致程序错乱，甚至无从下手调试，这常成为对事件冒泡不熟悉程序员的棘手问题。所以必要时，我们要阻止事件冒泡。

event.stopPropagation()方法

这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，

event.preventDefault()方法

这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

return false方法

这个方法比较暴力，他会同时阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为returnfalse就等于同时调用了event.stopPropagation()和event.preventDefault()


一、不阻止事件冒泡和默认事件
$(".mybj").click(function(){  
      console.log("1")//不阻止事件冒泡会打印1，页面跳转;               
}); 


二、阻止冒泡
$(".mybj a").click(function(event){  
     event.stopPropagation();//不会打印1，但是页面会跳转；              
});  
              
$(".mybj").click(function(){  
    console.log("1")                  
});


三、阻止默认事件
$(".mybj a").click(function(event){           
     //阻止默认事件  
     event.preventDefault();//页面不会跳转，但是会打印出1，  
})；  
              
$(".mybj").click(function(){  
     console.log("1")；                 
});

四、阻止冒泡对比阻止默认事件
$(".mybj").click(function(){  
     console.log("1")  
});           
//阻止冒泡  
$(".mybj a").click(function(event){  
     event.stopPropagation();              
     //阻止默认事件  
     event.preventDefault() //页面不会跳转，也不会打印出1  
})

五、return false
$(".mybj").click(function(){  
     console.log("1")                  
});                                   
$(".mybj a").click(function(event){  
     return false;  //页面不会跳转，也不会打印出1，等于同时调用了event.stopPropagation()和       
     event.preventDefault()  
});

Javascript代码：

function preventBubble(event){  
  var e=arguments.callee.caller.arguments[0]||event; //若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容  
  if (e && e.stopPropagation) {  
    e.stopPropagation();  
  } else if (window.event) {  
    window.event.cancelBubble = true;  
  }  
}
在哪个位置需要阻止事件冒泡，就在哪使用上面的方法：使用方法是：

preventBubble();