jQuery事件处理

Posted 2021-12-01 yanghs

jQuery事件处理

 

1.事件绑定（2种）

* eventName(function(){})

绑定对应事件名的监听，例如：$(‘#div‘).click(function(){});

* on(eventName,function(){})

通用的绑定事件监听，例如：$(‘#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上的mouserover事件
             * 5.点击btn3得到事件坐标
             * 6.点击.inner区域，外部点击监听不响应
             * 7.点击链接，如果当前时间是偶数不跳转
             */

            // 1.给.out绑定点击监听(用两种方法绑定)
           $(‘.out‘).click(function () {
               console.log(‘click out‘)
           })
            $(‘.out‘).on(‘click‘,function () {
                console.log(‘on click out‘)
            })

            //2.给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
            $(‘.inner‘)
                .onmouseenter(function () {//进入
                    console.log(‘进入‘)
                })
                .onmouseleave(function () {
                    console.log(‘离开‘)
                })
            $(‘.inner‘)
                .on(‘onmouseenter‘,function () {
                    console.log(‘进入‘)
                })
                .on(‘onmouseleave‘,function () {
                    console.log(‘离开‘)
                })

            //3.点击btn1解除.inner上的所有事件监听
            $(‘#btn1‘).click(function () {
                $(‘.inner‘).off()
            })

            //4.点击btn2解除.inner上的mouserover事件
            $(‘#btn2‘).click(function () {
                $(‘.inner‘).off(‘mouseover‘)
            })

            //5.点击btn3得到事件坐标
            $(‘#btn3‘).click(function (event) {//event事件对象
                console.log(event.offsetX,event.offsetY)//原点为事件元素的左上角
                console.log(event.clientX,event.clientY)//原点为窗口的左上角
                console.log(event.pageX,event.pageY)//原点为页面的左上角
            })

            //6.点击.inner区域，外部点击监听不响应
            $(‘.inner‘).click(function (event) {
                console.log(‘click inner‘)
                //停止事件冒泡
                event.stopPropagation()
            })

            //7.点击链接，如果当前时间是偶数不跳转
            $(‘#test4‘).click(function (event) {
                if (Date.now()%2===0){
                    event.preventDefault()
                }
            })
        })