陈先森
2016-12-29 18:31:54浏览 4048
一、jQuery鼠标事件之click与dbclick事件
click方法用于监听用户单击操作；
dbclick方法用于监听用户双击操作。
二、jQuery鼠标事件之mousedown与mouseup事件
mousedown的方法可以监听用户鼠标按下的操作；
mouseup方法可以监听用户鼠标弹起的操作。
用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3。
三、jQuery鼠标事件之mousemove事件
mousemove事件是当鼠标指针移动时触发的，即使是一个像素；
如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题。
四、jQuery鼠标事件之mouseover与mouseout事件
<div id="test">滑动触发<div>
$("#test").mouseover(function() {
//this指向 div元素
});
< div id="test">点击触发<div>
$("#test").mouseover(11111,function(e) {
//this指向 div元素
//e.date => 11111 传递数据
});
五、jQuery鼠标事件之mouseenter与mouseleave事件
（1）mouseenter监听用户移动到内部的操作；
mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发，不会发生同mouseover的冒泡问题；
（2）mouseleave监听用户移动到外部的操作。
六、jQuery鼠标事件之hover事件
$(selector).hover(handlerIn, handlerOut)
//handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
//handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数
七、jQuery鼠标事件之focusin事件
用户在点击聚焦的时候，如果开发者需要捕获这个动作的时候，jQuery提供了一个focusin事件
八、jQuery鼠标事件之focusout事件
当一个元素，或者其内部任何一个元素失去焦点的时候，如果开发者需要捕获这个动作，jQuery提供了一个focusout事件。
九、jQuery表单事件之blur与focus事件（不支持冒泡）
同样用于处理表单焦点的事件还有blur与focus事件。
它们之间的本质区别:是否支持冒泡处理。
focus()在元素本身产生，focusin()在元素包含的元素中产生。
十、jQuery表单事件之change事件
<input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作。
十一、jQuery表单事件之select事件
select事件只能用于<input>元素与<textarea>元素。
十二、jQuery表单事件之submit事件
form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为
传统的方式是调用事件对象 e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可。
jQuery处理如下：
$("#target").submit(function(data) {
return false; //阻止默认行为，提交表单
});
十三、jQuery键盘事件之keydown()与keyup()事件
当用户在一个元素上第一次按下键盘上字母键的时候，就会触发它。
当用户在一个元素上第一次松手键盘上的键的时候，就会触发它。
十四、jQuery键盘事件之keypress()事件
keydown事件触发在文字还没敲进文本框，这时如果在keydown事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本。当浏览器捕获键盘输入时，还提供了一个keypress的响应。
区别：KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。
十五、on()的多事件绑定
$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式
（1）多个事件绑定同一个函数：
$("#elem").on("mouseover mouseout",function(){ });
（2）多个事件绑定不同函数：
$("#elem").on({
mouseover:function(){},
mouseout:function(){},
});
（3）将数据传递到处理程序：
function greet( event ) {
alert( "Hello " + event.data.name ); //Hello 慕课网
}
$( "button" ).on( "click", { name: "慕课网"}, greet );
（4）on()的高级用法：
事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数。
//给body绑定一个click事件
//没有直接a元素绑定点击事件
//通过委托机制，点击a元素的时候，事件触发
$('body').on('click', 'a', function(e) {
alert(e.target.textContent)
})
十六、卸载事件off()方法
当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除。
十七、jQuery事件对象的作用
//需求：给每个li上绑定事件太麻烦，使用事件的委托机制，给ul绑定事件。在触发li的时候把这个事件往上冒泡到ul上，因为ul上绑定事件响应所以就能够触发这个动作了。
<ul>
<li class="even1"></li>
<li class="even2"></li>
<li class="even2"></li>
.........
</ul>
event是实际的触发事件的元素，而this是给哪个元素绑定了事件，结合这个例子 event是li，this是ul。
十八、jQuery事件对象的属性和方法
（1）event.type：获取事件的类型：
$("a").click(function(event) {
alert(event.type); // "click"事件
});
（2）event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标；
（3）event.preventDefault() 方法：阻止默认行为；
（4）event.stopPropagation() 方法：阻止事件冒泡；
（5）event.which：获取在鼠标单击时，单击的是鼠标的哪个键；
（6）event.currentTarget : 在事件冒泡过程中的当前DOM元素；
this应该是不变的（相当于上面的ul），event.target才是变化的（相当于上面的li）。
十九、jQuery自定义事件之trigger事件
"trigger" 在英文中意为触发。一个元素接上".trigger",就意味着程序会执行命令触发已设定好的触发事件如“click”，而不需要你去人为的去点击触发。比如说你写一个定时器，每隔一定时间自动点击一下按钮，就可以使用"trigger"函数来自动点击。
二十、jQuery自定义事件之triggerHandler事件
trigger事件还有一个特性：会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡。
triggerHandler与trigger的用法是一样的，重点看不同之处：
（1）triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()；
（2）trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素；
（3）使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理；
（4）与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined。
ps：这节教程看着有点乱，先这样整理，后续再去W3C复习下。
别忘了哟！！！