JQuery--事件

一、鼠标事件

1、click 与 dbclick

用法一：
<div id="test">点击触发<div>$("ele").click(function(){      // 点击元素，触发事件alert('触发指定事件')
})$("#test").click(function(){   //   this 指向div元素$("ele").click()  //手动指定触发事件 
});

用法二：
<div id="test">点击触发<div>
$("#test").click(11111,function(e) {//this指向 div元素//e.data  => 11111 传递数据
});eg:
<div class="test3"><p>$('.right').click(1111, set)</p></div><button>不同函数传递数据</button><script type="text/javascript">//不同函数传递数据function data(e) {alert(e.data) //1111
        }function a() {$("button:eq(2)").click(1111, data)}a();</script>

dbclick 与 click 用法基本相同。

2、mousedown 与 mouseup

用法与 click 基本相同。

3、mousemove

该事件在鼠标指针移动时触发，用法与 click 基本相同。

4、mouseover 与 mouseout

用法与 click 基本相同。

5、mouseenter 与 mouseleave

用法与 click 基本相同，它们与 mouseover 和 mouseleave 的本质区别是只会在绑定它的元素上被调用，而不会在后代节点上被触发。使用 mouseenter 与 mouseleave 可以避免冒泡问题。

6、hover

在元素上移进移出切换颜色
$(ele).mouseenter(function(){$(this).css("background", '#bbffaa');})
$(ele).mouseleave(function(){$(this).css("background", 'red');
})使用hover函数：
$(selector).hover(handlerIn, handlerOut)
// handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
// handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数

7、focusin

当一个元素，或者其内部任何一个元素获得焦点的时候，例如：input元素，用户在点击聚焦的时候，如果开发者需要捕获这个动作的时候，jQuery提供了一个focusin事件，用法与 click 相同。

8、focusout

作用于 focusin 相反，用法与 focusin 相同。

二、表单事件

9、blur 与 focus

它们与 focusin 和 focusout 的本质区别是是否支持冒泡。

10、change

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

<body><h2>input、textarea与select</h2><div class="left"><div class="aaron">input：<input class="target1" type="text" value="监听input的改变" /></div><div class="aaron1">select：<select class="target2"><option value="option1" selected="selected">Option 1</option><option value="option2">Option 2</option></select></div><div class="aaron3">textarea：<textarea class="target2" rows="3" cols="20">多行的文本输入控件</textarea></div></div>
    输出结果：<div id="result"></div><script type="text/javascript">//监听input值的改变//监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。$('.target1').change(function(e) {$("#result").html(e.target.value)});//监听select：//对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发$(".target2").change(function(e) {$("#result").html(e.target.value)})//监听textarea：//多行文本输入框，当有改变时，失去焦点后触发change事件$(".target3").change(function(e) {$("#result").html(e.target.value)})</script>
</body>

11、select

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

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

用法与 click 相同

12、submit

<div id="test">点击触发<div>
$("ele").submit(function(){alert('触发指定事件')
})
$("#text").click(function(){$("ele").submit()  //指定触发事件 
});<form id="target" action="destination.html"><input type="submit" value="Go" />
</form>
$("#target").submit(function() { //绑定提交表单触发//this指向 from元素 
});<form id="target" action="destination.html"><input type="submit" value="Go" />
</form>
$("#target").submit(11111,function(data) { //绑定提交表单触发//data => 1111 //传递的data数据
});

具体能触发submit事件的行为：

<input type="submit">
<input type="image">
<button type="submit">
当某些表单元素获取焦点时，敲击Enter（回车键）

form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为。传统的方式是调用事件对象 e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可：

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

三、键盘事件

13、keydown 与 keyup

同 mousedown 与 mouseup 类似。

14、keypress

keypress 同 keydown 非常类似，它们的主要区别是，keypress ：

只能捕获单个字符，不能捕获组合键
无法响应系统功能键（如delete，backspace）
不区分小键盘和主键盘的数字字符

总而言之，KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。

四、事件的绑定和解绑

15、on()

jQuery on() 方法是官方推荐的绑定事件的一个方法。

基本用法：.on( events ,[ selector ] ,[ data ] ) $("#elem").click(function(){}) //快捷方式 $("#elem").on('click',function(){}) //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( events ,[ selector ] ,[ data ], handler(eventObject) 例如：
<div class="left"><p class="aaron"><a>目标节点</a> //点击在这个元素上</p>
</div>

$("div").on("click","p",fn)
//事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数

16、off()

与 on 相反，off 用来移除事件绑定。

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

五、事件对象的使用

17、event 事件对象

事件中的Event对象容易被初学者忽略掉，可能大多时候初学者不知道怎么去用它，但有些时候它还是非常有用的，例如：

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

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

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

六、自定义事件

19、trigger

众所周知类似于mousedown、click、keydown等等这类型的事件都是浏览器提供的，通俗叫原生事件，这类型的事件是需要有交互行为才能被触发。

在jQuery通过on方法绑定一个原生事件：

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

alert需要执行的条件：必须有用户点击才可以。如果不同用户交互是否能在某一时刻自动触发该事件呢？正常来说是不可以的，但是jQuery解决了这个问题，提供了一个trigger方法来触发浏览器事件：

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

trigger 是什么？

简单来讲就是：根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

trigger除了能够触发浏览器事件，同时还支持自定义事件，并且自定义时间还支持传递参数：

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

20、triggerHandler

trigger事件还有一个特性：会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡。

trigger事件是具有触发原生与自定义能力的，但是存在一个不可避免的问题：事件对象event无法完美的实现，毕竟一个是浏览器给的，一个是自己模拟的。尽管 .trigger() 模拟事件对象，但是它并没有完美的复制自然发生的事件，若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替。

triggerHandler与trigger的用法是一样的，重点看不同之处：

triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()
.trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined

<body>
<h2>自定义事件triggerHandler</h2>
<div class="left"><div id="accident"><a>triggerHandler事件</a><input type="text"></div><button>事件冒泡,触发浏览器默认聚焦行为</button><br><br><button>不会冒泡，不触发浏览器默认聚焦行为</button>
</div>
<script type="text/javascript">//给input绑定一个聚焦事件$("input").on("focus",function(event,title) {$(this).val(title)});$("#accident").on("click",function() {alert("trigger触发的事件会在 DOM 树中向上冒泡");});//trigger触发focus$("button:first").click(function() {$("a").trigger("click");$("input").trigger("focus");});//triggerHandler触发focus$("button:last").click(function() {$("a").triggerHandler("click");$("input").triggerHandler("focus","没有触发默认聚焦事件");});
</script>
</body>