jQuery 处理页面的事件详解

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

1.绑定事件监听

https://www.jb51.net/article/60096.htm)对事件的监听做了详细的介绍,看到了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="https://www.jb51.net/article/11.jpg">
        <div></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.移除事件监听

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgxysg.html