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>

 

转载于:https://www.cnblogs.com/caicaihong/p/9398149.html