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>
