js进阶 12 jquery事件汇总
一、常用事件
页面载入事件
- ready() 文档就绪事件（当 HTML 文档就绪可用时）
鼠标事件
- click() 触发、或将函数绑定到指定元素的 click 事件
- dblclick() 当双击元素时，会发生 dblclick 事件。
- mousedown()/mouseup() 鼠标的按下和松开事件
- mouseover()/mouseout() 鼠标的移入和移出事件
- mouseenter()/mouseleave() 鼠标的移入和移出事件
mouseout()/mouseover()事件在鼠标移入“所选元素及其后代子元素”时都会触发；mouseenter()/mouseleave()事件只有鼠标移入“所选元素”才会触发，如果鼠标仅仅移入“所选元素的后代子元素”的时候，并不会触发。
- hover()一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。
- mousemove() 当鼠标指针在指定的元素中移动时触发。
键盘事件
- keydown() 当键盘或按钮被按下时，发生 keydown 事件。
- keyup() 在键盘的某个键被按下之后松开的一瞬间触发的事件。。
- keypress() 在键盘上的某个键被按下到松开“整个过程”中触发的事件。
keypress事件只在按下键盘的任一“字符键”（如A~Z、数字键）时触发，单独按下“功能键”（如F1~F12、Ctrl键、Shift键、Alt键等）不会触发；而keydown无论是按下“字符键”还是“功能键”都会触发；
event.which 指示按了哪个键或按钮。
表单事件
- blur() 当元素失去焦点时触发 blur 事件。
blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的
- focus() 当元素获得焦点时，触发 focus 事件。
- focusin()当元素获得焦点时，触发 focusin 事件。
focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
- focusout()当元素失去焦点时触发 focusout 事件。
focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
- change() 当元素的值发生改变时，会发生 change 事件。
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。
- select() 当用户选中单行文本框text或多行文本框textarea的文本时，会触发select事件。
- submit() 当提交表单时，会发生 submit 事件。
其他事件
- scroll() 当用户滚动滚动条时会发生 scroll 事件
- resize() 当调整浏览器窗口的大小时，发生 resize 事件。
- error() 当元素遇到错误（没有正确载入）时，发生 error 事件。注：jQuery 1.0 新增该函数，但从 1.8 开始被标记为已过时。
- load() 触发、或将函数绑定到指定元素的 load 事件.注：jQuery 1.0 新增该函数，但从1.8开始被标记为已过时。
- unload() 在当用户离开页面时，会发生 unload 事件。注：jQuery 1.0 新增该函数，但从1.8开始被标记为已过时。
- toggle() 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。注：1.9版本 .toggle() 方法已经删除
二、事件对象
JavaScript在事件处理函数中默认传递了event对象，在入门视频中我们已经详细讲解过事件对象。jQuery对JavaScript原有的事件对象进行封装，解决了浏览器的兼容性问题，并且创建了一些新的属性和方法，使我们使用起来更加方便。
event对象的属性
- event.type 描述事件的类型。
- event.target 触发该事件的 DOM 元素。
- event.currentTarget 在事件冒泡阶段中的当前DOM元素,等同于'this'
- event.relatedTarget 返回当鼠标移动时进入或退出的那个元素
- event.data 事件调用时的额外数据
- event.pageX/event.pageY 显示鼠标相对于文件的左侧和顶部边缘的位置
注意区分：screenX/screenY：获取显示器屏幕位置的坐标；
clientX/clientY:获取相对于页面视口的坐标 - event.result这个属性包含了当前事件事件最后触发的那个处理函数的返回值
如果为DOM元素的同一事件类型绑定了多个事件处理函数，你可以使用result属性获取上一个事件处理函数执行的返回值。
- event.timeStamp 属性用于返回当前事件触发的时间值。这个时间值是距离1970年1月1日的毫秒数。
- event.which 针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。
event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。
在mousedownmouseup事件中，event.which属性返回的是对应鼠标按钮的映射代码值(相当于event.button)。以下是主要的鼠标按钮映射代码对应表。
event.which属性值 对应的鼠标按钮 1 鼠标左键 2 鼠标中键(滚轮键) 3 鼠标右键 在keydownkeyup事件中，event.which属性返回的是对应按键的映射代码值(相当于event.keyCode)。以下是常用的键盘按键映射代码的对应表：
which属性值(或范围) 对应的输入字符 48 - 57 对应字符 0 - 9 65 - 90 对应字符 A - Z 97 - 122 对应字符 a - z which属性值(或范围) 对应的键盘按键 8 Backspace键 9 Tab键 13 Enter键 16 Shift键 17 Ctrl键 20 Alt键 20 Caps Lock键(大小写锁定) 27 Esc键 33 - 36 对应按键 PageUp、PageDown、End、Home 37 - 40 对应按键 左、上、右、下(方向键) 45 - 46 对应按键 Insert、Delete 48 - 57 对应按键 0 - 9(非小键盘) 65 - 90 对应按键 A - Z 91 Windows键 96 - 105 对应按键 0 - 9(小键盘) 106、107、109、110、111 对应按键*、+、-、.、/(小键盘) 112 - 123 对应按键 F1 - F12 - event.preventDefault() 阻止事件的默认动作。
- event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。
- event.stopPropagation() 防止事件冒泡
- event.isPropagationStopped()判断是否调用过 event.stopPropagation() 方法
- event.stopImmediatePropagation() 阻止剩余的事件处理函数执行并且防止事件冒泡
- event.isImmediatePropagationStopped() 检测 event.stopImmediatePropagation() 是否被调用过。
三、事件处理
-
事件绑定
on() 为某些元素绑定一个事件或者多个事件。
该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
-
事件解绑
off() 解除绑定的某一指定的事件或者所有事件。
“绑定”与“解绑”是相反的关系。在jQuery中，我们可以通过off()方法解除绑定的某一指定的事件或者所有事件。
对同一元素绑定的多个同一事件进行解绑，可以使用命名空间解决，例如‘click.a’‘click.b’
-
事件委托
通过事件冒泡，让子元素绑定的事件冒泡到父元素(或祖先元素)上，然后再进行处理。
- one()为每一个匹配元素的特定事件绑定一个一次性的事件处理函数。
通过one()函数绑定的事件处理函数都是一次性的，只有首次触发事件时会执行该事件处理函数。触发之后，jQuery就会移除当前事件绑定。
- trigger() 在每一个匹配的元素上触发某类事件。
- triggerHandler() 触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。
与trigger()区别
- triggerHandler()不会引起事件的默认行为
- trigger() 会操作匹配的所有元素，而triggerHandler() 只影响第一个匹配元素。
- triggerHandler() 创建的事件不会产生事件冒泡.
- triggerHandler()返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。如果没有处理程序被触发，则这个方法返回 undefined。
温馨提示