jQuery事件总结（三）

一、 jQuery 事件的绑定和事件的解绑。
（1）事件的绑定和解绑 on()的多个事件绑定：
我们之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。
jQuery on()方法是官方推荐的绑定事件的一个方法。
基本用法：on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数。
最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同：
$("#elem").click(function(){…}) //快捷方式
$("#elem").on(‘click’,function(){…}) //on方式
最大的不同点就是on是可以自定义事件名，当然不仅仅只是如何，继续往下看，多个事件绑定同一个函数：
$("#elem").on(“mouseover mouseout”,function(){…});
①通过空格分离，传递不同的事件名，可以同时绑定多个事件，多个事件绑定不同函数。
$("#elem").on({
mouseover:function(){…},
mouseout:function(){…}，
click:function(){…} });
②通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法
【 //给元素绑定一个点击事件 on方式
$("#div1").on(“click”, function (e) {
$(this).text(“触发了：” + e.type); });
//多个事件绑定同一个函数
$("#div2").on(“mousedown mouseup”, function (e) {
$(this).text(“触发了：” + e.type); });
//多个事件绑定不同函数
$("#div3").on({ mousedown: function () {
$(this).attr(“class”,“bgGreen”); },
mouseup: function () {
$(this).removeAttr(“class”); } }); 】
（2）卸载事件off()方法：
①通过.on()绑定的事件处理程序;
②通过off() 方法移除该绑定;
③根据on绑定事件的一些特性，off方法也可以通过相应的传递组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除。
绑定2个事件： $(“elem”).on(“mousedown mouseup”,fn);
删除一个事件： $(“elem”).off(“mousedown”);
删除所有事件： $(“elem”).off(“mousedown mouseup”);
快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁： $(“elem”).off();
演示时取消注释： $("#div2").off(“mousedown”); //或： $("#div3").off();
二、事件对象：Query事件对象的属性和方法。
事件对象的属于与方法有很多，但是我们经常用的只有那么几个，这里我主要说下作用与区别：
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：获取在鼠标单击时，单击的是鼠标的哪个键。（1）event.which将event.keyCode和event.charCode标准化了。（2）event.which也将正常化的按钮按下(mousedown和mouseupevents)，左键报告1，中间键报告2，右键报告3。event.currentTarget:在事件冒泡过程中的当前DOM元素。冒泡前的当前触发事件的DOM对象,等同于this。注意：(1)this和event.target的区别：js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；(2).this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用。