鼠标事件
.click() 单击 .dbclick()双击
.click() 不带任何参数,一般用来指定触发一个事件
$("ele").click(function(){alert('触发指定事件')})
$ele.click( handler(eventObject) ) 绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数，这样可以针对事件的反馈做很多操作了，方法中的this是指向了绑定事件的元素
$("#ele").click(function() {//this指向 div元素});
$ele.click( [eventData ], handler(eventObject) ) 使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
点击触发
$("#test").click(11111,function(e) {
//this指向 div元素
//e.data => 11111 传递数据
});
dblclick()的用法和click()的用法是类似的，可以参考以上click()的用法。
dbclick与click事件不同点
- click事件其实是由mousedown与mouseup 2个动作构成，所以点击的动作只有在松手后才触发
- dblclick事件
鼠标指针在元素里面时 点击鼠标指针在元素里面时释放 鼠标指针在元素里面时再次点击点击间隔时间，是系统而定 鼠标指针在元素里面时再次释放
注意
- 在同一元素上同时绑定 click 和 dblclick 事件是不可取的。各个浏览器事件触发的顺序是不同的，一些浏览器在dblclick之前接受两个 click 事件 ，而一些浏览器只接受一个 click 事件。用户往往可通过不同的操作系统和浏览器配置双击灵敏度
. mousedown()鼠标按下 . mouseup()鼠标弹起
$ele.mousedown() 绑定$ele元素，不带任何参数一般是用来指定触发一个事件，可能一般用的比较少
$("ele").mousedown() //手动指定触发事件
$ele.mousedown( handler(eventObject) ) 绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
$("#test").mousedown(function() {//this指向 div元素});
$ele.mousedown( [eventData ], handler(eventObject) ) 使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
点击触发
$("#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个动作构成，所以点击的动作只有在松手后才触发
mousemove()的快捷方法可以监听用户移动的的操作,用法同 click()
注意
- mousemove事件是当鼠标指针移动时触发的，即使是一个像素
- 如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题
mouseover() 鼠标移入某个元素
mouseout() 鼠标移除某个元素
mouseenter() 鼠标移入某个元素
mouseleave() 鼠标移除某个元素
区别
mouseover和mouseout事件会向上传递,绑定事件的所有父类都会触发绑定事件,而mouseenter和mouseleave则不会
$(selector).hover(handlerIn, handlerOut)
handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数
$("p").hover(
function() {
$(this).css("background", 'red');
},
function() {
$(this).css("background", 'blue');
}
);
##表单事件
>`focusin()用户在点击获得焦点的时候的时候触发`
>`focusout()用户在点击失去焦点的时候的时候触发`
>`.focus() 用户在点击获得焦点的时候的时候触发(不支持冒泡)`
>`.blur() 用户在点击失去焦点的时候的时候触发(不支持冒泡)`
用法类似
$("#test").focusin(11111,function(e) {
//this指向 div元素
//e.data => 11111 传递数据
});
>`.change 监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。`
$(".input").change(function(e) {
$("#p").html(e.target.value)
})
>`.select() 当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。`
$("#test").select(11111,function(e) {//响应文字选中回调
//this指向 div元素
//e.data => 11111 传递数据
});
>`.submit() 监听提交表单动作`
#####注意
- form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为
传统的方式是调用事件对象 e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可
$("#target").submit(function(data) {
return false; //阻止默认行为，提交表单
});
##键盘事件
>`keydown 当用户在一个元素上第一次按下键盘上字母键的时候，就会触发它。`
>`keyup 当用户在一个元素上第一次松手键盘上的键的时候，就会触发它。`
#####注意
- keydown是在键盘按下就会触发
- keyup是在键盘松手就会触发
- 理论上它可以绑定到任何元素，但keydown/keyup事件只是发送到具有焦点的元素上，不同的浏览器中，可获得焦点的元素略有不同，但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的。
>`keypress 当浏览器捕获键盘输入时`
#####注意
- 只能捕获单个字符，不能捕获组合键
- 无法响应系统功能键（如delete，backspace）
- 不区分小键盘和主键盘的数字字符
- KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。
##绑定与解绑
>`.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 World
}
$( "button" ).on( "click", {
name: "World"
}, greet );
委托机制
`.on( events ,[ selector ] ,[ data ], handler(eventObject) )`
$("div").on("click","p",fn)
事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数
>`off() 方法移除该绑定`
$("elem").on("mousedown mouseup",fn) //绑定2个事件
$("elem").off("mousedown") //删除一个事件
$("elem").off("mousedown mouseup") //删除所有事件
$("elem").off() //删除所有事件
##事件对象
>`event.target 属性可以是注册事件时的元素，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托`
>`event.type：获取事件的类型`
>`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.
- js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
- .this和event.target都是dom对象
- 如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；
##自定义事件
>`$('#elem').trigger('click'); //触发浏览器事件`
根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
#####注意
trigger事件会在DOM树上冒泡
trigger事件是具有触发原生与自定义能力的，但是存在一个不可避免的问题： 事件对象event无法完美的实现，毕竟一个是浏览器给的，一个是自己模拟的。尽管 .trigger() 模拟事件对象，但是它并没有完美的复制自然发生的事件，若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替
#####注意
- triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()
- .trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
- 使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
- 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined