目次

第1章 事宜引见

第2章 鼠标事宜

第3章 表单事宜

第4章 键盘事宜

第5章 事宜的绑定息争绑

第6章 事宜对象的运用

第7章 自定义事宜

click与dbclick事宜

用交互操纵中，最简朴直接就是点击操纵。jQuery供应了两个要领一个是click要领用于监听用户单击操纵，另一个要领是dbclick要领用于监听用户双击操纵。这两个要领的用户是类似，下面以click()事宜为例

运用上异常简朴：

要领一：$ele.click()

绑定$ele元素，不带任何参数平常是用来指定触发一个事宜，用的比较少

<div id="test">点击触发<div>
$("ele").click(function(){
    alert('触发指定事宜')
})
$("#text").click(function(){
     $("ele").click()  //手动指定触发事宜 
});

要领二：$ele.click( handler(eventObject) )

绑定$ele元素，每次$ele元素触发点击操纵会实行回调 handler函数，如许可以针对事宜的反应做许多操纵了，要领中的this是指向了绑定事宜的元素

<div id="test">点击触发<div>
$("#text").click(function() {
    //this指向 div元素
});

要领三：$ele.click( [eventData ], handler(eventObject) )

运用与要领二一致，不过可以吸收一个数据参数，如许的处置惩罚是为了处理差别作用域下数据通报的题目

<div id="test">点击触发<div>
$("#text").click(11111,function(e) {
    //this指向 div元素
    //e.date  => 11111 通报数据
});

dbclick()的用法和click()的用法是类似的，可以参考以上click()的用法。

dbclick与click事宜差别的是：

click事宜触发须要以下几点：

• click事宜现实上是由mousedown与mouseup 2个行动组成，所以点击的行动只要在放手后才触发

PS:mousedown和mouseup下一节会讲到

dblclick事宜触发须要以下几点：**

dblclick又是由2个click叠加而来的，所以dblclick事宜只要在满足以下前提的状况下才被触发

• 鼠标指针在元素内里时点击。

• 鼠标指针在元素内里时开释。

• 鼠标指针在元素内里时再次点击，点击间隔时候，是体系而定。

• 鼠标指针在元素内里时再次开释。

注重：在统一元素上同时绑定 click 和 dblclick 事宜是不可取的。各个浏览器事宜触发的递次是差别的，一些浏览器在dblclick之前吸收两个 click 事宜 ，而和别的浏览器只吸收一个 click 事宜。用户每每可经由历程差别的操纵体系和浏览器设置双击灵敏度

mousedown与mouseup事宜

用交互操纵中，最简朴直接就是点击操纵，因而jQuery供应了一个mousedown的快速要领可以监听用户点击的操纵，与其对应的另有一个要领mouseup快速要领可以监听用户点击的操纵。两种要领用法类似，一下以mousedown()为例

运用上异常简朴：

要领一：$ele.mousedown()

绑定$ele元素，不带任何参数平常是用来指定触发一个事宜，可以平经常使用的比较少

<div id="test">点击触发<div>
$("ele").mousedown(function(){
    alert('触发指定事宜')
})
$("#text").mousedown(function(){
     $("ele").mousedown()  //手动指定触发事宜 
});

要领二：$ele.mousedown( handler(eventObject) )

绑定$ele元素，每次$ele元素触发点击操纵会实行回调 handler函数

如许可以针对事宜的反应做许多操纵了

<div id="test">点击触发<div>
$("#text").mousedown(function() {
    //this指向 div元素
});

要领三：$ele.mousedown( [eventData ], handler(eventObject) )

运用与要领二一致，不过可以吸收一个数据参数，如许的处置惩罚是为了处理差别作用域下数据通报的题目

<div id="test">点击触发<div>
$("#text").mousedown(11111,function(e) {
    //this指向 div元素
    //e.date  => 11111 通报数据
});

mousedown事宜触发须要以下几点：

• mousedown强调是按下触发

• 假如在一个元素按住了鼠标不放，而且拖动鼠标脱离这个元素，并开释鼠标键，这仍然是算作mousedown事宜

• 任何鼠标按钮被按下时都能触发mousedown事宜

• 用event 对象的which区分按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

mouseup事宜触发须要以下几点：**

• mouseup强调是放手触发，与mousedown是相反的

• mouseup与mousedown组合起来就是click事宜

• 假如用户在一个元素上按下鼠标按键，而且拖动鼠标脱离这个元素，然后开释鼠标键，这仍然是算作mouseup事宜

• 任何鼠标按钮放手时都能触发mouseup事宜

• 用event 对象的which区分按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

别的须要注重的是：

click与mousedown的区分：**

• click事宜现实上是由mousedown于mouseup 2个行动组成，所以点击的行动只要在放手后才触发

mousemove事宜

用交互操纵中，常常须要晓得用户是不是有挪动的操纵。基于挪动的机制可以做出拖动、拖拽一系列的效果出来。针对挪动事宜，jQuery供应了一个mousemove的快速要领可以监听用户挪动的的操纵

运用上异常简朴：

要领一：$ele.mousemove()

绑定$ele元素，不带任何参数平常是用来指定触发一个事宜，用的比较少

<div id="test">点击触发<div>
$("ele").mousemove(function(){
    alert('触发指定事宜')
})
$("#text").click(function(){
     $("ele").mousemove()  //指定触发事宜 
});

要领二：$ele.mousemove( handler(eventObject) )

绑定$ele元素，每次$ele元素触发点击操纵会实行回调 handler函数

如许可以针对事宜的反应做许多操纵了

<div id="test">滑动触发<div>
$("#text").mousemove(function() {
    //this指向 div元素 
});

要领三：$ele.mousemove( [eventData ], handler(eventObject) )

运用与要领二一致，不过可以吸收一个数据参数，如许的处置惩罚是为了处理差别作用域下数据通报的题目

<div id="test">点击触发<div>
$("#text").mousemove(11111,function(e) {
    //this指向 div元素
    //e.date  => 11111 通报数据
});

mousemove事宜触发须要以下几点：

• mousemove事宜是当鼠标指针挪动时触发的，即使是一个像素

• 假如处置惩罚器做任何严峻的处置惩罚，或许假如该事宜存在多个处置惩罚函数，这可以形成浏览器的严峻的机能题目

mouseenter与mouseleave事宜

用交互操纵中，常常须要晓得用户操纵鼠标是不是有移到元素内部或是元素外部，因而jQuery供应了一个mouseenter和mouseleave的快速要领可以监听用户挪动到内部的操纵

运用上异常简朴，三种参数通报体式格局与mouseover和mouseout是如出一辙的，所以这里不再反复，重要讲讲区分，下面以mouseenter为例：

mouseenter JavaScript事宜是Internet Explorer专有的。由于该事宜在日常平凡很有效，jQuery的模仿这一事宜，以便它可用于一切浏览器。该事宜在鼠标移入到元素上时被触发。任何HTML元素都可以吸收此事宜。

mouseenter事宜和mouseover的区分

症结点就是：冒泡的体式格局处置惩罚题目

简朴的例子：

mouseover为例：

<div class="aaron2">
    <p>鼠标脱离此地区触发mouseleave事宜</p>
</div>

假如在p元素与div元素都绑定mouseover事宜，鼠标在脱离p元素，然则没有脱离div元素的时候，触发的效果:

1. p元素响应事宜

2. div元素响应事宜

这里的题目是div为何会被触发？ 缘由就是事宜冒泡的题目，p元素触发了mouseover，他会一向往上找父元素上的mouseover事宜，假如有全触发了

所以在这类状况下面，jQuery引荐我们运用 mouseenter事宜

mouseenter事宜只会在绑定它的元素上被挪用，而不会在子女节点上被触发

这就是最实质的区分.

hover事宜

学了mouseover、mouseout、mouseenter、mouseleave事宜，也理解了四个事宜的相同点与差别点，如今可以用来给元素做一个简朴的切换效果

在元素上移进移出切换其换色，平常经由历程2个事宜合营就可以到达，这里用mouseenter与mouseleave，如许可以防备冒泡题目

$(ele).mouseenter(function(){
     $(this).css("background", '#bbffaa');
 })
$(ele).mouseleave(function(){
    $(this).css("background", 'red');
})

如许目的是到达了，代码轻微有点多，关于如许的简朴逻辑jQuery直接供应了一个hover要领，可以便利处置惩罚

只须要在hover要领中通报2个回调函数就可以了，不须要显现的绑定2个事宜

$(selector).hover(handlerIn, handlerOut)

• handlerIn(eventObject)：当鼠标指针进入元素时触发实行的事宜函数

• handlerOut(eventObject)：当鼠标指针脱离元素时触发实行的事宜函数

focusin事宜

当一个元素，或许其内部任何一个元素取得核心的时候，比方：input元素，用户在点击聚焦的时候，假如开发者须要捕捉这个行动的时候，jQuery供应了一个focusin事宜

运用上异常简朴：

要领一：$ele.focusin()

绑定$ele元素，不带任何参数平常是用来指定触发一个事宜，平经常使用的比较少

<div id="test">点击触发<div>
$("ele").focusin(function(){
    alert('触发指定事宜')
})
$("#text").mouseup(function(){
     $("ele").focusin()  //指定触发事宜 
});

要领二：$ele.focusin( handler )

绑定$ele元素，每次$ele元素触发点击操纵会实行回调 handler函数

如许可以针对事宜的反应做许多操纵了

<div id="test">点击触发<div>
$("#text").focusin(function() {
    //this指向 div元素
});

要领三：$ele.focusin( [eventData ], handler )

运用与要领二一致，不过可以吸收一个数据参数，如许的处置惩罚是为了处理差别作用域下数据通报的题目

<div id="test">点击触发<div>
$("#text").focusin(11111,function(e) {
    //this指向 div元素
    //e.date  => 11111 通报数据
});

blur与foucus事宜

在之前2我们了解了表单处置惩罚事宜focusin事宜与focusout事宜，一样用于处置惩罚表单核心的事宜另有blur与focus事宜

它们之间的实质区分:

是不是支撑冒泡处置惩罚

举个简朴的例子

<div>
  <input type="text" />
</div>

个中input元素可以触发focus()事宜

div是input的父元素，当它包含的元素input触发了focus事宜时，它就发作了focusin()事宜。

focus()在元素自身发作，focusin()在元素包含的元素中发作

blur与focusout也亦是云云

change事宜

<input>元素，<textarea>和<select>元素都是可以挑选值一些转变，开发者可以经由历程change事宜去监听这些转变的行动

input元素

监听value值的变化，当有转变时，落空核心后触发change事宜

select元素

关于下拉挑选框，复选框和单选按钮，当用户用鼠标作出挑选，该事宜马上触发

textarea元素

多行文本输入框，当用户用鼠标点击时，该事宜马上触发

 change事宜很简朴，不过就是注重下触发的前后行动

    //示例    
    //监听input值的转变
    $('.target1').change(function(e) {
        $("#result").html(e.target.value)
    });

    //监听select：
    $(".target2").change(function(e) {
        $("#result").html(e.target.value)
    })

     //监听textarea：
    $(".target3").change(function(e) {
        $("#result").html(e.target.value)
    })

select事宜

当 textarea 或文本范例的 input 元素中的文本被挑选时，会发作 select 事宜。

当 textarea 或文本范例的 input 元素中的文本被挑选时，会发作 select 事宜。
这个函数会挪用实行绑定到select事宜的一切函数，包含浏览器的默许行动。可以经由历程在某个绑定的函数中返回false来防备触发浏览器的默许行动。

select事宜只能用于<input>元素与<textarea>元素

运用上异常简朴：

要领一：.select()

触发元素的select事宜:

$("input").select();

要领二：$ele.select( handler(eventObject) )

绑定$ele元素，每次$ele元素触发点击操纵会实行回调 handler函数

如许可以针对事宜的反应做许多操纵了

<input id="test" value="笔墨选中"></input>
$("#text").select(function() { //响应笔墨选中回调
    //this指向 input元素 
});

要领三：$ele.select( [eventData ], handler(eventObject) )

运用与要领二一致，不过可以吸收一个数据参数，如许的处置惩罚是为了处理差别作用域下数据通报的题目

<input id="test" value="笔墨选中"></input>
$("#text").select(11111,function(e) {//响应笔墨选中回调
    //this指向 div元素 
   //e.date  => 11111 通报数据
});

submit事宜

提交表单是一个最常见的营业需求，比方用户注册，一些信息的输入都是须要表单的提交。一样的有时候开发者须要在表单提交的时候过滤一些的数据、做一些必要的操纵（比方：考证表单输入的正确性，假如毛病就阻挠提交，重新输入）此时可以经由历程submit事宜，监听下提交表单的这个行动

运用上异常简朴，与基础事宜参数处置惩罚保持一致

要领一：$ele.submit()

绑定$ele元素，不带任何参数平常是用来指定触发一个事宜，用的比较少

<div id="test">点击触发<div>
$("ele").submit(function(){
    alert('触发指定事宜')
})
$("#text").click(function(){
     $("ele").submit()  //指定触发事宜 
});

要领二：$ele.submit( handler(eventObject) )

绑定$ele元素，每次$ele元素触发点击操纵会实行回调 handler函数

如许可以针对事宜的反应做许多操纵了

<form id="target" action="destination.html">
  <input type="submit" value="Go" />
</form>
$("#target").submit(function() { //绑定提交表单触发
    //this指向 from元素 
});

要领三：$ele.submit( [eventData ], handler(eventObject) )

运用与要领二一致，不过可以吸收一个数据参数，如许的处置惩罚是为了处理差别作用域下数据通报的题目

<form id="target" action="destination.html">
  <input type="submit" value="Go" />
</form>
$("#target").submit(11111,function(data) { //绑定提交表单触发
    //data => 1111 //通报的data数据
});

经由历程在<form>元素上绑定submit事宜，开发者可以监听到用户的提交表单的的行动

详细能触发submit事宜的行动：

• <input type=”submit”>

• <input type=”image”>

• <button type=”submit”>

• 当某些表单元素猎取核心时，敲击Enter（回车键）

上述这些操纵下，都可以截获submit事宜。

这里须要迥殊注重：

form元素是有默许提交表单的行动，假如经由历程submit处置惩罚的话，须要制止浏览器的这个默许行动
传统的体式格局是挪用事宜对象  e.preventDefault() 来处置惩罚， jQuery中可以直接在函数中末了末端return false即可

jQuery处置惩罚以下：

$("#target").submit(function(data) { 
   return false; //阻挠默许行动，提交表单
});

keydown()与keyup()事宜

鼠标有mousedown,mouseup之类的事宜，这是依据人的手势行动剖析的2个触发行动。相对应的键盘也有这类事宜，将用户行动剖析成2个行动，键盘按下与放手，针对如许的2种行动，jQuery离别供应了对应keydown与keyup要领来监听

keydown事宜：

当用户在一个元素上第一次按下键盘上字母键的时候，就会触发它。运用上异常简朴，与基础事宜参数处置惩罚保持一致，这里运用不在反复了，列出运用的要领

//直接绑定事宜
$elem.keydown( handler(eventObject) )
//通报参数
$elem.keydown( [eventData ], handler(eventObject) )
//手动触发已绑定的事宜
$elem.keydown()

keyup事宜：

当用户在一个元素上第一次放手键盘上的键的时候，就会触发它。运用要领与keydown是一致的只是触发的前提是要领的

注重：

• keydown是在键盘按下就会触发

• keyup是在键盘放手就会触发

• 理论上它可以绑定到任何元素，但keydown/keyup事宜只是发送到具有核心的元素上，差别的浏览器中，可取得核心的元素略有差别，然则表单元素老是能猎取核心，所以关于此事宜范例表单元素是最合适的。

keypress()事宜

在input元素上绑定keydown事宜会发明一个题目：

每次猎取的内容都是之前输入的，当前输入的猎取不到

keydown事宜触发在笔墨还没敲进文本框，这时候假如在keydown事宜中输出文本框中的文本，获得的是触发键盘事宜前的文本，而keyup事宜触发时悉数键盘事宜的操纵已完成，取得的是触发键盘事宜后的文本

当浏览器捕捉键盘输入时，还供应了一个keypress的响应，这个跟keydown是异常类似，这里运用请参考keydown这一节，详细说说差别点

keypress事宜与keydown和keyup的重要区分

• 对中文输入法支撑不好，没法响应中文输入

• 没法响应体系功能键（如delete，backspace）

• 由于前面两个限定，keyCode与keydown和keyup不是很一致

总而言之，

KeyPress重要用来吸收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事宜历程可以处置惩罚任何不被 KeyPress 辨认的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。

on()的多事宜绑定

之前学的鼠标事宜，表单事宜与键盘事宜都有个特征，就是直接给元素绑定一个处置惩罚函数，一切这类事宜都是属于快速处置惩罚。掀开源码实在可以看到，一切的快速事宜在底层的处置惩罚都是经由历程一个”on”要领来完成的。jQuery on()要领是官方引荐的绑定事宜的一个要领。

基础用法：.on( events , selector )**

最常见的给元素绑定一个点击事宜，对照下一下快速体式格局与on体式格局的差别

$("#elem").click(function(){})  //快速体式格局
$("#elem").on('click',function(){}) //on体式格局

最大的差别点就是on是可以自定义事宜名，固然不单单议只是怎样，继承往下看

多个事宜绑定统一个函数

 $("#elem").on("mouseover mouseout",function(){ });

经由历程空格星散，通报差别的事宜名，可以同时绑定多个事宜

多个事宜绑定差别函数

$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){},
});

经由历程空格星散，通报差别的事宜名，可以同时绑定多个事宜，每个事宜实行本身的回调要领

将数据通报到处置惩罚顺序

function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello ulson
}
$( "button" ).on( "click", {
  name: "ulson"
}, greet );

可以经由历程第二参数（对象），当一个事宜被触发时，要通报给事宜处置惩罚函数的

Q&A

.bind()是直接绑定在元素上

.live()则是经由历程冒泡的体式格局来绑定到元素上的。更适合列表范例的，绑定到document DOM节点上,和.bind()比拟的上风是支撑动态数据。

.delegate()则是更准确的小范围运用事宜代办，机能优于.live()

.on()则是最新的1.9版本整合了之前的三种体式格局的新事宜绑定机制

on()的高等用法

针对本身处置惩罚机制中，不仅有on要领，另有依据on演化出来的live要领(1.7后去掉了)，delegate要领等等。这些要领的底层完成部份照样on要领，这是利用了on的另一个事宜机制托付的机制衍变而来的

托付机制

.on( events [, selector ] [, data ], handler(eventObject) )

在on的第二参数中供应了一个selector挑选器，简朴的来形貌下

参考下面3层构造

<div class="left">
    <p class="aaron">
        <a>目的节点</a> //点击在这个元素上
    </p>
</div>

给出以下代码：

$("div").on("click","p",fn)

事宜绑定在最上层div元素上，当用户触发在a元素上，事宜将往上冒泡，一向会冒泡在div元素上。假如供应了第二参数，那末事宜在往上冒泡的历程当中遇到了挑选器婚配的元素，将会触发事宜回调函数

参阅：事宜托付机制

卸载事宜off()要领

• 经由历程.on()绑定的事宜处置惩罚顺序

• 经由历程off() 要领移除该绑定

依据on绑定事宜的一些特征，off要领也可以经由历程响应的通报组合的事宜名，名字空间，挑选器或处置惩罚函数来移除绑定在元素上指定的事宜处置惩罚函数。当有多个过滤参数时，只要与这些参数完整婚配的事宜处置惩罚函数才会被移除

绑定2个事宜

$("elem").on("mousedown mouseup",fn)

删除一个事宜

$("elem").off("mousedown")

删除一切事宜

$("elem").off("mousedown mouseup")

快速体式格局删除一切事宜，这里不须要通报事宜名了，节点上绑定的一切事宜讲悉数烧毁

$("elem").off()

jQuery事宜对象的作用

事宜中的Event对象轻易被初学者疏忽掉，可以大多时候初学者不晓得怎样去用它，但有些时候它照样异常有效的

一个规范的”click”点击事宜

$(elem).on("click",function(event){
   event //事宜对象
})

在差别浏览器之间事宜对象的猎取, 以及事宜对象的属性都有差别。jQuery依据 W3C 规范规范了事宜对象，所以在jQuery事宜回调要领中猎取到的事宜对象是经由兼容后处置惩罚过的一个规范的跨浏览器对象

这里不在一模一样的说要领的运用，经由历程现实的一个小案例，从而来了解事宜对象的作用

<ul>
    <li class="even1"></li>
    <li class="even2"></li>
    <li class="even2"></li>
    .........
</ul>

ul有N个子元素li(这里只写了3个)，假如我要响应每个li的事宜，那末通例的要领就是须要给一切的li都零丁绑定一个事宜监听，如许写法很相符逻辑，然则同时有显得烦琐

由于li都有一个配合的父元素，而且一切的事宜都是一致的，这里我们可以采纳要一个技能来处置惩罚，也是常说的”事宜托付”

事宜没直接和li元素发作关系，而且绑定父元素了。由于浏览器有事宜冒泡的这个特征，我们可以在触发li的时候把这个事宜往上冒泡到ul上，由于ul上绑定事宜响应所以就可以触发这个行动了。唯一的题目怎样才晓得触发的li元素是哪一个一个？

这里就引出了事宜对象了

事宜对象是用来纪录一些事宜发作时的相干信息的对象。事宜对象只要事宜发作时才会发作，而且只能是事宜处置惩罚函数内部接见，在一切事宜处置惩罚函数运转完毕后，事宜对象就被烧毁

回到上面的题目，既然事宜对象是跟当前触发元素息息相干的，所以我们就能从内里相干的信息，从事宜对象中找到 event.target

event.target

target 属机可所以注册事宜时的元素，或许它的子元素。一般用于比较 event.target 和 this 来肯定事宜是不是是由于冒泡而触发的。常经常使用于事宜冒泡时处置惩罚事宜托付

简朴来说：event.target代表当前触发事宜的元素，可以经由历程当前元素对象的一系列属性来推断是不是是我们想要的元素

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)和$(event.target);比方：event.target和$(event.target)的运用：

    //示例
    $("span").click(function() {
        $("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");
    });
    //为 Id 为 content 的 <div> 元素绑定 click 事宜  
    $("#content").click(function(event) {
        $("#msg").html($("#msg").html() + "<p>外层div元素被单击</p>");
        event.stopPropagation(); //阻挠事宜冒泡  
    // });
    //为 <body> 元素绑定 click 事宜  
    $("body").click(function() {
        $("#msg").html($("#msg").html() + "<p>body元素被单击</p>");
    });

trigger事宜

重所周知类似于mousedown、click、keydown等等这范例的事宜都是浏览器供应的，浅显叫原生事宜，这范例的事宜是须要有交互行动才被触发。

在jQuery经由历程on要领绑定一个原生事宜

$('#elem').on('click', function() {
    alert("触发体系事宜")
 });

alert须要实行的前提：必须有效户点击才够。假如差别用户交互是不是能在某一时候自动触发该事宜呢？ 一般来说是不可以的，然则jQuery处理了这个题目，供应了一个trigger要领来触发浏览器事宜

所以我们可以如许：

$('#elem').trigger('click');

在绑定on的事宜元素上，经由历程trigger要领就可以挪用到alert了，挺简朴！

再来看看.trigger是什么？

简朴来说就是：依据绑定到婚配元素的给定的事宜范例实行一切的处置惩罚顺序和行动

trigger除了可以触发浏览器事宜，同时还支撑自定义事宜，而且自定义时候还支撑通报参数

$('#elem').on('Aaron', function(event,arg1,arg2) {
    alert("自触自定义时候")
 });
$('#elem').trigger('Aaron',['参数1','参数2'])

trigger触发浏览器事宜与自定义事宜区分？

• 自定义事宜对象，是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

    //给input绑定一个聚焦事宜
    $("input").on("focus",function(event,titie) {
        $(this).val('聚焦')
    });

    //trigger触发focus
    $("button:first").click(function() {
        $("input").trigger("focus",['触发默许事宜']);
    });

     //triggerHandler触发focus
    $("button:last").click(function() {
        $("input").triggerHandler("focus",'没有触发默许事宜');
    });

通力合作，未完待续 :-)