三、事件篇
1. 鼠标事件
(1) click与dbclick事件
$ele.click():绑定$ele元素，不带任何参数一般是用来指定触发一个事件。
$ele.click( handler(eventObject) ):绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数，这样可以针对事件的反馈做很多操作了，方法中的this是指向了绑定事件的元素。
$ele.click( [eventData ], handler(eventObject) ):可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题。
(2) mousedown与mouseup事件
$ele.mousedown():绑定$ele元素，不带任何参数一般是用来指定触发一个事件。
$ele.mousedown( handler(eventObject) ):绑定$ele元素每次$ele元素触发点击操作会执行回调 handler函数。
$ele.mousedown( [eventData ], handler(eventObject) ): 可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题。
用event 对象的
which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3
(3) mousemove事件
用交互操作中，经常需要知道用户是否有移动的操作。基于移动的机制可以做出拖动、拖拽一系列的效果出来。针对移动事件，jQuery提供了一个mousemove的快捷方法可以监听用户移动的的操作
$ele.mousemove()
$ele.mousemove( handler(eventObject) )
$ele.mousemove( [eventData ], handler(eventObject) )
(4) mouseover与mouseout事件
监听用户的移入移出操作,方法同上。
(5) mouseenter与mouseleave事件
监听用户移动到内部的操作,方法同上。
mouseenter事件和mouseover的区别:关键点就是：冒泡的方式处理问题
mouseover事件会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发。
mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发。
(7) hover事件
$(selector).hover(handlerIn, handlerOut)
- handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
- handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数
(8) focusin事件
当一个元素，或者其内部任何一个元素获得焦点的时候，例如：input元素，用户在点击聚焦的时候，如果开发者需要捕获这个动作的时候，jQuery提供了一个focusin事件。
(9) focusout事件
当一个元素，或者其内部任何一个元素失去焦点的时候，比如input元素，用户在点击失去焦的时候，如果开发者需要捕获这个动作，jQuery提供了一个focusout事件。
2. 表单事件
(1) blur与focus事件
区别：是否支持冒泡处理
focus()在元素本身产生，focusin()在元素包含的元素中产生。
(2) change事件
input元素: 监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。
select元素:对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发。
textarea元素: 多行文本输入框，当有改变时，失去焦点后触发change事件。
(3) select事件
select事件只能用于<input>元素与<textarea>元素
当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
(4) submit事件
具体能触发submit事件的行为：
<input type="submit">
<input type="image">
<button type="submit">
当某些表单元素获取焦点时，敲击Enter（回车键）
通过在<form>元素上绑定submit事件，开发者可以监听到用户的提交表单的的行为
form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为传统的方式是调用事件对象 e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾
return false即可
3. 键盘事件
(1) keydown()与keyup()事件
keydown事件：
当用户在一个元素上第一次按下键盘上字母键的时候，就会触发它。使用上非常简单，与基本事件参数处理保持一致，这里使用不在重复了，列出使用的方法
//直接绑定事件
$elem.keydown( handler(eventObject) )
//传递参数
$elem.keydown( [eventData ], handler(eventObject) )
//手动触发已绑定的事件
$elem.keydown()
keyup事件：
当用户在一个元素上第一次松手键盘上的键的时候，就会触发它。使用方法与keydown是一致的只是触发的条件是方法的
- keydown是在键盘按下就会触发,
每次获取的内容都是之前输入的，当前输入的获取不到。- keyup是在键盘松手就会触发,keyup事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本。
- 理论上它可以绑定到任何元素，但
keydown/keyup事件只是发送到具有焦点的元素上，不同的浏览器中，可获得焦点的元素略有不同，但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的。
(2) keypress()事件
keypress事件与keydown和keyup的主要区别
- 只能捕获单个字符，不能捕获组合键
- 无法响应系统功能键（如delete，backspace）
- 不区分小键盘和主键盘的数字字符
总而言之，KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。
4. 事件的绑定和解绑
(1) on()的多事件绑定
基本用法：.on( events ,[ selector ] ,[ data ] )
多个事件绑定同一个函数:
$("#elem").on("mouseover mouseout",function(){ });
多个事件绑定不同函数
$("#elem").on({
mouseover:function(){},
mouseout:function(){}
});
将数据传递到处理程序
function greet( event ) {
alert( "Hello " + event.data.name ); //Hello 慕课网
}
$( "button" ).on( "click", {
name: "慕课网"
}, greet );
(2) on()的高级用法
委托机制
.on( events ,[ selector ] ,[ data ], handler(eventObject) )
<body>
<h2>on事件委托</h2>
<div class="left">
<div class="aaron">
<a>点击这里</a>
</div>
</div>
<script type="text/javascript">
//给body绑定一个click事件
//没有直接a元素绑定点击事件
//通过委托机制，点击a元素的时候，事件触发
$('body').on('click', 'a', function(e) {
alert(e.target.textContent)
})
</script>
</body>
(3) 卸载事件off()方法
5. 事件对象的使用
(1) 事件对象的作用
事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁
target 属性可以是注册事件时的元素，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托
(2) 事件对象的属性和方法
- event.type：获取事件的类型
- event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标
- event.preventDefault() 方法：阻止默认行为
- event.stopPropagation() 方法：阻止事件冒泡
- event.which：获取在鼠标单击时，单击的是鼠标的哪个键
(左键报告1，中间键报告2，右键报告3)- event.currentTarget : 冒泡前的当前触发事件的DOM对象, 等同于this.
this和event.target的区别：
js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
.this和event.target都是dom对象
如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和
$(this)的使用、event.target和$(event.target)的使用；
6. 自定义事件
(1) trigger事件
trigger() 方法触发被选元素的指定事件类型。
$(selector).trigger(event,[param1,param2,...])
event:必需。规定指定元素要触发的事件。
可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。
[param1,param2,...]:可选。传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。
$('#elem').on('Aaron', function(event,arg1,arg2) {
alert("自触自定义时间")
});
$('#elem').trigger('Aaron',['参数1','参数2'])
(2) triggerHandler事件
triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。
triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件（比如表单提交）的默认行为，而且只影响第一个匹配元素。
与 trigger() 方法相比的不同之处
- 它不会引起事件（比如表单提交）的默认行为
- .trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。
- 由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。
- 该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。
网友评论