在之前dom操作中提到了javascript对事件处理的介绍。由于不同浏览器处理事件各不相相同,这给开发者带来了不必要的麻烦,jQuery的方便的解决了这个方面的麻烦。

1.绑定事件监听

http://www.cnblogs.com/ahthw/p/4213521.html)对事件的监听做了详细的介绍,看到了iE和DOM标准浏览器对待事件监听的区别,并对多个监听事件执行顺序和方式也不相同。

在jQuery中,通过bind()对事件绑定,相当于IE浏览器的attachEvent()和标准DOM的addEventListener()。如下例子:

<script type="text/javascript">
$(function() {
$("img")
.bind("click", function() {
$("#show").append("<div>点击事件1</div>");
})
.bind("click", function() {
$("#show").append("<div>点击事件2</div>");
})
.bind("click", function() {
$("#show").append("<div>点击事件3</div>");
});
});
</script> <img src="11.jpg">
<div id="show"></div>

以上代码对img绑定了三个click监听事件.

bind()通用语法为

bind(eventType,[data],Listener)

其中,eventType为事件的类型,可以是blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/mouseup/onmouseover/onmouseover/onmouseout/mouseenter/onmouseleave/change/select/submit/onkeydown/keypress/keyup/error

data为可选参数,用来传递一些特殊的数据供监听函数使用。而listener为事件监听函数,上面的例子中使用匿名函数

对于多个事件类型,如果希望使用同一个监听函数,可以同事添加在eventType中,事件之间使用空格分离。

$(function() {
$("p").bind("mouseenter mouseleave", function() {
$(this).toggleClass("over")
})
});

另外一些特殊的事件类型可以直接利用事件名称作为绑定函数,接受参数为监听函数。例如之前反复使用的

$("p").click(function(){
//添加click事件监听函数
})

其中,通用语法为

eventTypeName(fn)

可以使用的eventTypeName包括

blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/onmouseup/mousemove/mouseover/mouseout/change/select/submit/
keydown/keypress/keyup/error等

除了bind()外,jQuery还提供了一个很实用的one()方法来绑定事件。该方法绑定回见出发了一次后就会自动删除,不再生效。

     //首先创建10个<div>块
for (var i = 0; i <; i++)
$(document.body).append($("<div>Click<br>Me!</div>"));
var iCounter = 1;
//每个都用one添加click事件
$("div").one("click", function() {
$(this).css({
background: "#8f0000",
color: "#FFFFFF"
}).html("Clicked!<br>" + (iCounter++));
});

例如上例,创建10个div,给每个div绑定一个函数事件,当点击div块时,函数执行一次便不再执行。

2.移除事件监听

jQuery采用unbind()来移除事件,该方法可以接受两个可选函数,也可不设置任何参数,例如下面的代码表示移除div标记的所有事件和P标记的所有click事件。

$("p").unbind("click");
$("div").unbind();

如果希望移除某个指定的事件,则必须使用unbind(eventType,listener)方法的第二个参数,例如:

var myFunc = function() {
//监听函数体
};
$("p").bind("click",myFunc);
$("p").unbind("click",myFunc);

例如以下代码

<script type="text/javascript">
$(function() {
var fnMyFunc1; //函数变量
$("img")
.bind("click", fnMyFunc1 = function() { //赋给函数变量
$("#show").append("<div>点击事件1</div>");
})
.bind("click", function() {
$("#show").append("<div>点击事件2</div>");
})
.bind("click", function() {
$("#show").append("<div>点击事件3</div>");
});
$("input[type=button]").click(function() {
$("img").unbind("click", fnMyFunc1); //移除事件监听myFunc1
});
});
</script> <img src="11.jpg">
<input type="button" value="移除事件1">
<div id="show"></div>

例如以上代码,添加了fnMyFunc1函数bind()绑定时将匿名函数赋值给他,从而作为unbind()函数调用名称。

3.传递事件对象。
http://www.cnblogs.com/ahthw/p/4216017.html介绍了对象的概念,并且分析了事件对象常用的属性和方法,可以看到事件对象在不同的浏览器之间存在很多区别,jQuery中没时间对象是通过唯一的方法传递给事件监听函数的。

<script type="text/javascript">
$(function() {
$("p").bind("click", function(e) { //传递事件对象e
var sPosPage = "(" + e.pageX + "," + e.pageY + ")";
var sPosScreen = "(" + e.screenX + "," + e.screenY + ")";
$("span").html("<br>Page: " + sPosPage + "<br>Screen: " + sPosScreen);
});
});
</script>
<p>点击此处</p>
<span id=""></span>

以上的代码给p绑定了鼠标click事件监听函数,并将事件对象作为参数传递,从而获取了鼠标事件触发点的坐标值。

对于事件的属性和方法,jQuery最重要的工作就是替开发者解决了兼容性问题,常用的属性和方法

属性 说明
altKey 按下alt键为ture,否则为false
ctrlKey 按下ctrl键为ture,否则为false
shiftKey 按下shift键为ture,否则为false
keyCode 对于keyup和keydown事件,返回按键的值(即a和A的值是一样的,都是65)
pageX,pageY 鼠标在客户端的位置,不包括工具栏,滚动条等
relateTarget

鼠标事件中,鼠标指针进入或离开元素。

screenX,screenY 鼠标在整个屏幕的位置。
target 引起事件的元素/对象
type 事件的名称,如click,mouseover等
which 键盘事件中为按键的unicode值,鼠标按键中代表鼠标按键(1左键 2中键 3为右键)
stopPropagation() 阻止事件向上冒泡。
preventDefault() 阻止事件默认行为
   

