| 标题 | 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() 阻止事件默认行为 以上即是本文的全部内容了，讲解的非常详细，希望大家能够喜欢。 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。