jQuery篇之操作jQuery对象（事件）
2019-10-08 本文已影响0人
平安喜乐698
目录
1.
- 事件对象e
事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁
在不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异。jQuery根据 W3C 标准规范了事件对象，所以在jQuery事件回调方法中获取到的事件对象是经过兼容后处理过的一个标准的跨浏览器对象
event.target
触发事件的元素
event.type
事件的类型
event.pageX 和 event.pageY
获取鼠标当前相对于页面的坐标
以页面为参考点,不随滑动条移动而变化
event.which
获取在鼠标单击时，单击的是鼠标的哪个键
左键报告1，中间键报告2，右键报告3
event.currentTarget
在事件冒泡过程中的当前DOM元素
this和event.target
都是DOM对象，转换$(event.target)、$(this)
区别：js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接触发事件的目标DOM元素；
event.preventDefault() 方法
阻止默认行为
event.stopPropagation() 方法
阻止事件冒泡（向上传递）
- 绑定、解绑
on
// 快捷方式
$("#elem").click(function(){})
// on方式
$("#elem").on('click',function(){})
委托机制(事件绑定在最上层div元素上，点击a事件将往上传递，触发)
$('div').on('click', 'a', function(e) {
alert(e.target.textContent)
})
$('div').on('click', function(e) {
alert(e.target.textContent)
})
多个事件绑定同一函数
$("#elem").on("mouseover mouseout",function(){ });
多个事件绑定不同函数
$("#elem").on({
mouseover:function(){},
mouseout:function(){}
});
传递数据
function greet( event ) {
alert( "Hello " + event.data.name ); //Hello cx
}
$( "button" ).on( "click", {
name: "cx"
}, greet );
解绑
$("elem").off()
$("elem").off("mousedown")
$("elem").off("mousedown mouseup")
- 手动触发（自定义事件）
trigger
手动触发（根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为）
$("button:first").click(function(event,bottonName) {
bottonName = bottonName || 'first';
});
// 通过自定义事件调用
$("button:last").click(function() {
$("button:first").trigger('click','last'); // 手动触发
});
无参
$('#elem').trigger('click');
传参
$('#elem').on('Aaron', function(event,arg1,arg2) {
alert("自触自定义时间")
});
$('#elem').trigger('Aaron',['参数1','参数2'])
会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡
triggerHandler
$("input").triggerHandler("select");
triggerHandler和trigger的区别
triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()
.trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined
click、dbclick （单击、双击）
$("ele").click(function(){
alert('触发指定事件')
})
$("ele2").click(function(){
$("ele").click() //手动指定触发事件
});
$("#customId").click(11111,function(e) {
// this指向 元素
// e.data => 11111 传递数据
alert(e.target.textContent)
});
// 方法抽离
function cusMethod(e) {
alert(e.data) //1111
}
function a() {
$("button:eq(2)").click(1111, cusMethod)
}
a();
click事件其实是由mousedown与mouseup 2个动作构成，所以点击的动作只有在松手后才触发
dbclick和click用法类似。
由2个click叠加而来,需满足以下条件
鼠标指针在元素里面时点击。
鼠标指针在元素里面时释放。
鼠标指针在元素里面时再次点击，点击间隔时间，是系统而定。
鼠标指针在元素里面时再次释放。
鼠标相关
mousedown、mouseup
按下鼠标
如果在一个元素按住了鼠标不放，并且拖动鼠标离开这个元素，并释放鼠标键，这仍然是算作mousedown事件
$("button").mousedown(function(){
$("#cusId").mousedown() // 手动指定触发事件
});
$("#test").mousedown(11111,function(e) { // 方法可抽离
//this指向 div元素
//e.data => 11111 传递数据
// e.witch 1：左键，2:中键，3:右键
alert('e.which: ' + e.which)
});
松开鼠标（和以上用法一样）
如果用户在一个元素上按下鼠标按键，并且拖动鼠标离开这个元素，然后释放鼠标键，这仍然是算作mouseup事件
$("button").mouseup(function(){
});
mousedown与mouseup组合起来就是click事件
mousemove
鼠标悬停时调用（和以上用法一样）
$(document).mousemove(function(e){
鼠标的坐标
$("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});
mouseover、mouseout
鼠标位于上方（和以上用法一样）
$("p").mouseover(function(){
});
鼠标移开（和以上用法一样）
$("p").mouseout(function(){
});
元素触发了mouseover，他会一直往上找父辈元素上的mouseover事件，如果父元素有mouseover事件就会被触发。当移动到子节点时，子节点和父辈节点都会触发；当移出子节点到当前节点会再次触发当前节点和当前节点的父辈节点。
mouseenter、mouseleave
鼠标进入（和以上用法一样）
$("p").mouseenter(function(){
});
鼠标离开（和以上用法一样）
$("p").mouseleave(function(){
});
mouseenter事件只会在绑定它的元素上被调用，而不会在子孙节点上被触发。即只有从该节点出去再进入时触发，从该节点的子孙节点出去进入该节点时不触发。
focusin、focusout（获得焦点、失去焦点）
获得焦点（和以上用法一样）
$("ele").focusin(function(){
alert('触发指定事件')
})
失去焦点（和以上用法一样）
$("ele").focusout(function(){
alert('触发指定事件')
})
hover（进入、离开）
$("p").hover( // handlerIn, handlerOut
function() {
$(this).css("background", 'red');
},
function() {
$(this).css("background", '#bbffaa');
}
);
表单相关
focus、blur（获得焦点、失去焦点）
$(".cusInput").focus(function() {
$(this).css('border', '2px solid red')
})
注意：
<div>
<input type="text" />
</div>
div是input的父元素，当它包含的元素input触发了focus（blur）事件时，它就产生了focusin（focusout）事件。
change（内容改变并在失去焦点后触发）
内容改变并在失去焦点后调用
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
select（选中文本后调用）
选中文本后调用
$("input").select(function(){
return false; // 仅用浏览器默认的select事件
});
$("input").select(function(e){
alert(e.target.value)
})
$("#test").select(11111,function(e) {//响应文字选中回调
//this指向 div元素
//e.data => 11111 传递数据
});
$("#bt1").click(function(){
$("input").select(); // 手动触发
})
select事件只能用于<input>元素与<textarea>元素
submit（提交表单时触发）
提交表单时调用
$("form").submit(function(e){
return false; // 阻止提交
});
$("#target").submit(11111,function(data) { //绑定提交表单触发
//data => 1111 //传递的data数据
});
$("#text").click(function(){
$("ele").submit() // 手动触发
});
以下都可触发
<input type="submit">
<input type="image">
<button type="submit">
当某些表单元素获取焦点时，敲击Enter（回车键）
键盘
keydown、keyup（按下键盘按钮、抬起键盘按钮）
按下键盘按钮后调用
$("input").keydown(function(event){
按键的序号
$("div").html("Key: " + event.which);
$("em:first").text(e.target.value); // 总是旧的数据
$("#input2").keydown(); // 手动触发
});
$("#target").keydown(11111,function(data) { //绑定提交表单触发
//data => 1111 //传递的data数据
});
抬起键盘按钮后调用（用法同上）
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
理论上它可以绑定到任何元素，但keydown/keyup事件只是发送到具有焦点的元素上，不同的浏览器中，可获得焦点的元素略有不同，但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的。
keypress（按下并抬起键盘按钮）
按下并抬起键盘按钮后调用
$("input").keypress(function(){
$("span").text(i+=1);
});
keypress事件与keydown和keyup的主要区别
只能捕获单个字符，不能捕获组合键
无法响应系统功能键（如delete，backspace）
不区分小键盘和主键盘的数字字符
即：KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。
