jquery:
jQuery鼠标事件之click与dblclick事件
click() 用于监听用户单击操作
*具体使用:
$(“#button1”).click( function(){ ... } )
每次绑定的元素触发点击操作会执行回调函数，这样可以针对事件的反馈做很多操作，方法中的this是指向了绑定事件的元素
$(“#button1”).click( function(e){ alert(e.target.textContent ... )} )
$(“#button1”).click([‘eventData’, …], function(e){ alert(e.data) … } )
可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
//e.data => eventData 传递数据
$(“#button1”).click()
手动指定触发事件
dblclick() 用于监听用户双击操作
方法的用法click()类似
click事件触发需要以下几点：
click事件其实是由mousedown与mouseup 2个动作构成，所以点击的动作只有在松手后才触发
dblclick事件触发需要以下几点：
dblclick又是由2个click叠加而来的，所以dblclick事件只有在满足以下条件的情况下才能被触发
鼠标指针在元素里面时点击。
鼠标指针在元素里面时释放。
鼠标指针在元素里面时再次点击，点击间隔时间，是系统而定。
鼠标指针在元素里面时再次释放。
注意：在同一元素上同时绑定 click 和 dblclick 事件是不可取的。
各个浏览器事件触发的顺序是不同的，一些浏览器在dblclick之前接受两个 click 事件 ，而一些浏览器只接受一个 click 事件。用户往往可通过不同的操作系统和浏览器配置双击灵敏度
jQuery鼠标事件之mousedown与mouseup事件
具体使用与click事件相类似
mousedown
mousedown强调是 按下 触发
任何鼠标按钮被按下时都能触发mousedown事件
用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3
mouseup
mouseup强调是 松手 触发，与mousedown是相反的
mouseup与mousedown组合起来就是click事件
任何鼠标按钮松手时都能触发mouseup事件
用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3
注意：如果在空白处点击鼠标 按住移动到button或者其他元素上松开，将会触发button或者其他元素的mouseup
mousedown则是在哪里按下在哪里触发
jQuery鼠标事件之mousemove事件
具体使用与click事件相同
mousemove事件是当鼠标指针移动时触发的，即使是一个像素
如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题
jQuery鼠标事件之mouseover与mouseout事件
具体使用与click事件相同
mouseover
监听用户移入操作
*注意 <div><p></p></div>
当div元素与p元素都设置mouseover事件时:
鼠标移动到<p>元素区域时会进行冒泡触发，就是<p>元素会一直往上找父元素及以上的mouseover事件, 如果父元素有mouseover事件就会被触发。
当移出<p>元素区域时，也会重新从<div>元素开始向上冒泡触发一遍mouseover事件。
mouseout
监听用户移出操作
与mouseover相类似，也会进行冒泡式触发，如：div元素区域进入p元素区域时，div开始冒泡触发一次，当移出p元素时，p元素开始冒泡触发一次mouseout
jQuery鼠标事件之mouseenter与mouseleave事件
mouseenter
监听用户移入操作
<div><p></p></div>：
与mouseover事件相类似，不过不会进行冒泡触发，也就是说从div元素进入p元素区域时，不会再触发一次div的mouseenter事件。
当从p元素区域移出到div区域时，也不会再触发div及其祖父类的mouseenter事件。
mouseleave
监听用户移出操作
与mouseout相似，不过不会进行冒泡事触发。当div进入p时，不会触发，当移出p时，触发p的mouseleave事件，再移出div时，才会触发div的mouseleave事件
jQuery鼠标事件之hover事件
hover事件实现了移入移出的切换效果，相当于mouseenter与mouseleave两个事件的结合。
$(selector).hover(handlerIn, handlerOut)
handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数
*例（移入移出切换颜色）
$("p").hover(
function(){
$(this).css("background","red");
},
function(){
$(this).css("background","#bbffaa");
}
);
jQuery鼠标事件之focusin事件
当一个元素，或者其内部任何一个元素获得焦点的时候，例如：input元素，用户在点击聚焦的时候，如果开发者需要捕获这个动作的时候，jQuery提供了一个focusin事件
$ele.focusin()
指定触发绑定的$ele元素的focusin()事件一般用的比较少
$ele.focusin( handler )
为$ele元素绑定回调 handler函数，这样可以针对事件的反馈做很多操作
$ele.focusin( [eventData ], handler )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
*注：该事件会进行冒泡触发。
jQuery鼠标事件之focusout事件
当一个元素，或者其内部任何一个元素失去焦点的时候，比如input元素，用户在点击失去焦的时候，如果开发者需要捕获这个动作，jQuery提供了一个focusout事件
$ele.focusout()
$ele.focusout( handler )
$ele.focusout( [eventData ], handler )
与focusin事件使用相同，只是focusin事件是得到焦点时，focusout是失去焦点时。
*注：该事件会进行冒泡触发。
jQuery表单事件之blur与focus事件
focus与focusin相类似，都是获得焦点时触发。
blur与focusout相类似，都是失去焦点时触发。
focus，blur与focusin，focusout之间最本质的区别就是是否支持冒泡处理。focus，blur不会被冒泡触发
jQuery表单事件之change事件
<input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作
.change( function(e){ alert(e.target.value) } )
<input>元素
监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。
<textarea>元素
多行文本输入框，当有改变时，失去焦点后触发change事件
<select>元素
对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发
jQuery表单事件之select事件
当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
*注意 select事件只能用于文本类型的<input>元素与<textarea>元素
.select()
触发元素绑定的select事件:
$ele.select( handler(eventObject) )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
$ele.select( [eventData ], handler(eventObject) )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
jQuery表单事件之submit事件
通过在<form>元素上绑定submit事件，开发者可以监听到用户的提交表单的的行为
$ele.submit()
指定触发ele元素绑定的submit事件
$ele.submit( handler(eventObject) )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
$ele.submit( [eventData ], handler(eventObject) )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
具体能触发submit事件的行为：
<input type="submit">
<input type="image">
<button type="submit">
当某些表单元素获取焦点时，敲击Enter（回车键）
*注意 $("#target").submit(function(data) {
return false; //阻止默认行为，提交表单
});
jQuery键盘事件之keydown()与keyup()事件
一般用于表单元素
keydown事件：
键盘按键按下时触发
$elem.keydown() //手动触发已绑定的事件
$elem.keydown( handler(eventObject) ) //直接绑定事件
$elem.keydown( [eventData ], handler(eventObject) ) //传递参数
keyup事件：
键盘按键松开时触发
使用方法与keydown使用相同。
*注意：kewdown事件触发在键盘输入之前处理，所以，当监听键盘按键，获取输入的值的时候，获取的会比当前少一个字符
例如文本框现已输入“123”当按下“4”的时候，获取的只是”123”,原因就是因为keydown事件在输入”4”之前处理的。
同理，keyup则是在之后处理，获取的是“1234”。
keydown事件触发在文字还没敲进文本框，这时如果在keydown事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成， 获得的是触发键盘事件后的文本
jQuery键盘事件之keypress()事件
与keydown相似，也是监听键盘按键，获取输入的值
与keydown区别：
只能捕获单个字符，不能捕获组合键
无法响应系统功能键（如delete，backspace）
不区分小键盘和主键盘的数字字符
总之，KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。
*根本区别：
1.系统由KeyDown返回键盘的代码, 然后由TranslateMessage函数翻译成成字符, 由KeyPress返回字符值. 因此在KeyDown中返回的是键盘的代码, 而KeyPress返回的是ASCII字符.
2.所以根据你的目的, 如果只想读取字符, 用KeyPress, 如果想读各键的状态, 用KeyDown.
3.当按下松开一个字符键的时候，会按keydown->keypress->keyup依次触发，如果用户按下了一个字符键不放，就会重复触发keydown和keypress事件，直到用户松开该键为止。
4.在keyup 事件中无法阻止浏览器默认事件，因为在keypress时，浏览器默认行为已经完成，即将文字输入文本框（尽管这时还没显示），这个时候不管是preventDefault还是 returnValue = false，都不能阻止在文本框中输入文字的行为，如要阻止默认行为，必须在keydown或keypress时阻止
5.当用户按下非字符键时，会按keydown->keyup依次触发，如果用户按下了一个非字符键不放，就会重复触发keydown事件，直到用户松开该键为止
keydown,keypress,keyup的区分可以参照以下：
event对象包含一个keyCode属性和一个charCode属性
当捕捉的是keydown和keyup事件时，keyCode表示的就是你具体按的键(也称为virtual keycode)，charCode为0
当捕捉的是keypress事件时，keyCode为0，charCode指的是你按下的字符（而 IE 只有一个KeyCode属性，它指的是你键入的字符(character code))
鉴于 IE 和 FF 中的区别，建议只使用keydow和keyup事件
http://www.jianshu.com/p/8f839f558319
on()的多事件绑定
jQuery on()方法是官方推荐的绑定事件的一个方法。
.on( events ,[ selector ] ,[ data ], handler(eventObject) )
事件的具体使用：
1. $("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式
2. $("#elem").on("mouseover mouseout",function(){ });
多个事件绑定同一个函数。通过空格分离，传递不同的事件名，可以同时绑定多个事件
3. $("#elem").on({
mouseover:function(){},
mouseout:function(){}
});
多个事件绑定不同函数。通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法
4. $("#test3").on("mouseenter",{
"name":"ysz",
"money":"99999999999999999"
},function(e){
$(this).text("姓名："+e.data.name+" 财富："+e.data.money);
});
将数据传递到处理程序。
5. 委托机制
<div class="left">
<p class="aaron">
<a>目标节点</a> //点击在这个元素上
</p>
</div>
$("div").on("click","p",fn)
事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。
如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数
卸载事件off()方法
通过.on()绑定的事件处理程序
通过off() 方法移除该绑定
$("elem").off("mousedown")
删除一个事件
$("elem").off("mousedown mouseup")
删除多个事件，事件之间事件名用空格分割；
$("elem").off()
快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁
jQuery事件对象的作用
事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁
例： <ul>
<li class="even1"></li>
<li class="even2"></li>
<li class="even2"></li>
.........
</ul>
ul有N个子元素li(这里只写了3个)，如果我要响应每一个li的事件，那么常规的方法就是需要给所有的li都单独绑定一个事件监听，这样写法很符合逻辑，但是同时有显得繁琐
因为li都有一个共同的父元素，而且所有的事件都是一致的，这里我们可以采用要一个技巧来处理，也是常说的"事件委托"
既然事件对象是跟当前触发元素息息相关的，所以我们就能从里面相关的信息，从事件对象中找到 event.target
target 属性可以是注册事件时的元素，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托
event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素
* if(this==e.target){
alert("yes");
}
jQuery事件对象常用的属性和方法
event.type：获取事件的类型
$("a").click(function(event) {
alert(event.type); // "click"事件
});
event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标
通过这2个属性，可以确定元素在当前页面的坐标值，鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离，
简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
event.preventDefault() 方法：阻止默认行为
这个用的特别多，在执行这个方法后，如果点击一个链接（a标签），浏览器不会跳转到新的 URL 去了。
我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了
event.stopPropagation() 方法：阻止事件冒泡
事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数
event.which：获取在鼠标单击时，单击的是鼠标的哪个键
event.which 将 event.keyCode 和 event.charCode 标准化了。event.which也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告1，中间键报告2，右键报告3
event.currentTarget : 在事件冒泡过程中的当前DOM元素
冒泡前的当前触发事件的DOM对象, 等同于this.
this和event.target的区别：
js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
.this和event.target都是dom对象
如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；
jQuery自定义事件之trigger事件
mousedown、click、keydown等等这类型的事件都是浏览器提供的，通俗叫原生事件，这类型的事件是需要有交互行为才能被触发。如果不同用户交互是否能在某一时刻自动触发该事件呢？ 正常来说是不可以的，但是jQuery解决了这个问题，提供了一个trigger方法来触发浏览器事件
$('#elem').trigger('click');
通过trigger方法就可以调用到click了，挺简单！
简单来讲trigger就是：根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
trigger除了能够触发浏览器事件，同时还支持自定义事件，并且自定义时间还支持传递参数
$('#elem').on('Aaron', function(event,arg1,arg2) {
alert("自触自定义时间")
});
$('#elem').trigger('Aaron',['参数1','参数2'])
trigger触发浏览器事件与自定义事件区别
1. 自定义事件对象，是jQuery模拟原生实现的
2. 自定义事件可以传递参数
jQuery自定义事件之triggerHandler事件
trigger事件还有一个特性：会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡
trigger事件是具有触发原生与自定义能力的，但是存在一个不可避免的问题： 事件对象event无法完美的实现，毕竟一个是浏览器给的，一个是自己模拟的。尽管 .trigger() 模拟事件对象，但是它并没有完美的复制自然发生的事件，若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替
triggerHandler与trigger的用法区别
triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()
.trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined
* alert提示triggerHandler 结果id=msg元素显示123
$("input").on("aaa",function(e,msg) {
alert("aaa: "+msg);
return "123";
});
$("button:eq(1)").click(function() {
$("#msg").text($("input").triggerHandler("aaa","triggerHandler"))
});
976
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
