鼠标事件
.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) ) 使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
<div id="test">点击触发<div>
$("#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) ) 使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
<div id="test">点击触发<div>
$("#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 事件。`
<input id="test" value="文字选中"></input>
$("#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 class="left">
<p class="aaron">
<a>目标节点</a> //点击在这个元素上
</p>
</div>
$("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
