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>