脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery编程开发中页面的事件处理方法详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
在之前dom操作中提到了javascript对事件处理的介绍。由于不同浏览器处理事件各不相相同，这给开发者带来了不必要的麻烦，jQuery的方便的解决了这个方面的麻烦。
1.绑定事件监听
（http://www.cnblogs.COM/article/60096.htm）对事件的监听做了详细的介绍，看到了iE和DOM标准浏览器对待事件监听的区别，并对多个监听事件执行顺序和方式也不相同。
在jquery中，通过bind()对事件绑定，相当于IE浏览器的attachEvent()和标准DOM的addEventListener()。如下例子：
代码如下:
<script tyPE="text/javascript">
$(function() {
$("img")
.bind("click", function() {
$("#show").append("<p>点击事件1</p>");
})
.bind("click", function() {
$("#show").append("<p>点击事件2</p>");
})
.bind("click", function() {
$("#show").append("<p>点击事件3</p>");
});
});
</script>
<img src="11.jpg">
<p id="show"></p>
以上代码对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个<p>块
for (VAR i = 0; i < 10; i++)
$(document.body).append($("<p>Click<br>Me!</p>"));
var iCounter = 1;
//每个都用One添加click事件
$("p").one("click", function() {
$(this).css({
background: "#8f0000",
nbsp; color: "#FFFFFF"
}).htML("Clicked!<br>" + (iCounter++));
});
例如上例，创建10个p,给每个p绑定一个函数事件，当点击p块时，函数执行一次便不再执行。
2.移除事件监听
jQuery采用unbind()来移除事件，该方法可以接受两个可选函数，也可不设置任何参数，例如下面的代码表示移除p标记的所有事件和P标记的所有click事件。
代码如下:
$("p").unbind("click");
$("p").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("<p>点击事件1</p>");
})
.bind("click", function() {
$("#show").append("<p>点击事件2</p>");
})
.bind("click", function() {
$("#show").append("<p>点击事件3</p>");
});
$("input[type=button]").click(function() {
$("img").unbind("click", fnMyFunc1); //移除事件监听myFunc1
});
});
</script>
<img src="11.jpg">
<input type="button" value="移除事件1">
<p id="show"></p>
例如以上代码，添加了fnMyFunc1函数bind()绑定时将匿名函数赋值给他，从而作为unbind()函数调用名称。
3.传递事件对象。
http://www.cnbLOGs.com/article/60096.htm介绍了对象的概念，并且分析了事件对象常用的属性和方法，可以看到事件对象在不同的浏览器之间存在很多区别，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() 阻止事件默认行为
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery编程开发中页面的事件处理方法详解全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery编程开发中页面的事件处理方法详解所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。