jQuery 事件 - mouseenter() 方法
jQuery 事件 - mouseenter() 方法
当鼠标指针进入（穿过）元素时，改变元素的背景色：
$(&p&).mouseenter(function(){
$(&p&).css(&background-color&,&yellow&);
定义和用法
当鼠标指针穿过元素时，会发生 mouseenter 事件。
该事件大多数时候会与
事件一起使用。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数。
注释：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。请看下面例子的演示。
亲自试一试：
触发 mouseenter 事件
$(selector).mouseenter()
将函数绑定到 mouseenter 事件
$(selector).mouseenter(function)
可选。规定当发生 mouseenter 事件时运行的函数。jQuery基础——事件篇
click与dbclick事件
click方法监听用户单击操作，dbclick监听用户双击操作，这两个方法类似。
dbclick与click事件不同的是：
click事件触发需要以下几点：
click事件其实是由mousedown与mouseup 2个动作构成，所以点击的动作只有在松手后才触发
dblclick事件触发需要以下几点：
dblclick又是由2个click叠加而来的，所以dblclick事件只有在满足以下条件的情况下才能被触发
鼠标指针在元素里面时点击。 鼠标指针在元素里面时释放。 鼠标指针在元素里面时再次点击，点击间隔时间，是而定。 鼠标指针在元素里面时再次释放。
方法一：$ele.click()
用来手动触发事件
方法二：$ele.click( handler(eventObject) )
&script type="text/javascript"&
$('p').click(function(e) {
alert(e.target.textContent)
//this指向button元素
$("button:eq(1)").click(function() {
$('p').click() //指定触发绑定的事件
function(e)中的e代表的是event，具体理解请参考script/jQuery what does (e) mean?。比如 e.preventDefault 可以屏蔽掉原有控件的一些事件，执行新的事件。
$('a').click(function(e) {
e.preventDefault();
方法三：$ele.click( [eventData ], handler(eventObject) )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
&script type="text/javascript"&
//不同函数传递数据
function data(e) {
alert(e.data) //1111
function a() {
$("button:eq(2)").click(1111, data)
mousedown与mouseup事件
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
mousemove事件
mousemove事件是当鼠标指针移动时触发的，即使是一个像素
&script type="text/javascript"&
//绑定一个mousemove事件
//触发后修改内容
$(".aaron1").mousemove(function(e) {
$(this).find('p:last').html('移动的X位置：' + e.pageX)
mouseover与mouseout事件
用来监听用户的移入移出操作
&script type="text/javascript"&
var n = 0;
//绑定一个mouseover事件
$(".aaron1 p:first").mouseover(function(e) {
$(".aaron1 a").html('进入元素内部,mouseover事件触发次数：' + (++n))
mouseenter与mouseleave事件
mouseenter事件和mouseover的区别
关键点就是：冒泡的方式处理问题
简单的例子：
mouseover为例：
&div class=&aaron2&&
&p&鼠标离开此区域触发mouseleave事件&/p&
鼠标离开此区域触发mouseleave事件
如果在p元素与div元素都绑定mouseover事件，鼠标在离开p元素，但是没有离开div元素的时候，触发的结果:
p元素响应事件 div元素响应事件
这里的问题是div为什么会被触发？ 原因就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果有全触发了
所以在这种情况下面，jQuery推荐我们使用 mouseenter事件
mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发
&script type=&text/javascript&&
var i = 0;
$(&.aaron2 p&).mouseenter(function(e) {
$(&.aaron2 a:first&).html('mouseenter事件触发次数：' + (++i))
var n = 0;
$(&.aaron2&).mouseenter(function() {
$(&.aaron2 a:last&).html('mouseenter冒泡事件触发次数：' + (++n))
在元素上移进移出切换其换色，一般通过2个事件配合就可以达到，这里用mouseenter与mouseleave，这样可以避免冒泡问题
$(ele).mouseenter(function(){
$(this).css(&background&, '#bbffaa');
$(ele).mouseleave(function(){
$(this).css(&background&, 'red');
但是这样有点复杂，可以使用hover方法代替$(selector).hover(handlerIn, handlerOut)。
handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数 handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数
$(&p&).hover(
function() {
$(this).css(&background&, 'red');
function() {
$(this).css(&background&, '#bbffaa');
focusin事件
当一个元素，或者其内部任何一个元素获得焦点的时候，可以使用focusin方法
&script type=&text/javascript&&
//不同函数传递数据
function fn(e) {
$(this).val(e.data)
function a() {
$(&input:last&).focusin('慕课网', fn)
&script type=&text/javascript&&
//input聚焦
//给input元素增加一个边框
$(&input:first&).focusin(function() {
$(this).css('border','2px solid red')
focusout事件
当一个元素，或者其内部任何一个元素失去焦点的时候，可以使用focusout方法
&script type=&text/javascript&&
//input失去焦点
//给input元素增加一个边框
$(&input:first&).focusout(function() {
$(this).css('border','2px solid red')
blur与foucus事件
它们之间的本质区别：是否支持冒泡处理
举个简单的例子
&input type=&text& /&
其中input元素可以触发focus()事件
div是input的父元素，当它包含的元素input触发了focus事件时，它就产生了focusin()事件。
focus()在元素本身产生，focusin()在元素包含的元素中产生
blur与focusout也亦是如此
&script type=&text/javascript&&
$(&.aaron&).focus(function() {
$(this).css('border', '2px solid red')
$(&.aaron1&).focusin(function() {
$(this).find('input').val('冒泡捕获了focusin事件')
change事件
&input&元素，&textarea&和&select&元素都是可以选择值一些改变
//监听input值的改变
$('.target1').change(function(e) {
$(&#result&).html(e.target.value)
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'