jQuery事件处理

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"))

    });