jQuery事件总结

文档没有完全加载前就运行函数，操作有可能失败，例如：

• 隐藏一个不存在的元素
• 获得未完全加载的图像的大小

为了防止文档完全加载前运行函数，可以使用$(document).ready(function(){})；简写为$(function(){})；

在DOM结构绘制完触发

 

类似的有window.onload，语法是：window.onload = function(){} 或 function load(){}；window.onload = load；

在页面资源完全加载完才触发，包括图片，脚本，链接及子框

 

event.currentTarget总是指向被绑定事件句柄的元素；

event.target总是指向触发该事件的元素

 

原生事件监听函数：

element.addEventListener(event-name，callback，use-capture)；

use-capture设置为true时表示该事件在捕获阶段中监听，设置为false时表示在冒泡阶段中监听

IE8及更早版本不支持addEventListener

 

HTML的事件属性：

onclick onchange等属性调函数时，函数只能是全局函数，在$(function(){ })中的函数不行，函数名后面必须加括号，如：onclick="exercise()"

<a onclick="download()"></a>中download不能做方法名，会和a标签的download属性冲突

 

on：在被选元素及其子元素上添加一个或多个事件，使用on添加的事件适用于当前及未来的元素(比如由脚本创建的新元素)。

基本语法：$('#father').on('click','#child',function(){})；

可以给同一个元素绑定多个click事件

类似的有onclick只能给同一个元素绑定一次，绑定多次的情况下，以第一次为准

 

解绑被选元素的所有click事件：$('#father').off('click')；不论click事件有没有命名空间

解绑被选元素的特定click事件：

　　一. 知道函数名，传入函数名，例：

　　function todo () {}；$('#father').on('click'，todo)；$('#father').off('click'，todo)；

　　二. 不知道函数名，使用命名空间，例：

　　$('#father').on('click.namespace'，function(){})；$('#father').off('click.namespace')；　

　　可以给一个或多个click事件添加同一个命名空间，off时会解绑所有有该命名空间的click事件

 

click：单击事件

 

dblclick：双击事件

 

mouseenter：鼠标移入被选元素时触发，移出被选元素时不触发，移入和移出其子元素时都不会再次触发

 

mouseover：鼠标移入被选元素时触发，移出被选元素时不触发，移入和移出其子元素时都会再次触发

 

mouseleave：鼠标移出被选元素时触发，移入被选元素时不触发，移入和移出其子元素时都不会再次触发

 

mouseout：鼠标移出被选元素时触发，移入被选元素时不触发，移出和移入其子元素时都会再次触发

 

hover：在jQuery1.7版本前，hover触发mouseenter和mouseleave；

　　　  在jQuery1.8版本后，hover触发mouseover和mouseout。

基本语法：

(1)  $('#id').hover(function( ){ },function( ){ })；

      在jQuery1.8版本后，等同于$('#id').mouseover(function( ){ }).mouseout(function( ){ })；

(2)  $('#id').hover(function( ){ })；

      在jQuery1.8版本后，等同于$('#id').on('mouseover mouseout',function( ){ })；

 

focus：当元素获得焦点(鼠标点击选中元素或通过tab键定位到元素)时触发

 

blur：当元素失去焦点时触发

可以把反复执行的操作写成函数，可以直接调用函数名，例:

function check(){}

$('#id').blur(check)；

 

change：仅适用于表单元素

当用于select元素时，change事件会在选择其他选项(非被选中的那一项)时发生

当用于input[type="text"]或textarea时，只有当内容改变时，change事件就会在元素失去焦点时发生

当用于input[type="checkbox"]时，change事件会在checkbox中的任意一项被选中或取消选中时都会发生

当用于input[type="radio"]时，change事件会在被选中的选项改变时发生

使用val()改变表单元素的值时不会触发change事件

 

resize：常用于window对象(浏览器窗口)或框架页面