jQuery之_事件繫結與解綁

你若精彩，蝴蝶自來發表於2018-07-31
jQuery事件

使用jQuery實現事件的繫結和解綁

就是所謂的事件操作。

1. 事件繫結(2種)：
* eventName(function(){})
繫結對應事件名的監聽, 例如：$('#div').click(function(){});
* on(eventName, funcion(){})
通用的繫結事件監聽, 例如：$('#div').on('click', function(){})
* 優缺點:
eventName: 編碼方便, 但只能加一個監聽, 且有的事件監聽不支援
on: 編碼不方便, 可以新增多個監聽, 且更通用
2. 事件解綁：
* off(eventName)
3. 事件的座標
* event.clientX, event.clientY 相對於視口的左上角
* event.pageX, event.pageY 相對於頁面的左上角
* event.offsetX, event.offsetY 相對於事件元素左上角
4. 事件相關處理
* 停止事件冒泡 : event.stopPropagation()
* 阻止事件預設行為 : event.preventDefault()

需求：
1. 給.out繫結點選監聽(用兩種方法繫結)
2. 給.inner繫結滑鼠移入和移出的事件監聽(用3種方法繫結)
3. 點選btn1解除.inner上的所有事件監聽
4. 點選btn2解除.inner上的mouseover事件
5. 點選btn3得到事件座標
6. 點選.inner區域, 外部點選監聽不響應
7. 點選連結, 如果當前時間是偶數不跳轉

具體的指令碼實現為：

<script type="text/javascript">
  /*
   需求：
   1. 給.out繫結點選監聽(用兩種方法繫結)
   2. 給.inner繫結滑鼠移入和移出的事件監聽(用3種方法繫結)
   3. 點選btn1解除.inner上的所有事件監聽
   4. 點選btn2解除.inner上的mouseover事件
   5. 點選btn3得到事件座標
   6. 點選.inner區域, 外部點選監聽不響應
   7. 點選連結, 如果當前時間是偶數不跳轉
   */
        // 1. 給.out繫結點選監聽(用兩種方法繫結)
        $(".out").on("click",function(){
            alert('給.out繫結點選監聽1');
        })
        $(".out").click(function(){
            alert('給.out繫結點選監聽2');
        })
        // 2. 給.inner繫結滑鼠移入和移出的事件監聽(用3種方法繫結)
        //第一種
        
        $(".inner").on("mouseenter",function(){
            alert("進入");
        });
        $(".inner").on("mouseleave",function(){
            alert('離開');
        })
        
        //第二種
        $(".inner").mouseenter(function(){
            alert('進入2');
        })
        $(".inner").mouseleave(function(){
            alert('離開2');
        });
        
        //第三種
        
        $(".inner").hover(function(){
            alert('進入3');
        },function(){
            alert('離開3');
        })
        
        
        
        // 3. 點選btn1解除.inner上的所有事件監聽
        $("#btn1").click(function(){
            $(".inner").off();
        })
        // 4. 點選btn2解除.inner上的mouseover事件
        $("#btn2").click(function(){
            $(".inner").off("mouseover");
        })
        // 5. 點選btn3得到事件座標
        $("#btn3").click(function(event){
            event = event || window.event;
            console.log(event.clientX+","+event.clientY);
            console.log(event.pageX+","+event.pageY);
            console.log(event.offsetX+","+event.offsetY);
            
        })
        // 6. 點選.inner區域, 外部點選監聽不響應
        $(".inner").click(function(event){
            alert('aaaa');
            event = event || window.event;
            //停止事件冒泡
            event.stopPropagation()
        })
        // 7. 點選連結, 如果當前時間是偶數不跳轉
        $('#test4').click(function (event) {
    if(Date.now()%2===0) {
      event.preventDefault()
    }
  })
</script>

 

相關文章