jq 事件

jq 事件

• jq事件
• jq中的事件操作，都是基于js的addEventListener语法
• 特点：
  1.一个元素的多个事件，都会执行，不会覆盖
  2.支持多个事件添加
  3.支持事件委托
  4.事件的命名空间

 <div id="div1" style="width: 100px;height: 100px;background:black;margin:0 auto;"></div>
    <div id="div2" style="width: 100px;height: 100px;background:black;margin:10px auto;"></div>
    <div id="div3" style="width: 100px;height: 100px;background:black;margin:10px auto;"></div>
     
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
    //jq 事件
    //jq中的事件操作，都是基于js的addEventListener语法

    //特点 1.一个元素的多个事件，都会执行，不会覆盖
     $('#div1').on('click',function(){
         alert(111);
     })
     $('#div1').on('click',function(){
         alert(222);
     })
     $('#div1').on('click',function(){
         alert(333);
     })

    //2.支持多个事件添加
    //on('click mouseover',function(){})
    $('#div2').on('click mouseover',function(){
        console.log(789);
    })
    //多个事件还可以写成对象的方式
    $('#div3').on({
        click:function(){console.log(111)},
        mouseover:function(){console.log(222)}
    })
    
    //3.支持事件委托

    $('ul').on('click','li',function(){
      $(this).css('background','red').siblings().css('background','') //this 指向的是被点击的元素，与js的evt.target相同
    })
    //4.事件的命名空间
    //mouseover.hello 就叫做事件的命名空间， 可以随便定义
    //用途：方便在同一元素上同时绑定和撤销多个事件
    //通常与事件取消一起使用
   $('li').on('mouseover.hello',function(){ console.log('hello')});
   $('li').on('mouseover.world',function(){ console.log('world')});

   //事件取消 元素.off()  取消该元素的所有事件
   //有参数  元素.off(mouseover) 取消元素的mouseover事件
   $('li').off('mouseover.hello'); //取消元素的mouseover.hello 事件

   //jq中 阻止默认事件+阻止事件冒泡 return false
   $('div').on('click',function(evt){.
     evt.originalEvent //将jq的evt转成原生的evt
     evt.preventDefault();//js 阻止默认事件
     evt.stopPropagation();// js 阻止事件冒泡
     return false; // jq 阻止默认事件+阻止事件冒泡
   })
    </script>

• 事件取消
• 元素.off() 取消该元素的所有事件
• 元素.off(mouseover) 取消元素的mouseover事件
• $(‘li’).off(‘mouseover.hello’); //取消元素的mouseover.hello 事件

jq中 阻止默认事件+阻止事件冒泡 return false