4.事件的触发

有些时候希望用户在没有任何操作的情况下来触发事件。比如在打开页面后自动单击一次运行监听函数。希望单击一个按钮时其它按钮也同事被单击等。jQuery土工了tigger(eventTepe)来实现事件的触发,其中参数ebentType为合法的事件类型,例如click,submit等

例如下面例子:有两个按钮,分别都有自己的事件监听函数,当单击按钮1时运行自己的监听函数,单击按钮2时除了运行自己的监听函数,还运行了按钮1的监听函数,仿佛按钮1也被单击了

<script type="text/javascript">
function Counter(oSpan) {
var iNum = parseInt(oSpan.text()); //获取span中本身的值
oSpan.text(iNum + 1); //点击次数加1
}
$(function() {
$("input:eq(0)").click(function() {
Counter($("span:first"));
});
$("input:eq(1)").click(function() {
Counter($("span:last"));
$("input:eq(0)").trigger("click"); //触发按钮1的点击事件
});
});
</script>
<input type="button" value="Button 1">
<input type="button" value="Button 2">
<br>
<br>
<div>按钮1点击次数:<span>0</span>
</div>
<div>按钮2点击次数:<span>0</span>
</div>

对于特殊的事件类型 ,例如blur,change,click,focus,select,submit等,还可以直接以事件名称作为触发函数。以上触发按钮1的语句等于:

$("input:eq(0)").click();

(本节完)

jQuery使用之(五)处理页面的事件的更多相关文章

  1. Jquery UI Dialog 导致C#页面后台事件失效

    $(function () { dialog = $("#dialog-form").dialog({ autoOpen: false, height: 450, width: 5 ...

  2. jQuery插件开发的五种形态[转]

    这篇文章主要介绍了jQuery插件开发的五种形态小结,具体的内容就是解决javascript插件的8种特征,非常的详细. 关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队 ...

  3. 利用Jquery的load函数实现页面的动态加载

    利用Jquery的load函数实现页面的动态加载  js的强大功能相信大家都知晓,今天通过jquery的库函数load可以更加方便的实现页面的动态刷新,经过几天的研究与探索,终于有所成效!吾心甚蔚! ...

  4. jQuery delegate方法实现Ajax请求绑定事件不丢失

    给元素绑定click事件后 ,遇到一个问题:当执行一些ajax请求,再次调用此页面,里面的这个click事件就失效了 比如说:我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了clic ...

  5. 使用JS或jQuery模拟鼠标点击a标签事件代码

    原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...

  6. ie下,jquery为动态添加的节点添加事件,用live

    jQuery向动态生成的内容添加事件响应 jQuery live() 方法详解 [收藏] 发布时间:2013-07-24 点击次数:176 来源:www.daimajiayuan.com jQuery ...

  7. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  8. js进阶 14 jquery的ajax有哪些函数和事件(多练)

    js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...

  9. 微信小程序把玩(五)页面生命周期

    原文:微信小程序把玩(五)页面生命周期 这里只要熟悉页面的基本生命周期即可,业务在指定生命周期函数内书写. 以下是官网给出的生命周期函数方法和状态图 上面的生周期函数图对于做Android 或者IOS ...

随机推荐

  1. git报错 error: cannot stat ‘'web/js': Permission denied

    切换分支时报错: error: cannot stat ‘'web/js': Permission denied 解决方法:退出编辑器.浏览器.资源管理器等,然后再切换就可以了.

  2. 解决android的ListView嵌套在ScrollView中不能被滚动的问题

    使用滚动条容易带来一个后果,就是高度和宽度不受控制了, 之前就遇到一个已经有ScrollView的页面需要加个列表listView,然后就发现listView只看到前两行数据,下面的看不到,拉滚动条也 ...

  3. vs安装mvc

    需要一个MVC框架和SP1补丁包,SP1补丁包的下载地址为:http://www.microsoft.com/downloads/details.aspx?FamilyID=27673c47-b3b5 ...

  4. log4j加载方式导致的bae和sae部署异常

    这2天改在bae上部署代码,为了便于程序的功能测试,引入了log4j日志,但是问题来了..测试程序采用的是spring3.2.8框架搭建,web.xml引入日志代码为: <context-par ...

  5. DAC使用基本准则

    DAC Nyquist Zones, Zero Order Hold, and Images why do the Fout images exist in every Nyquist zone? W ...

  6. 利用HttpListener创建简单的HTTP服务

    using System; using System.Collections.Generic; using System.IO; using System.IO.Compression; using ...

  7. Codeforces Round 261 Div.2 D Pashmak and Parmida's problem --树状数组

    题意:给出数组A,定义f(l,r,x)为A[]的下标l到r之间,等于x的元素数.i和j符合f(1,i,a[i])>f(j,n,a[j]),求有多少对这样的(i,j). 解法:分别从左到右,由右到 ...

  8. FZU 2150 Fire Game --两点同步搜索

    枚举两点,然后同步BFS,看代码吧,很容易懂的. 代码: #include <iostream> #include <cstdio> #include <cstring& ...

  9. 利用Clip制作打洞效果

    起因 如上篇博文所说,连线原型需要在中间文字上下各留15像素的空白.设计师完成原型之后,问我有没有办法实现,我说,我能想到两种实现方式.其中一种就是上篇博文所说的OpacityMask.第二种就是使用 ...

  10. java 21-13 合并

    SequenceInputStream(Enumeration<? extends InputStream> e)           通过记住参数来初始化新创建的 SequenceInp ...