jQuery使用之(五)处理页面的事件

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

1.绑定事件监听

http://www.cnblogs.com/ahthw/p/4213521.html)对事件的监听做了详细的介绍,看到了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.传递事件对象。
http://www.cnblogs.com/ahthw/p/4216017.html介绍了对象的概念,并且分析了事件对象常用的属性和方法,可以看到事件对象在不同的浏览器之间存在很多区别,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() 阻止事件默认行为
   

(未完待续)

时间: 2024-10-08 15:22:07

jQuery使用之(五)处理页面的事件的相关文章

Jquery UI Dialog 导致C#页面后台事件失效

$(function () { dialog = $("#dialog-form").dialog({ autoOpen: false, height: 450, width: 500, modal: true, close: function () { } }); //添加下面的代码就可解决了 dialog.parent().appendTo(jQuery("form:first")); })

jQuery元素的尺寸、位置和页面滚动事件

1.获取和设置元素的尺寸 <!doctype html><html><head><meta charset="utf-8"><title>获取尺寸</title><script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script><script type=&qu

jquery实现的点击页面其他地方隐藏显示的元素

jquery实现的点击页面其他地方隐藏显示的元素:在实际应用中,可能有这样的效果,那就是有这样一个弹出层,点击层本身的时候,这个层不会隐藏,而点击除去层之外的页面其他地方则会将这个层隐藏,下面就通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="

jQuery的ready与js的load事件的区别

摘自:http://www.cnblogs.com/see7di/archive/2011/07/15/2239677.html 为了理解这两个事件的异同,读者应该先了解HTML文档加载的顺序. DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关系.一般浏览器渲染操作的顺序大致按如下几个步骤来完成.(1) 解析HTML结构.(2) 加载外部脚本和样式表文件.(3) 解析并执行脚本代码.(4) 构造HTML DOM模型.(5) 加载图片等外部文件.(6) 页面加载完毕. 具体说明如下.1. 执

jquery之获取某个元素上的事件

jquery的给元素绑定的事件可以用data方法取出来 通过$(element).data("events")来获取 // 比如给一个button绑定两个click事件 $("button").click(function() { alert("1") }); $("button").click(function() { alert("2") }); // 这个时候点击该button会分别弹出 2 和1的a

jquery data方法获取某个元素上事件

获取某个元素上的事件,jquery的给元素绑定的事件可以用data方法取出来. 通过$(element).data("events")来获取 // 比如给一个button绑定两个click事件 $("button").click(function() { alert("1") }); $("button").click(function() { alert("2") }); // 这个时候点击该button

使用JS或jQuery模拟鼠标点击a标签事件代码

原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" href="abc.aspx" style="visibility: hidden;">下一步</a> $("#alink").click(); // 触发了a标签的点击事件,但是没有触发页面跳转 document.getEleme

ie下,jquery为动态添加的节点添加事件,用live

jQuery向动态生成的内容添加事件响应 jQuery live() 方法详解 [收藏] 发布时间:2013-07-24 点击次数:176 来源:www.daimajiayuan.com jQuery live() 方法是给所有匹配的元素附加一个事件处理函数,即使这个元素是以后通过append,prepend,after等事件生成后的内容也依然有效. 这个方法可以看做是 .bind() 方法的一个变体.使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有.

第五个页面:更多电影页面

笔记内容:第五个页面:更多电影页面 笔记日期:2018-01-27 跳转到更多电影页面以及获取电影类型 因为要编写一个新的页面,所以第一件事情就是创建好目录以及文件: 我们需要实现两个功能,一是点击电影资讯页面上的 "更多" 时,跳转到更多电影页面中,二是跳转时要获取相应的电影类型. 编辑movie-list-template.wxml,修改内容如下: <import src='../movie/movie-template.wxml' /> <template na

[修练营 jQuery]使用contactable达到在页面上寄送feedback mail给管理者

前言 我们常常有个需求,是类似提供客服信箱的功能,让使用者可以很方便的将宝贵的意见feedback给站方管理者. 最常看到的就是,在menu或是页面的footer上,加上一个客服信箱的连结, 或是自己写一个表单,可以帮忙寄送相关资讯给站方. 没错,现在jQuery也有类似这样的plug-in,而且真的相当漂亮,还搭配动画让页面表现的更生动. 这边我要介绍的plug-in叫做"contactable",目的就是在页面上安插一个表单,类似用书签夹着的效果, 点一下就会像把书签抽出来的效果,