jQuery 基础篇

1、鼠标事件

（1）click与dblclick事件（dblclick()的用法和click()的用法类似）

.click()使用方法 （click事件其实是由mousedown与mouseup 2个动作构成，所以点击的动作只有在松手后才触发）

$ele.click()：元素绑定事件

$ele.click( handler(eventObject) )：指定触发事件

$ele.click( [eventData ], handler(eventObject) )：不同函数传递数据

（2）mousedown与mouseup事件（mousedown()的用法和mouseup()相似）

mousedown（监听用户鼠标按下的操作） mouseup（监听用户鼠标弹起的操作）

.mousedown()的使用方法：

$ele.mousedown()：弹出回调中的鼠标键

$ele.mousedown( handler(eventObject) )：指定触发事件

（用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3）

$ele.mousedown( [eventData ], handler(eventObject) )：不同函数传递数据

（3）mouseover与mouseout事件（监听用户的移入移出操作，两种用法类似）

mousemove使用方法：

$ele.mousemove()：指定触发事件

$ele.mousemove( handler(eventObject) )：绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数，这样可以针对事件的反馈做很多操作了

$ele.mousemove( [eventData ], handler(eventObject) )：使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题（不同函数传递参数）

（4）mouseenter与mouseleave事件（监听用户移动到内部的操作）（传参方法与mouseover和mouseout一样）

mouseenter事件和mouseover的区别：（jQuery推荐我们使用 mouseenter事件）

mouseover为例：

<div class="aaron2">
<p>鼠标离开此区域触发mouseleave事件</p>
</div>

（p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发

所以在这种情况下面，jQuery推荐我们使用 mouseenter事件 ，mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发 ）

mouseleave和mouseout的区别

（5） hover事件（鼠标指针移入移出元素时触发函数）

使用方法：$(selector).hover(handlerIn, handlerOut)

（6）focusin事件（当一个元素，或者其内部任何一个元素获得焦点的时候触发函数）

使用方法：

$ele.focusin()：绑定$ele元素，不带任何参数一般用来指定触发一个事件

$ele.focusin( handler )：绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数

$ele.focusin( [eventData ], handler )：可以接受一个数据参数，解决不同作用域下数据传递的问题

（7）focusout事件（当一个元素，或者其内部任何一个元素失去焦点的时候触发函数）（用法与focusin一样）

---

2、表单事件

（1）blur与focus事件（处理表单焦点问题）

focusin与focusout事件 和 blur与focus事件的区别：

focusin与focusout事件（ 支持冒泡）（在元素包含的元素中产生）

blur与focus事件（不支持冒泡）（在元素本身产生）

（2）change事件（监听<input>元素，<textarea>和<select>元素改变的动作 ）

input元素：监听value值的变化，当有改变时，失去焦点后触发change事件（对于单选按钮和复选框，当用户鼠标做出选择时，该事件立即触发）

textarea元素： 多行文本输入框，当有改变时，失去焦点后触发change事件

select元素：对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发

（3）select事件（当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。）

select事件只能用于<input>元素与<textarea>元素

（4）submit事件（监听提交的这个动作）

使用方法：

$ele.submit()：

<div id="test">点击触发<div>$("ele").submit(function(){ alert('触发指定事件')})$("#text").click(function(){ $("ele").submit() //指定触发事件});

$ele.submit( handler(eventObject) ) ：绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数

$ele.submit( [eventData ], handler(eventObject) ) ：使用与方法二一致，不过可以接受一个数据参数

---

3、键盘事件

（1）keydown()与keyup()事件（监听键盘按下与松手两种动作，使用方法一致，触发条件相反）

（keydown是在键盘按下就会触发，keyup是在键盘松手就会触发）

keydown使用方法（每次获取的内容都是之前输入的，当前输入的获取不到 ）：

• 直接绑定事件 $elem.keydown( handler(eventObject) )
• 传递参数 $elem.keydown( [eventData ], handler(eventObject) )
• 手动触发已绑定的事件 $elem.keydown()

（2）keypress()事件（用法与keydown相似）

keypress事件与keydown和keyup的主要区别

• 只能捕获单个字符，不能捕获组合键
• 无法响应系统功能键（如delete，backspace）
• 不区分小键盘和主键盘的数字字符

---

4、事件的绑定和解绑

（1）on()的多事件绑定（ jQuery on()方法是官方推荐的绑定事件的一个方法。 ）

• 基本用法：.on( events ,[ selector ] ,[ data ] )

$("#elem").click(function(){}) //快捷方式 $("#elem").on('click',function(){}) //on方式

• 多个事件绑定同一个函数

$("#elem").on("mouseover mouseout",function(){ });

• 多个事件绑定不同函数

$("#elem").on({
mouseover:function(){},
mouseout:function(){},
});

（2）on()的高级用法（事件委托机制）

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

（3）卸载事件off()方法（ 通过.on()绑定的事件处理程序，通过off() 方法移除该绑定 ）

• 绑定2个事件

$("elem").on("mousedown mouseup",fn)

• 删除一个事件

$("elem").off("mousedown")

• 删除所有事件

$("elem").off("mousedown mouseup")

5、事件对象的使用

（1）jQuery事件对象的作用（event.target）

（ 事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁。 ）

（2）jQuery事件对象的属性和方法

• event.type：获取事件的类型
• event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标
• event.preventDefault() 方法：阻止默认行为
• event.stopPropagation() 方法：阻止事件冒泡
• event.which：获取在鼠标单击时，单击的是鼠标的哪个键（左键报告1，中间键报告2，右键报告3）
• event.currentTarget : 在事件冒泡过程中的当前DOM元素
• this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

• .this和event.target都是dom对象

---

6、自定义事件

（1）trigger事件（根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为）

$('#elem').on('Aaron', function(event,arg1,arg2) {    alert("自触自定义时间") });$('#elem').trigger('Aaron',['参数1','参数2'])

（2）triggerHandler事件（triggerHandler与trigger的用法是一样的）

• triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()
• .trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
• 使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
• .triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined