关于前端:JQuery事件

总结：

鼠标事件

1.click与dbclick事件
$ele.click()
$ele.click(handler(eventObject))
$ele.click([eventData],handler(eventObject))
2.mousedown,mouseover
3.mouseover,mouseout
4.mouseenter,mouseleave
5.hover
6.focusin,focusout

表单事件

1.blur,focus
2.change
3.select
4.submit

键盘事件

1.keydown(),keyup()
2.keypress()

多事件

1.on()
2.off()
3.event
4.event.type
5.event.pageX,event.pageY
6.event.preventDefault()
7.event.stopPropagation()
8.event.which
9.this,event.target

自定义事件

1.trigger
2.triggerHandler

jQuery鼠标事件之click与dbclick事件

用交互操作中，最简略间接的操作就是点击操作。jQuery提供了两个办法一个是click办法用于监听用户单击操作，另一个办法是dbclick办法用于监听用户双击操作。这两个办法的用法是相似的，上面以click()事件为例
应用上非常简单：

办法一：$ele.click()

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

办法二：$ele.click( handler(eventObject) )

绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数，这样能够针对事件的反馈做很多操作了，办法中的this是指向了绑定事件的元素<div id="test">点击触发<div>$("#test").click(function() {    //this指向 div元素});

办法三：$ele.click( [eventData ], handler(eventObject) )
应用与办法二统一，不过能够承受一个数据参数，这样的解决是为了解决不同作用域下数据传递的问题

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

dblclick()的用法和click()的用法是相似的，能够参考以上click()的用法。
dbclick与click事件不同的是：
click事件触发须要以下几点：
• click事件其实是由mousedown与mouseup 2个动作形成，所以点击的动作只有在松手后才触发
PS:mousedown和mouseup下一节会讲到
dblclick事件触发须要以下几点：
dblclick又是由2个click叠加而来的，所以dblclick事件只有在满足以下条件的状况下能力被触发
• 鼠标指针在元素外面时点击。
• 鼠标指针在元素外面时开释。
• 鼠标指针在元素外面时再次点击，点击间隔时间，是零碎而定。
• 鼠标指针在元素外面时再次开释。
留神：在同一元素上同时绑定 click 和 dblclick 事件是不可取的。各个浏览器事件触发的程序是不同的，一些浏览器在dblclick之前承受两个 click 事件 ，而一些浏览器只承受一个 click 事件。用户往往可通过不同的操作系统和浏览器配置双击灵敏度
例子：

$(“button:eq(0)”).click(function(){    alert(this)})后果：this指向button元素

[object HTMLButtonElement]$(‘p’).click(function(e){    alert(e.target.textContent)})               //取了p元素的文字局部$(“button:eq(1)”).click(function(){    $(‘p’).click()   //手动指定触发事件})

function data(e) {    alert(e.data)}function a() {    $(“button:eq(2)”).click(1111,data)}a();

function a() {} 是自定义一个a()办法 , 如果在你上下文中不调用是不会执行a()中办法的， 结尾处写一个函数a()是调用a()办法体。

jQuery鼠标事件之mousedown与mouseup事件

用户交互操作中，最简略间接的操作就是点击操作，因而jQuery提供了一个mousedown的快捷办法能够监听用户鼠标按下的操作，与其对应的还有一个办法mouseup快捷办法能够监听用户鼠标弹起的操作。两种办法用法相似，上面以mousedown()为例
应用上非常简单：
办法一：$ele.mousedown()
绑定$ele元素，不带任何参数个别是用来指定触发一个事件，可能个别用的比拟少

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

办法二：$ele.mousedown( handler(eventObject) )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
这样能够针对事件的反馈做很多操作了

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

办法三：$ele.mousedown( [eventData ], handler(eventObject) )
应用与办法二统一，不过能够承受一个数据参数，这样的解决是为了解决不同作用域下数据传递的问题

<div id="test">点击触发<div>$("#test").mousedown(11111,function(e) {    //this指向 div元素    //e.data  => 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

<script type="text/javascript">    //this指向button元素    $("button:eq(0)").mousedown(function(e) {        alert('e.which: ' + e.which)    }) </script>

另外须要留神的是：
click与mousedown的区别：
• click事件其实是由mousedown于mouseup 2个动作形成，所以点击的动作只有在松手后才触发

jQuery鼠标事件之mousemove事件

用交互操作中，常常须要晓得用户是否有挪动的操作。基于挪动的机制能够做出拖动、拖拽一系列的成果进去。针对挪动事件，jQuery提供了一个mousemove的快捷办法能够监听用户挪动的的操作
应用上非常简单：
办法一：$ele.mousemove()
绑定$ele元素，不带任何参数个别是用来指定触发一个事件，用的比拟少

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

办法二：$ele.mousemove( handler(eventObject) )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
这样能够针对事件的反馈做很多操作了

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

办法三：$ele.mousemove( [eventData ], handler(eventObject) )
应用与办法二统一，不过能够承受一个数据参数，这样的解决是为了解决不同作用域下数据传递的问题

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

mousemove事件触发须要以下几点：
• mousemove事件是当鼠标指针挪动时触发的，即便是一个像素
• 如果处理器做任何重大的解决，或者如果该事件存在多个处理函数，这可能造成浏览器的重大的性能问题

<script type="text/javascript">    //不同函数传递数据     function data(e) {        $(this).find('p:last').html('数据:' + e.data)    }    function a() {        $(".right").mousemove(1111, data)    }   a();       $(".aaron3").mousemove(function(e) {        $(this).find('p:last').html('数  据：' + e.pageX)    })     </script>这里不显示$(“.aaron3”).mousemove后果，只显示1111

jQuery鼠标事件之mouseover与mouseout事件

在学JS的时候，大家还记得有两个办法叫移入移出事件吗？onmouseover()与onmouseout()事件~
jQuery当中同样提供了这样的事件来监听用户的移入移出操作，mouseover()与mouseout()事件，两者用法相似，上面一mouseover为例：
办法一：$ele.mouseover()
绑定$ele元素，不带任何参数个别是用来指定触发一个事件，用的比拟少

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

办法二：$ele.mouseover( handler(eventObject) )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
这样能够针对事件的反馈做很多操作了

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

办法三：$ele.mouseover( [eventData ], handler(eventObject) )
应用与办法二统一，不过能够承受一个数据参数，这样的解决是为了解决不同作用域下数据传递的问题

<div id="test">点击触发<div>$("#test").mouseover(11111,function(e) {    //this指向 div元素    //e.data  => 11111 传递数据});

    <script type="text/javascript">        var n = 0;        //绑定一个mouseover事件        $(".aaron1 p:first").mouseover(function(e) {            $(".aaron1 a").html('进入元素外部,mouseover事件触发次数：' + (++n))        })                /*        $ele.mouseover(function(e){                    })        */    </script>

jQuery鼠标事件之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事件，如果父元素有mouseover事件就会被触发
所以在这种状况上面，jQuery举荐咱们应用 mouseenter事件
mouseenter事件只会在绑定它的元素上被调用，而不会在后辈节点上被触发###jQuery鼠标事件之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)：当鼠标指针来到元素时触发执行的事件函数

jQuery鼠标事件之focusin事件

当一个元素，或者其外部任何一个元素取得焦点的时候，例如：input元素，用户在点击聚焦的时候，如果开发者须要捕捉这个动作的时候，jQuery提供了一个focusin事件
应用上非常简单：
办法一：$ele.focusin()
绑定$ele元素，不带任何参数个别是用来指定触发一个事件，个别用的比拟少

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

办法二：$ele.focusin( handler )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
这样能够针对事件的反馈做很多操作了

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

办法三：$ele.focusin( [eventData ], handler )
应用与办法二统一，不过能够承受一个数据参数，这样的解决是为了解决不同作用域下数据传递的问题

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

jQuery鼠标事件之focusout事件

当一个元素，或者其外部任何一个元素失去焦点的时候，比方input元素，用户在点击失去焦的时候，如果开发者须要捕捉这个动作，jQuery提供了一个focusout事件
应用上非常简单：
办法一：$ele.focusout()
绑定$ele元素，不带任何参数个别是用来指定触发一个事件，可能个别用的比拟少

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

办法二：$ele.focusout( handler )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
这样能够针对事件的反馈做很多操作了

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

办法三：$ele.focusout( [eventData ], handler )
应用与办法二统一，不过能够承受一个数据参数，这样的解决是为了解决不同作用域下数据传递的问题

<div id="test">点击触发<div>$("#test").focusout(11111,function(e) {    //this指向 div元素    //e.data  => 11111 传递数据});

    <script type="text/javascript">        function fn(e){            $(this).val(e.data)        }                function a() {            $("input:last").focusout("llll",fn)        }        a();</script>    <script type="text/javascript">        //input失去焦点        //给input元素减少一个边框        $("input:first").focusout(function() {             $(this).css('border','2px solid red')        })          </script>

jQuery表单事件之blur与focus事件

在之前2.8与2.9节咱们学过了表单处理事件focusin事件与focusout事件，同样用于解决表单焦点的事件还有blur与focus事件
它们之间的本质区别:
是否反对冒泡解决
举个简略的例子

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

其中input元素能够触发focus()事件
div是input的父元素，当它蕴含的元素input触发了focus事件时，它就产生了focusin()事件。
focus()在元素自身产生，focusin()在元素蕴含的元素中产生
blur与focusout也亦是如此

focusin 会影响到父元素，focus不会，focus只定位到自身

jQuery表单事件之change事件

<input>元素，<textarea>和<select>元素的值都是能够产生扭转的，开发者能够通过change事件去监听这些扭转的动作
input元素
监听value值的变动，当有扭转时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出抉择时，该事件立刻触发。

select元素
对于下拉抉择框，当用户用鼠标作出抉择时，该事件立刻触发

textarea元素
多行文本输入框，当有扭转时，失去焦点后触发change事件

    $('.target1').change(function(e) {        $("#result").html(e.target.value)});//result是要输入的值

jQuery表单事件之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>$("#test").select(function() { //响应文字选中回调    //this指向 input元素 });

办法三：$ele.select( [eventData ], handler(eventObject) )
应用与办法二统一，不过能够承受一个数据参数，这样的解决是为了解决不同作用域下数据传递的问题

<input id="test" value="文字选中"></input>$("#test").select(11111,function(e) {//响应文字选中回调    //this指向 div元素    //e.data  => 11111 传递数据});  $("input").select(function(e){        alert(e.target.value)    })    //选中input框中文字时弹出

    $('#bt1').click(function() {        $("input").select();    })    //单击按钮时弹出    //监听textarea元素中value的选中    $('textarea').select(function(e) {        alert(e.target.value);    });

jQuery表单事件之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; //阻止默认行为，提交表单});

  <script type="text/javascript">    //回车键或者点击提交表单     $('#target1').submit(function(e) {        alert('捕捉提交表白动作,不阻止页面跳转')    });    //回车键或者点击提交表单,禁止浏览器默认跳转：    $('#target2').submit(function() {        alert('捕捉提交表白动作,阻止页面跳转')        return false;    });    </script>

jQuery键盘事件之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事件只是发送到具备焦点的元素上，不同的浏览器中，可取得焦点的元素略有不同，然而表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的。

jQuery键盘事件之keypress()事件

在input元素上绑定keydown事件会发现一个问题：
每次获取的内容都是之前输出的，以后输出的获取不到
keydown事件触发在文字还没敲进文本框，这时如果在keydown事件中输入文本框中的文本，失去的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作曾经实现，取得的是触发键盘事件后的文本
当浏览器捕捉键盘输入时，还提供了一个keypress的响应，这个跟keydown是十分类似，这里应用请参考keydown这一节，具体说说不同点
keypress事件与keydown和keyup的次要区别
• 只能捕捉单个字符，不能捕捉组合键
• 无奈响应零碎功能键（如delete，backspace）
• 不辨别小键盘和主键盘的数字字符
总而言之，
KeyPress次要用来接管字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程能够解决任何不被 KeyPress 辨认的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。

on()的多事件绑定

之前学的鼠标事件，表单事件与键盘事件都有个特点，就是间接给元素绑定一个处理函数，所有这类事件都是属于快捷解决。打开源码其实能够看到，所有的快捷事件在底层的解决都是通过一个"on"办法来实现的。jQuery on()办法是官网举荐的绑定事件的一个办法。
根本用法：.on( events ,[ selector ] ,[ data ] )
最常见的给元素绑定一个点击事件，比照一下快捷方式与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 慕课网
}
$( "button" ).on( "click", {
name: "慕课网"
}, greet );
能够通过第二参数（对象），当一个事件被触发时，要传递给事件处理函数的

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元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数

<body>    <h2>on事件委托</h2>    <div class="left">        <div class="aaron">            <a>点击这里</a>        </div>    </div>    <script type="text/javascript">    //给body绑定一个click事件    //没有间接a元素绑定点击事件    //通过委托机制，点击a元素的时候，事件触发    $('body').on('click', 'a', function(e) {       alert(e.target.textContent)    })    </script></body>后果：弹出“点击这里”对话框

卸载事件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代表以后触发事件的元素，能够通过以后元素对象的一系列属性来判断是不是咱们想要的元素
通过简略的试验，感觉event是理论的触发事件的元素，而this是给哪个元素绑定了事件

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通过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模仿原生实现的
• 自定义事件能够传递参数

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