标签：
jQuery扩展了JavaScript的基本事件处理机制，极大增强了事件处理能力
|
1
|
$(window).load(function(){}) |
某个元素需要绑定一个事件时，需要bind方法。
|
1
|
bind(type,[.data],fn); |
bind方法三个参数：
第一个是事件类型（包括blur、focus、load、resize.....）——JavaScript的事件把on去掉就是jQuery的事件
|
1
2
3
4
5
6
7
8
|
<div id="panel"> <h5 class="head">bind(type,[data],fn)意味着什么？</h5> <div class="content"> <p><strong>type:</strong> 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。</p> <p><strong>data:</strong>作为event.data属性值传递给事件对象的额外数据对象</p> <p><strong>fn:</strong>绑定到每个匹配元素的事件上面的处理函数</p> </div></div> |
css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
*{ margin:0; padding:0;}#panel{ width: 600px; border:1px solid #ccc; margin: 50px auto;}h5{ line-height: 40px; font-size: 20px; background: rgb(123,192,244); padding-left: 10px;}.content{ display: none; padding: 10px;} |
|
1
2
3
4
5
6
7
8
9
10
11
|
$(document).ready(function(){ var bShow=false; $(‘#panel h5.head‘).bind(‘click‘,function(){ if(bShow==false){ $(‘.content‘).show(); }else{ $(‘.content‘).hide(); } bShow=!bShow; })}) |
上一段jq代码用了一个布尔值来实现点击显示隐藏。在jq中有自己的办法is(‘:visible‘)。同时让内容换成next()函数。
|
1
2
3
4
5
6
7
8
9
|
$(document).ready(function(){ $(‘#panel h5.head‘).bind(‘click‘,function(){ if($(this).next().is(‘:visible‘)){ $(this).next().hide(); }else{ $(this).next().show(); } })}) |
例4.1中，运用的是click点击事件，同样可以换成其它。比如mouseover/mouseout。
前面前面章节的案例中已经用过简写，诸如xxx.bind(事件,function(){})都可以简写为
|
1
2
3
|
xxx.事件(function(){ do sth}) |
唯一的区别就是代码量。
hover和toggle——后者在1.8+版本不再支持。
hover(fn1,fn2)
hover用于模拟鼠标悬停/离开的过程,悬停时触发fn1，离开时触发fn2。如果我想把例4.1的代码改写成悬停离开的形式，可以使用hover
|
1
2
3
4
5
6
7
8
9
|
$(document).ready(function(){ $(‘#panel h5.head‘).hover( function(){ $(this).next().show(); },function(){ $(this).next().hide(); } )}) |
hover的目标不是替代mouseover和mouseout。hover是指分别当鼠标指针进入和离开元素时被执行的事件相当于mouseenter+mouseleave。而mouseover鼠标进入某个元素或其子元素时触发。
toggle(fn1,fn2,fn3....)
第一次单击触发fn1,第二次触发fn2...
jq引入也event参数————它其实是一个只有事件处理函数才能访问的事件对象。函数执行完毕后，event将被销毁。
jq提供了preventDefaut方法。
表单是阻止默认行为最多的地方之一。
|
1
2
3
4
|
用户名：<input type="text" name="user"/>密码：<input type="password" name="pass"/><input type="submit" value="提交" /> |
这里的代码中，点击提交按钮，就会跳转到form预定的网址。我们需要在用户名和密码为空的时候，阻止跳转。
|
1
2
3
4
5
6
7
8
|
$(function(){ $(‘:submit‘).click(function(event){ if($(‘#form1 :text‘).val()==‘‘||$(‘#form1 :password‘).val()==‘‘){ alert(‘用户名或密码不得为空！‘); event.preventDefault(); } })}) |
这二者如果要同时进行，或者不影响彼此的话，可以return false。
理解事件冒泡
简单地说就是多个有直系从属关系的对象响应同一个事件。子集发生事件后不断往父级传递。最具体的对象首先被响应。事件冒泡给实际应用带来麻烦。
阻止事件冒泡在js中运用的是cancelBubble方法。通过引入event——
|
1
2
|
var oEvent=ev||event;oEvent.cancelBubble=true; |
在jQuery中，提供了stopPropagation。
|
1
|
event.sotpPropagation(); |
比如一个超链接中href指向一个网址。以此对象采用$(‘a‘).target得到的是这个网址。
获取鼠标相对于页面的x和y坐标。在js中通常是event.clientX和event.clientY。注意：如果有滚动条，还需要加上滚动条的高度。这里的event可以理解为就是光标。
有三个值1,2,3，分别代表获取鼠标点击的左中右键。
获取键盘事件中的ctrl键。
|
1
|
unbind(type,[data|fn]]) |
第一个参数type表示事件类型，第二个表示要移除的函数。
如果什么参数都不写，直接移除所有的绑定事件。假设绑定的点击事件有fn1和fn2两个函数，如下：
|
1
|
$(‘#btn‘).unbind(‘click‘,fn1); |
按钮btn在被点击时，不再执行名字为fn1的函数。fn2依然在点击时继续执行。
对于仅仅执行一次的函数，可以不用bind方法来绑定。而用one()方法。
|
1
|
$(‘#btn‘).one(‘click‘,fn1); |
btn在被点一次之后，再怎么点都不会执行fn1了。
（1）trigger()方法介绍
常见的比如当用户鼠标划过某处就加载页面时弹出第二个页面，或者按下enter执行发送信息。就调用了模拟click的方法。
|
1
|
$(‘#btn‘).trigger(‘click‘); |
按钮btn在没被点击时（也许页面加载同时），就发生了click事件——很讨厌对吧。
(2)自定义事件
trigger()方法相当有意思。你可以自行DIY一个事件，然后用trigger()执行。
|
1
2
|
$(‘#btn‘).bind(‘haha‘,function(){...});$(‘#btn‘).trigger(‘haha‘); |
（3）参数的传递
|
1
|
<input id="btn" type="button" value="haha" /> |
|
1
2
3
4
5
6
|
$(function(){ $(‘#btn‘).bind(‘haha‘,function(event,a,b){ $(‘html‘).append(‘<p>两者之和是：‘+(a+b)+‘</p>‘) }); $(‘#btn‘).trigger(‘haha‘,[1,1]);}) |
显示结果：
这跟调用函数又好像没什么区别了。
trigger可以模拟操作。得到不一样的体验。设想一个场景，当你在web聊天室发送消息，可以通过ctrl+enter模拟点击发送按钮。
但是有个问题，比如说使用focus事件，会导致焦点移动到事件对象处——这时需要阻止。应采用
triggerHandler()方法，用法和trigger一样。
|
1
2
3
4
5
|
$(function(){ $(‘#btn‘).bind(‘mouseover mouseout‘,function(event,a,b){ $(this).toggleClass(‘hover‘) });}) |
也就是说，相同的函数，不同的事件，可以写在一起。
也就是前面说的DIY一个事件，其实可以作为命名空间。
|
1
2
3
4
5
6
7
8
|
$(function(){ $(‘#btn1‘).bind(‘click.haha dbclick‘,function(){ do something }); $(‘#btn2‘).click(function(){ $(‘#btn1‘).unbind(‘.haha‘) });}) |
以上代码只取消了click事件（通过命名空间）但不取消dbclick事件。
把上面的代码改一改；
|
1
2
3
4
5
6
7
|
$(function(){ $(‘#btn1‘).bind(‘click.haha‘,fn1) .bind(‘click‘,fn2); $(‘#btn2‘).click(function(){ $(‘#btn1‘).trigger(‘click!‘); });}) |
如果单击btn1，click和click.haha两个函数都发生。单击btn2，只发生没有命名空间的click事件。因此fn1不会发生。
标签：
原文地址：http://www.cnblogs.com/djtao/p/5928471.html
