JQuery 事件

1.click与dbclick事件

$("ele").click()  //手动指定触发事件

方法二：$ele.click( handler(eventObject) )

<div id="test">点击触发<div>
$("#text").click(function() {
//this指向 div元素
});

方法三：$ele.click( [eventData ], handler(eventObject) )

<div id="test">点击触发<div>
$("#text").click(11111,function(e) {
//this指向 div元素
//e.date  => 11111 传递数据
});

注意：在同一元素上同时绑定 click 和 dblclick 事件是不可取的。



2.mousedown与mouseup事件

方法同上

mousedown事件触发需要以下几点：

mousedown强调是按下触发

如果在一个元素按住了鼠标不放，并且拖动鼠标离开这个元素，并释放鼠标键，这仍然是算作mousedown事件

任何鼠标按钮被按下时都能触发mousedown事件

用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

click事件其实是由mousedown于mouseup 2个动作构成，所以点击的动作只有在松手后才触发

$("button:eq(0)").mousedown(function(e) {
alert('e.which: ' + e.which)
})

3.mousemove事件

方法同1

mousemove事件是当鼠标指针移动时触发的，即使是一个像素

如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题

$(".aaron1").mousemove(function(e) {
$(this).find('p:last').html('移动的X位置：' + e.pageX)
})

4.mouseover与mouseout事件

方法同1

</pre><pre name="code" class="html">var n = 0;
$(".aaron1 p:first").mouseover(function(e) {
$(".aaron1 a").html('进入元素内部,mouseover事件触发次数：' + (++n))
})

var n = 0;
//不同函数传递数据
function data(e) {
$(".right a").html('mouseover事件触发次数：' + (++n) + '<br/> 传入数据为 ：'+ e.data)
}

function a() {
$(".right p:first").mouseover('data = 慕课网', data)
}
a();

5.mouseenter与mouseleave事件

mouseenter事件和mouseover的区别

关键点就是：冒泡的方式处理问题

mouseover为例：

<div class="aaron2">
<p>鼠标离开此区域触发mouseleave事件</p>
</div>

如果在p元素与div元素都绑定mouseover事件，鼠标在离开p元素，但是没有离开div元素的时候，触发的结果:

p元素响应事件

div元素响应事件

这里的问题是div为什么会被触发？ 原因就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果有全触发了

mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发

所以在这种情况下面，jQuery推荐我们使用 mouseenter事件

6.hover事件

$(selector).hover(handlerIn, handlerOut)

handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数

handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数

7.focusin事件

元素或者其内部任何一个元素获得焦点的时候触发

方法同1

8.focusout事件

当一个元素，或者其内部任何一个元素失去焦点的时候触发

方法同1

9.blur与focus事件

focus()在元素本身产生，focusin()在元素包含的元素中产生

blur与focusout也亦是如此

10.change事件

input元素

</pre><p>监听value值的变化，当有改变时，<span style="color:#ff0000;">失去焦点后</span>触发change事件</p><p> select元素</p><p>对于下拉选择框，复选框和单选按钮，当用户用鼠标作出选择，该事件立即触发</p><p> textarea元素</p><p>多行文本输入框，当用户用鼠标点击时，该事件立即触发</p><p><strong>11.select事件</strong></p><p>当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。</p><p>方法同1</p><pre name="code" class="javascript"> $('textarea').select(function(e) {
alert(e.target.value);
});

12.submit事件

有时候开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作（例如：验证表单输入的正确性，如果错误就阻止提交，从新输入）此时可以通过submit事件，监听下提交表单的这个动作

能触发submit事件的行为：

<input type="submit">

<input type="image">

<button type="submit">

当某些表单元素获取焦点时，敲击Enter（回车键）

特别注意：

form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为

传统的方式是调用事件对象 e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可

jQuery处理如下：

$("#target").submit(function(data) {
return false; //阻止默认行为，提交表单
});

$('#target1').submit(function(e) {
alert('捕获提交表达动作,不阻止页面跳转')
});
//回车键或者点击提交表单,禁止浏览器默认跳转：
$('#target2').submit(function() {
alert('捕获提交表达动作,阻止页面跳转')
return false;
});

13.keydown()与keyup()事件

keydown事件：

当用户在一个元素上第一次按下键盘上字母键的时候，就会触发它

方法：

//直接绑定事件
$elem.keydown( handler(eventObject) )
//传递参数
$elem.keydown( [eventData ], handler(eventObject) )
//手动触发已绑定的事件
$elem.keydown()

keyup事件：

