jQuery之on/off/one支持的处理程序
jQuery之on/off/one支持的处理程序
定义
在jQuery中,on/off/one的定义如下。
方法 |
描述 |
on() |
向元素添加事件处理程序 |
off() |
移除通过on()添加的事件处理程序 |
one() |
向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次 |
语法格式如下:
1 $(selector).on(event,childSelector,data,function) 2 $(selector).off(event,childSelector,data,function) 3 $(selector).one(event,childSelector,data,function)
参数 |
描述 |
event |
必需。规定要从被选元素添加的一个或多个事件或命名空间。 由空格分隔多个事件值,也可以是数组。必须是有效的事件。 |
childSelector |
可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。 |
data |
可选。规定传递到函数的额外数据。 |
function |
可选。规定当事件发生时运行的函数。 |
这里的event表示的是事件,那么他们支持哪些事件呢?在此,我简单标记一下。
方法 |
描述 |
blur() |
添加/触发失去焦点事件 |
change() |
添加/触发change事件 |
click() |
添加/触发click事件 |
focus() |
添加/触发获取焦点事件 |
focusin() |
当元素(或在其内的任意元素)获得焦点时发生 |
focusout() |
当元素(或在其内的任意元素)获得失去时发生 |
keydown() |
当键盘按下时执行事件 |
keypress() |
当键盘按下后执行事件 |
keyup() |
当键盘松开时执行事件 |
mousedown() |
鼠标按下时执行 |
mouseenter() |
鼠标进入时执行 |
mouseleave() |
鼠标离开时执行 |
mousemove() |
鼠标在指定元素移动时执行 |
mouseup() |
鼠标释放时执行 |
mouseover() |
当指针位于元素上方时触发 |
mouseout() |
鼠标离开被选元素时触发 |
ready() |
元素加载后执行事件 |
resize() |
对窗口进行调节时执行方法 |
scroll() |
当滚动指定元素时,触发该方法 |
select() |
当textarea或文本类型的input元素的文本被选择时触发 |
submit() |
表单提交时触发 |
contextmenu() |
鼠标右击元素时执行 |
注:与keypress事件相关的事件顺序:
- keydown – 键按下的过程
- keypress – 键按下
- keyup -键松开
注:mouseenter/mouseleaver 和 mouseover/mouseout 的区别和联系
- mouseenter/mouseleaver 和 mouseover/mouseout在鼠标进入或离开被选元素时触发。
- mouseover当鼠标进入被选元素或者任意子元素都会触发,通常与mouseout配套使用。所以,被选元素如果内部包含多个子元素,鼠标在元素内移动可能会触发多次。
- mouseenter事件只在鼠标进入被选元素时触发,通常与mouseleave配套使用。所以,进入一次备选元素,只会触发一次。
总结
jQuery支持绑定大部分处理程序。不支持的包括以下处理程序:
- 废除或弃用的bind()、delegate()、die()、error()、live()、load()、toggle()、unbind()、undelegate()、unload()。
- 用于绑定或移除处理程序的事件bind()、delegate()、die()、live()、load()、off()、on()、one()、unbind()、undelegate()、unload()。
- 参数不一致的事件hover()、trigger()、triggerHandler()。
- 其他:如$.proxy、$.holdReady()。
方法 |
描述 |
hover() |
鼠标悬停时,执行方法,等价于mouseenter + mouseleave |
$.proxy |
接受一个已有的函数,并返回特定上下文的新函数 |
trigger() |
触发被选定元素指定的事件以及事件的默认行为(例如提交表单) |
triggerHandler() |
触发被选定元素的指定事件 |
$.holdReady() |
暂停或恢复ready()事件执行 |
参考网址
- jQuery事件方法:https://www.runoob.com/jquery/jquery-ref-events.html
- jQuery keypress()方法:https://www.runoob.com/jquery/event-keypress.html