码迷,mamicode.com
首页 > Web开发 > 详细

jQuery事件处理

时间:2019-05-19 16:56:13      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:fse   rop   click   out   pagex   rev   over   enter   log   

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()
                }
            })
        })

  

jQuery事件处理

标签:fse   rop   click   out   pagex   rev   over   enter   log   

原文地址:https://www.cnblogs.com/yangHS/p/10889775.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!