JQuery之事件

1、JQuery事件之click事件和dbclick事件

方法一：$ele.click()

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

<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()的用法。

2、JQuery鼠标事件之mousedown和mouseup事件

方法一：$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 传递数据});

3、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 传递数据});

4、JQuery鼠标事件之mouseover事件和mouseout事件

方法一：$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 传递数据});

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

p元素响应事件
div元素响应事件
这里的问题是div为什么会被触发？ 原因就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发

所以在这种情况下面，jQuery推荐我们使用 mouseenter事件

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

6、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)：当鼠标指针离开元素时触发执行的事件函数

// 我们可以用它来简单地应用在 鼠标在元素上行为    $("p").hover(        function() {            $(this).css("background", 'red');        },        function() {            $(this).css("background", '#bbffaa');        }    );

7、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 传递数据});

8、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 传递数据});

9、JQuery表单事件之focus和blur事件

与8之间的本质区别:

是否支持冒泡处理
举个简单的例子

<div>
  <input type="text" />
</div>
其中input元素可以触发focus()事件

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

focus()在元素本身产生，focusin()在元素包含的元素中产生
blur与focusout也亦是如此

<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).css('border', '2px solid red')    })    $(".aaron4").focusout(function() {        $(this).find('input').val('冒泡捕获了focusout事件')    })

10、JQuery表单事件之change事件

<input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作

input元素

监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。

select元素

对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发
 
textarea元素

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

11、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 传递数据});

12、JQuery键盘事件之keydown()、keypress()和keyup()事件

keydown事件：

当用户在一个元素上第一次按下键盘上字母键的时候，就会触发它。使用上非常简单，与基本事件参数处理保持一致，这里使用不在重复了，列出使用的方法

//直接绑定事件
$elem.keydown( handler(eventObject) )
//传递参数
$elem.keydown( [eventData ], handler(eventObject) )
//手动触发已绑定的事件
$elem.keydown()
 
keyup事件：

当用户在一个元素上第一次松手键盘上的键的时候，就会触发它。使用方法与keydown是一致的只是触发的条件是方法的
KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。

13、JQuery事件之on()的多事件绑定

最常见的给元素绑定一个点击事件，对比一下快捷方式与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 );

可以通过第二参数（对象），当一个事件被触发时，要传递给事件处理函数的

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

15、卸载事件off()方法

//绑定2个事件$("elem").on("mousedown mouseup",fn)//删除一个事件$("elem").off("mousedown")//删除所有事件$("elem").off("mousedown mouseup")//快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁$("elem").off()

16、JQuery事件对象的作用

事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁
回到上面的问题，既然事件对象是跟当前触发元素息息相关的，所以我们就能从里面相关的信息，从事件对象中找到 event.target

target 属性可以是注册事件时的元素，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托

简单来说：event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素

<body>    <h3>事件委托，通过事件对象区别触发元素</h3>    <div class="left">        <div class="aaron">            <ul>                <li>点击：触发一</li>                <li>点击：触发二</li>                <li>点击：触发三</li>                <li>点击：触发四</li>            </ul>        </div>    </div>    <script type="text/javascript">        //多事件绑定一        $("ul").on('click',function(e){           alert('触发的元素是内容是: ' + e.target.textContent)        })    </script></body>

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

18、JQuery事件之trigger事件

在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模拟原生实现的
自定义事件可以传递参数

19、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