jQuery知识总结之事件

时间 2019-12-13

标签 jquery 知识总结事件栏目 JQuery 繁體版

原文原文链接

本篇文章盘点一下jQuery中的事件及事件的绑定使用javascript

jQuery事件之鼠标点击事件---.click()与.dblclick()

用交互操做中，最简单直接的操做就是点击操做。jQuery提供了两个方法一个是click方法用于监听用户单击操做，另外一个方法是dblclick方法用于监听用户双击操做。
css

使用上很是简单：html

方法一：$ele.click()java

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

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

方法二：$ele.click( handler(eventObject) )浏览器

绑定$ele元素，每次$ele元素触发点击操做会执行回调 handler函数，这样能够针对事件的反馈作不少操做了，方法中的this是指向了绑定事件的元素bash

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

方法三：$ele.click( [eventData ], handler(eventObject) )dom

使用与方法二一致，不过能够接受一个数据参数，这样的处理是为了解决不一样做用域下数据传递的问题函数

<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下一节会讲到

dbclick事件触发须要如下几点：

dbclick又是由2个click叠加而来的，因此dbclick事件只有在知足如下条件的状况下才能被触发

鼠标指针在元素里面时点击。
鼠标指针在元素里面时释放。
鼠标指针在元素里面时再次点击，点击间隔时间，是系统而定。
鼠标指针在元素里面时再次释放。

注意：在同一元素上同时绑定 click 和 dbclick 事件是不可取的。各个浏览器事件触发的顺序是不一样的，一些浏览器在dbclick以前接受两个 click 事件，而一些浏览器只接受一个 click 事件。用户每每可经过不一样的操做系统和浏览器配置双击灵敏度

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

另外须要注意的是：

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(e) {
    //this指向 div元素 
    console.log(e.pageX,e.pageY);//指针所在坐标
});复制代码

方法三：$ele.mousemove( [eventData ], handler(eventObject) )

使用与方法二一致，不过能够接受一个数据参数，这样的处理是为了解决不一样做用域下数据传递的问题

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

mousemove事件触发须要如下几点：

mousemove事件是当鼠标指针移动时触发的，即便是一个像素
若是处理器作任何重大的处理，或者若是该事件存在多个处理函数，这可能形成浏览器的严重的性能问题

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 传递数据
});复制代码

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元素的时候，触发的结果:

p元素响应事件
div元素响应事件

这里的问题是div为何会被触发？缘由就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，若是父元素有mouseover事件就会被触发

因此在这种状况下面，jQuery推荐咱们使用 mouseenter事件

mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发复制代码

jQuery事件之鼠标移入移出切换事件---.hover()

若是须要给元素作一个简单的切换效果，如在元素上移进移出切换其换色，通常经过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()与.focusout()

当一个元素，或者其内部任何一个元素得到焦点的时候，例如：input元素，用户在点击聚焦的时候，若是开发者须要捕获这个动做的时候，jQuery提供了一个focusin事件

当一个元素，或者其内部任何一个元素失去焦点的时候，好比input元素，用户在点击失去焦的时候，若是开发者须要捕获这个动做，jQuery提供了一个focusout事件

使用上二者相同下面以.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表单事件之元素获取与失去焦点事件---.focus()与.blur()

一样用于处理表单焦点的事件还有blur与focus事件

它们之间的本质区别:

是否支持冒泡处理复制代码

举个简单的例子

<div>
  <input type="text" />
</div>复制代码

其中input元素能够触发focus()事件

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

focus()在元素自己产生，focusin()在元素包含的元素中产生复制代码

blur与focusout也亦是如此

<body>
    <h4>.focusin与blur</h4>
    <div class="left">
        <div class="aaron">
            点击触发焦点(无反应)：
            <input type="text" />
        </div>
        <div class="aaron1">
            点击触发焦点并冒泡：
            <input type="text" />
        </div>
    </div>
    <script type="text/javascript">
    $(".aaron").focus(function() {
        $(this).find('input').val('冒泡捕获了focusin事件')
    })
    $(".aaron1").focusin(function() {
        $(this).find('input').val('冒泡捕获了focusin事件')
    })
    </script>


    <h4>.focusout与blur</h4>
    <div class="right">
        <div class="aaron3">
            点击触发失去焦点(无反应)：
            <input type="text" />
        </div>
        <div class="aaron4">
            点击触发失去焦点并冒泡：
            <input type="text" />
        </div>
    </div>
    <script type="text/javascript">
    $("aaron3").blur(function() {
        $(this).find('input').val('冒泡捕获了focusin事件')
    })
    $(".aaron4").focusout(function() {
        $(this).find('input').val('冒泡捕获了focusin事件')
    })

    </script>

</body>复制代码

jQuery表单事件之元素值变更事件---.change()

<input>元素，<textarea>和<select>元素的值都是能够发生改变的，开发者能够经过change事件去监听这些改变的动做

input元素

监听value值的变化，当有改变时，失去焦点后触发change事件。
对于单选按钮(type="radio")和复选框(type="checkbox")，当用户用鼠标作出选择时，该事件当即触发。复制代码

select元素

对于下拉选择框，当用户用鼠标做出选择时，该事件当即触发复制代码

textarea元素

多行文本输入框，当有改变时，失去焦点后触发change事件复制代码

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 传递数据
});复制代码

jQuery表单事件之表单提交事件---.select()

提交表单是一个最多见的业务需求，好比用户注册，一些信息的输入都是须要表单的提交。一样的有时候开发者须要在表单提交的时候过滤一些的数据、作一些必要的操做（例如：验证表单输入的正确性，若是错误就阻止提交，重新输入）此时能够经过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; //阻止默认行为，提交表单
});复制代码

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）、编辑键、定位键以及任何这些键和键盘换档键的组合等。

jQuery事件使用之绑定事件---.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演变出来的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元素上。若是提供了第二参数，那么事件在往上冒泡的过程当中遇到了选择器匹配的元素，将会触发事件回调函数

jQuery事件使用之卸载事件---.off()

经过.on()绑定的事件处理程序
经过off() 方法移除该绑定

根据on绑定事件的一些特性，off方法也能够经过相应的传递组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时，只有与这些参数彻底匹配的事件处理函数才会被移除

绑定2个事件

$("elem").on("mousedown mouseup",fn)复制代码

删除一个事件

$("elem").off("mousedown")复制代码

删除全部事件

$("elem").off("mousedown mouseup")复制代码

快捷方式删除全部事件，这里不须要传递事件名了，节点上绑定的全部事件讲所有销毁

$("elem").off()复制代码

jQuery事件之事件对象event

事件中的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的属性与方法

事件对象的属性与方法有不少，可是咱们常常用的只有那么几个，这里我主要说下做用与区别

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)的使用；