jQuery事件-鼠标事件

click与dbclick事件:jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dblclick方法用于监听用户双击操作,dblclick的用法和click的用法是类似。click事件其实是由mousedown与mouseup 2个动作构成,所以点击的动作只有在松手后才触发;dblclick又是由2个click叠加而来的。
注意:在同一元素上同时绑定 click 和 dblclick 事件是不可取的。各个浏览器事件触发的顺序是不同的,一些浏览器在dblclick之前接受两个 click 事件 ,而一些浏览器只接受一个 click 事件。用户往往可通过不同的操作系统和浏览器配置双击灵敏度
  • 方法一:$ele.click():绑定$ele元素,不带任何参数一般是用来指定触发一个事件,用的比较少
  • 方法二:$ele.click( handler(eventObject) ):绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数,这样可以针对事件的反馈做很多操作了
  • 方法三:$ele.click( [eventData ], handler(eventObject) ):使用与方法二一致,不过可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题



mousedown与mouseup事件:mousedown强调是按下触发,mouseup强调是松手触发,mouseup与mousedown组合起来就是click事件,所以点击的动作只有在松手后才触发。如果在一个元素按住了鼠标不放,并且拖动鼠标离开这个元素,并释放鼠标键,这仍然是算作mousedown事件;如果用户在一个元素上按下鼠标按键,并且拖动鼠标离开这个元素,然后释放鼠标键,这个事件就不触发。任何鼠标按钮被按下时都能触发mousedown事件(左右键和滚轮键等),用event 对象的which区别按键,敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是3, alert(e.which);
  • 方法一:$ele.mousedown():绑定$ele元素,不带任何参数一般是用来指定触发一个事件,可能一般用的比较少
  • 方法二:$ele.mousedown( handler(eventObject) ),绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数
  • 方法三:$ele.mousedown( [eventData ], handler(eventObject) ),使用与方法二一致,不过可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题



mousemove事件:基于移动的机制可以做出拖动、拖拽一系列的效果出来。mousemove事件是当鼠标指针移动时触发的,即使是一个像素。如果处理器做任何重大的处理,或者如果该事件存在多个处理函数,这可能造成浏览器的严重的性能问题
  • 方法一:$ele.mousemove(),绑定$ele元素,不带任何参数一般是用来指定触发一个事件,用的比较少
  • 方法二:$ele.mousemove( handler(eventObject) ),绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数
  • 方法三:$ele.mousemove( [eventData ], handler(eventObject) ),使用与方法二一致,不过可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题



mouseover与mouseout事件:与原生JS的 onmouseover() 与 onmouseout() 事件相似
  • 方法一:$ele.mouseover(),绑定$ele元素,不带任何参数一般是用来指定触发一个事件,用的比较少
  • 方法二:$ele.mouseover( handler(eventObject) ),绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数
  • 方法三:$ele.mouseover( [eventData ], handler(eventObject) ),使用与方法二一致,不过可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题



mouseenter与mouseleave事件:用交互操作中,经常需要知道用户操作鼠标是否有移到元素内部或是元素外部,因此jQuery提供了一个mouseenter和mouseleave的快捷方法可以监听用户移动到内部的操作。使用上非常简单,三种参数传递方式与mouseover和mouseout是一模一样的,所以这里不再重复,主要讲讲区别,下面以mouseenter为例:
  • mouseenter 的 JavaScript事件是Internet Explorer专有的。由于该事件在平时很有用,jQuery模拟这一事件,以便它可用于所有浏览器。该事件在鼠标移入到元素上时被触发。任何HTML元素都可以接受此事件。
  • mouseenter事件和mouseover的区别,关键点就是:mouseenter不会冒泡,mouseover会冒泡
  • mouseenter事件只会在绑定它的元素上被调用,而不会在父代节点上被触发,这个就相当于在封装的时候对onmouseover进行阻止冒泡
  • mouseover事件既会在绑定它的元素上被调用,也会在父代节点上被触发



hover事件:在元素上 移进移出切换其颜色,一般通过2个事件 mouseenter 与 mouseleave 配合就可以达到。
实际上,hover()这个方法就是封装了 mouseenter() 和 mouseleave() 两个方法, 可以阻止冒泡问题. 这个方法可以用来改变样式, 比如鼠标移入div变色, 移出回到以前的颜色. 相当于css中的div:hover, 但是:hover很多的浏览器对a:hover支持还不错, 对div:hover, ul:hover支持有点差, 特别是ie6,ie7这些较低的版本. 用jquery可以解决兼容性,代码量比js要少很多, 可以专注在逻辑业务上。
只需要在hover方法中传递2个回调函数就可以了,不需要显示的绑定2个事件
$(selector).hover(handlerIn, handlerOut)
handlerIn(eventObject):当鼠标指针进入元素时触发执行的事件函数
handlerOut(eventObject):当鼠标指针离开元素时触发执行的事件函数



focusin与focusout事件:当一个元素,或者其内部任何一个元素 获得焦点/失去焦点的时候,例如:input元素,用户在点击聚焦的时候
方法一: $ele.focusin() / $ele.focusout(),绑定$ele元素,不带任何参数一般是用来指定触发一个事件,一般用的比较少
方法二: $ele.focusin( handler ) / $ele.focusout( handler ),绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数
方法三: $ele.focusin( [eventData ], handler ) / $ele.focusout( [eventData ], handler ),使用与方法二一致,不过可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值