jQuery事件

一、jQuery事件

1.加载DOM

• jQuery的入口函数：等待页面DOM加载完毕后再去执行js代码
• 其不用等到所有外部资源（外部的js文件、css文件、图片等）加载完成后才执行内部代码
• 相当于原生js中的DOMContentLoaded
  
• $(document)可简写为$()，每次调用 $(document).ready()方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行，即ready()方法可多次调用

2.jQuery事件

在DOM加载完毕后，为某些元素绑定事件来完成某些操作，参考博客

（1）常用事件

• 1.blur()　　　　　　当失去焦点时触发。包括鼠标点击离开和TAB键离开。

• 2.change()　　　　 当元素获取焦点后，值改变失去焦点事触发。

• 3.click()　　　　　　当鼠标单击时触发。

• 4.dblclick()　　　　 当鼠标双击时触发。

• 5.error()　　　　　 当javascript出错或img的src属性无效时触发。

• 6.focus()　　　　 当元素获取焦点时触发。注意：某些对象不支持。

• 7.focusin()　　　 当元素或其子元素获取焦点时触发，与focus()区别在于能够检测其内部子元素获取焦点的情况。

• 8.focusout()　　　 当元素或者其子元素失去焦点时触发，与focusout()区别在于能够检测内部子元素失去焦点的情况。

• 9.keydown()　　 当键盘按下时触发。

• 10.keyup()　　　　当按键松开时触发。

• 11.mousedown()　　　　当鼠标在元素上点击后触发。

• 12.mouseenter()　　　　当鼠标在元素上穿过时触发。mouseenter与mouseover的区别是，鼠标从mouseover的子元素上穿过时也会触发而mouseenter不会。

• 13.mouseleave()　　　　当鼠标从元素上移出时触发。

• 14.mousemove()　　　 当鼠标在元素上移动时触发。.clientX 和 .clientY分别代表鼠标的X坐标与Y坐标。

• 15.mouseout()　　　　 当鼠标从元素上移开时触发。

• 16.mouseover()　　　　 当鼠标移入元素时触发。

• 17.mouseup()　　　　 当鼠标左键按下释放时触发。

• 18.resize()　　　　　　 当浏览器窗口大小改变时触发。 $(window).resize();

• 19.scroll()　　　　　　　 当滚动条发生变化时触发。

• 20.select()　　　　　　 当input里的内容被选中时触发。

• 21.submit()　　　　　　 提交选中的表单。

• 22.unload()　　　　　　 当页面卸载时触发。

（2）事件常用方法

（1）绑定事件bind(type,[data],fn)方法：

• 第一个参数是事件类型，即上面的时间
• 第二个参数是可选参数
• 第三个参数是用来绑定的处理函数

　$("#div1").bind("change",function(){ alert("你好！"); })

（2）切换事件hover(enter,leave)方法

• 光标移动到元素上时，会触发enter函数；光标移出时会触发leave函数

$(function(){
$("#a h2").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
});

（3）顺序执行事件toggle(fn1,fn2,...fnN)

• 当鼠标单击时，一次执行绑定的事件

$(function(){
$("#a h2").toggle(function(){
alert(1);},
function(){
alert(2);},
function(){
alert(3);})
})

（4）移除事件unbind([type],[data])

• unbind()没有参数，则删除所有绑定的事件
• 若有事件的类型，则删除此类型的绑定事件

　　$(":button").unbind("click");//移除按钮的单击事件。

（5）仅执行一次的事件one（type,[data],fn）

　$("#div1").one("click",function(){ alert("我只执行一次!"); })

（6）DOM加载完自动执行的事件trigger(type,[data]

• 第一个参数是触发的事件类型，第二个参数是传给事件处理函数的附加数据，以数组形式传递
• trigger()方法可触发上述事件，也可触发自定义事件
• 该方法触发事件后，会执行浏览器默认操作；使用triggerHandler()方法可触发元素绑定的特定事件，同时取消浏览器对此的默认操作

（7）为指定的元素添加一个或多个事件并处理绑定函数delegate(selector,[type],fn)

• 第一个参数为所选元素
• 第二个参数为事件类型

（8）删除有delegate()函数绑定的一个或多个事件处理函数undelegate()

（9）DOM根节点绑定事件live()
（10）解除live()方法绑定的事件die()

3.事件冒泡

jQuery事件冒泡
其他