当用户在一个元素上第一次松手键盘上的键的时候，就会触发它。使用方法与keydown是一致的

理论上它可以绑定到任何元素，但keydown/keyup事件只是发送到具有焦点的元素上，不同的浏览器中，可获得焦点的元素略有不同，但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的。

$('.target1').keydown(function(e) {
$("em:first").text(e.target.value)
});
$('.target2').keyup(function(e) {
$("em:last").text(e.target.value)
});

注意：keydown事件触发在文字还没敲进文本框，这时如果在keydown事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本

14.keypress()事件

keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。

keypress事件与keydown和keyup的主要区别

keypress：

对中文输入法支持不好，无法响应中文输入

无法响应系统功能键（如delete，backspace）

keydown与keypress区别

虽然从字面理解, KeyDown是按下一个键的意思, 但实际上二者的根本区别是, 系统由KeyDown返回键盘的代码, 然后由TranslateMessage函数翻译成成字符, 由KeyPress返回字符值. 因此在KeyDown中返回的是键盘的代码, 而KeyPress返回的是ASCII字符. 所以根据你的目的,
如果只想读取字符, 用KeyPress, 如果想读各键的状态, 用KeyDown.

总之，KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。

15.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( 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()方法
通过off() 方法移除绑定的事件

$("elem").off("mousedown mouseup")

销毁全部事件：

$("elem").off()

17.jQuery事件对象

事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁

event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素

<ul>
<li>点击：触发一</li>
<li>点击：触发二</li>
<li>点击：触发三</li>
<li>点击：触发四</li>
</ul>
<script type="text/javascript">
//多事件绑定一
$("ul").on('click',function(e){
alert('触发的元素是内容是: ' + e.target.textContent)
})
</script>

jQuery事件对象的属性和方法

event.type：获取事件的类型

触发元素的事件类型

event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标

鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

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)和$(event.target);比如：event.target和$(event.target)的使用：

<body>
<h3>事件对象的属性与方法</h3>
<div class="left">
<div id="content">
外层div元素
<br />
<span style="background: silver;">内层span元素</span>
<br /> 外层div元素
</div>
<br />
<div id="msg"></div>
</div>
<script type="text/javascript">
//为 <span> 元素绑定 click 事件
$("span").click(function() {
$("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");
});
//为 Id 为 content 的 <div> 元素绑定 click 事件
$("#content").click(function(event) {
$("#msg").html($("#msg").html() + "<p>外层div元素被单击</p>");
event.stopPropagation(); //阻止事件冒泡
});
//为 <body> 元素绑定 click 事件
$("body").click(function() {
$("#msg").html($("#msg").html() + "<p>body元素被单击</p>");
});
</script>
</body>

18.trigger事件

trigger方法来触发浏览器事件

trigger事件会在DOM树上冒泡

$('#elem').on('Aaron', function(event,arg1,arg2) {
alert("自触自定义时间")
});
$('#elem').trigger('Aaron',['参数1','参数2'])

<body>
<h2>自定义事件trigger</h2>
<div class="left">
<div><span></span><span>0</span>点击次数</div>
<button>直接点击</button>
<button>通过自定义点击</button>
</div>
<script type="text/javascript">

//点击更新次数
$("button:first").click(function(event,bottonName) {
bottonName = bottonName || 'first';
update($("span:first"),$("span:last"),bottonName);
});

//通过自定义事件调用，更新次数
$("button:last").click(function() {
$("button:first").trigger('click','last');
});

function update(first,last,bottonName) {
first.text(bottonName);
var n = parseInt(last.text(), 10);
last.text(n + 1);
}
</script>
</body>

19.triggerHandler事件

若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替

尽管 .trigger() 模拟事件对象，但是它并没有完美的复制自然发生的事件

triggerHandler与trigger的用法是一样的，重点看不同之处：

triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()

.trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素

使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理

与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined

<body>
<h2>自定义事件triggerHandler</h2>
<div class="left">
<div>
<input type="text" value="" />
</div>
<button>trigger聚焦触发浏览器事件</button>
<button>triggerHandler聚焦没有触发浏览器事件</button>
</div>
<script type="text/javascript">

//给input绑定一个聚焦事件
$("input").on("focus",function(event,titie) {
$(this).val('聚焦')
});

//trigger触发focus
$("button:first").click(function() {
$("input").trigger("focus",['触发默认事件']);
});

//triggerHandler触发focus
$("button:last").click(function() {
$("input").triggerHandler("focus",'没有触发默认事件');
});

</script>
</body>