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>

巴特西

jQuery之_事件绑定与解绑

最新文章

热门文章