jQuery 处理页面的事件详解
来源: 阅读:1394 次 日期:2015-03-25 11:27:52
温馨提示: 小编为您整理了“jQuery 处理页面的事件详解”,方便广大网友查阅!

这篇文章主要详细介绍了jQuery 处理页面的事件的方法及相关资料,需要的朋友可以参考下

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

1.绑定事件监听

()对事件的监听做了详细的介绍,看到了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 < 10; 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.传递事件对象。

介绍了对象的概念,并且分析了事件对象常用的属性和方法,可以看到事件对象在不同的浏览器之间存在很多区别,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() 阻止事件默认行为

以上即是本文的全部内容了,讲解的非常详细,希望大家能够喜欢。

更多信息请查看IT技术专栏

更多信息请查看脚本栏目
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map