欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery编程开发中页面的事件处理方法详解

程序员文章站 2024-02-05 19:11:22
在之前dom操作中提到了javascript对事件处理的介绍。由于不同处理事件各不相相同,这给开发者带来了不必要的麻烦,jquery的方便的解决了这个方面的麻烦。 1.绑定事件监...

在之前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/onmouver/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() 阻止事件默认行为