`

JQuery的事件

 
阅读更多

 

事件是脚本编程的灵魂,本篇来介绍jQuery中的事件处理及事件对象.

http://www.cnblogs.com/oneword/archive/2010/11/22/1884413.html

事件与事件对象

首先,我们来看一下经常使用的添加事件的方式:

<input type="button" id="btn" value="click me!" onclick="showMsg();" />
<script type="text/javascript">
    function showMsg() {
        alert("msg is showing!");
    }
</script>

我们最常用的是为元素添加onclick元素属性的方式来添加事件.现在,我们来看另一种添加事件的方式,通过修改dom属性的方式来添加事件:

<input type="button" id="btn2" value="click me!" />
<script type="text/javascript">
    function showMsg() {
        alert("msg is showing!");
    }

    $(function () {
        document.getElementById("btn2").onclick=showMsg;
    });
</script>

添加元素属性和修改dom属性这两种方法的效果相同,但不等效.

$(function () {
    //等效于<input type="button" id="btn2" value="click me!" onclick="alert('msg is showing!')" />
    document.getElementById("btn2").onclick = showMsg;
});

//相当于:
//  document.getElementById("btn").onclick=function(){
//      alert("msg is showing!");
//  }
<input type="button" id="btn" value="click me!" onclick="showMsg();" />

这两种方式的弊端是:

  1. 只能为一个事件添加一个事件处理函数.使用赋值符会将前面的函数冲掉.
  2. 在事件处理函数中,获取事件对象的方式不同.
  3. 添加多播委托的函数在不同浏览器中不同.

多播委托指:在ie中通过dom.attachEvent,在firefox中通过dom.addEventListener方式来添加事件.

所以,我们应该摒弃在通过修改元素属性和通过对Dom属性修改的方式添加事件,而应该使用多播事件的委托方式添加事件处理函数.

jQuery中的事件

使用jQuery事件处理函数的好处是:

1.添加的是多播事件委托

我们可以为dom的click事件添加一个函数后,再次添加一个函数.

2.统一了事件名称

 添加多播委托时,ie在事件名称前加了"on",而firefox则直接使用事件名称

3.可以将对象行为全部用脚本控制

使用脚本控制元素行为,使用HTML标签控制元素内容,用CSS控制元素样式,从而达到了元素的行为、内容、样式分离的状态.

下面是基础的jQuery事件处理函数:

注意:

我们可以为同一个事件绑定多个事件处理函数,代码如下:

$("#dv1").bind("click", function () { alert("first click!"); })
    .bind("click", function () { alert("second click!"); }); 

trigger和triggerHandler函数举例:

<script type="text/javascript">
    $(function () {
        //客户端:
        //      alert("client clicked!");
        //服务器端:
        //      返回from server
        $("#button").click(function () {
            alert("client clicked!");
        });

        //trigger触发了id为button的客户端事件,并使其提交
        $("#trigger").click(function () {
            $("#button").trigger("click");
        });

        //triggerHandler触发了id为button的客户端处理函数,但并不使其提交,触发服务器端事件.
        //即,triggerHandler只触发了id为button的click事件处理函数
        //    function () {
        //        $("#button").triggerHandler("click");
        //    }
        $("#triggerHandler").click(function () {
            $("#button").triggerHandler("click");
        });
    });
</script>
<form id="form1" runat="server">
    <input type="button" id="trigger" value="trigger" />
    <input type="button" id="triggerHandler" value="triggerHandler" />
    <asp:Button runat="server" ID="button"  Text="click me!" onclick="button_Click" />
</form>

那么在使用trigger和triggerHandler函数时,如何传递参数呢?

$(function () {
    //click快捷事件绑定的参数的第一个参数为事件对象
    //      第二个参数为数据
    $("#button").click(function (event, msg) {
        alert(msg);
    });

    $("#trigger").click(function () {
        $("#button").trigger("click", ["client!"]);
    });

    $("#triggerHandler").click(function () {
        $("#button").triggerHandler("click", ["client!"]);
    });
});

快捷事件

我们可以使用事件处理函数完成对象事件的几乎所有操作,但jQuery提供了更加简单的办法来封装事件.

在jQuery中,单击事件对应着的两个方法是click()和click(fn),分别用来触发单击事件和设置单击事件. 

//设置click事件
$("#dv1").click(function () { alert("click!"); });
//click(fn)方法等效于
$("#dv1").bind("click", function () { alert("click!"); })

//触发click事件
//$("#dv1").click();
//click()方法等效于
//  注意此处:等效于trigger,而不是triggerHandler
$("#dv1").trigger("click");

jQuery有许多快捷事件,具体参见帮助.

事件委派

1、live(type,fn)

说明:

给所有当前以及将来可能匹配的元素绑定一个事件处理函数

与bind方法的区别:

用live来绑定事件会给当前以及未来可能匹配的元素绑定事件处理函数.而bind只为当前匹配的元素绑定事件处理函数.

2、die([type],[fn])

说明:

移除使用live函数绑定的事件.

如果指定了type和fn参数,则移除指定type的fn事件处理函数

如果指定了type参数,则移除指定type的所有事件处理函数

如果没有指定函数,则移除匹配元素的所有事件处理函数

例子:

$(function () {
    //为所有的段落添加一个click事件
    $("p").live("click", function () {
        alert(this.innerHTML);
    });
    
    //添加一个段落
    $("#add").click(function(){
        $("<p/>").html(new Date().getTime()).insertAfter($("p:last"));
    });
    
    //删除段落的click事件处理函数
    $("#remove").click(function(){
        $("p").die();
    });
});

事件切换

 事件切换方法有以下两个:

函数名 说明
hover(over,out) 一个模仿悬停事件的方法.
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
toggle(fn,fn) 每次点击后,依次触发函数
如果点击了一个匹配的元素后,则执行指定的第一个事件处理函数;
当再次点击该元素时,会执行下一个事件处理函数;
如果有更多函数,则依次触发,直到最后一个,然后循环调用.

hover(over,out)函数举例:

$("#menu").hover(function () { $("#submenu").css("display", "block"); },
                 function () { $("#submenu").css("display", "none"); }
        );

toggle(fn,fn)函数举例:

$("#menu").toggle(function () { $("#menu").css("color", "red"); },
                 function () { $("#menu").css("color", "green"); },
                 function () { $("#menu").css("color", "blue"); }
        );

使用jQuery事件对象

jQuery统一了事件对象,当绑定事件处理函数时,会将jQuery格式化后的事件对象作为唯一参数传入:

$("#dv1").bind("click", { foo: "ooo" }, function (e) {
    alert(e.data.foo) 
}); 

在上例中,{foo:"ooo"}是通过e.data传递进事件处理函数内部的.现在我们来看看e有哪些常用的属性和方法.

jQuery事件对象的属性,属性是随着事件类型而变化的,例如对于click事件,则么有currentTarget属性,而对于mouseover事件,则拥有该参数.下表仅列了部分属性:

属性名 说明
currentTarget 冒泡前的当前事件的Dom对象,等同于this
data 事件调用时传递的数据
result 上一个事件处理函数返回的值
target 获取事件触发者的Dom对象
timeStamp 事件发生的时间戳
type 事件类型

jQuery事件对象的函数:

分享到:
评论

相关推荐

    jQuery事件函数共4页.pdf.zip

    《jQuery事件函数共4页.pdf》是一份详细探讨jQuery事件处理的资料,它涵盖了JavaScript库jQuery中的关键事件处理概念和函数。jQuery简化了DOM(文档对象模型)事件处理,使得在网页交互中添加、移除和触发事件变得...

    jQuery事件及绑定.pptx

    jQuery事件基础 1、jQuery事件概述 jQuery对JavaScript操作DOM事件进行了封装,形成了更好的事件处理机制; 包括常用事件、事件绑定与解绑等。jQuery事件处理方法是jQuery的核心函数。 常用事件方法(教材P263表A-4...

    jQuery 事件

    jQuery 事件 jQuery 是为事件处理特别设计的。 什么是事件? 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 实例: 在元素上移动鼠标。 选取单选按钮 点击元素 ...

    jQuery事件和动画.ppt

    jQuery事件和动画.,对刚学习的同学帮助很大

    JQuery事件Demo

    **jQuery事件Demo详解** 在Web开发中,JavaScript的事件处理是构建交互式用户界面的关键技术。jQuery库大大简化了这一过程,提供了丰富的API和方法来处理DOM(文档对象模型)中的事件。本篇文章将深入探讨jQuery...

    WEB开发 之 jQuery 事件.docx

    总的来说,jQuery事件处理是Web开发中增强用户体验的关键工具,通过合理利用这些功能,开发者可以创建出响应迅速、交互丰富的网站和应用程序。了解并熟练掌握jQuery的事件处理机制,对于提升Web开发效率和代码质量...

    jquery快速学三(事件与动画)

    通过以上对jQuery事件处理和动画效果的讲解,相信你已经对这两个主题有了全面的理解。结合实际的HTML文档,不断练习和探索,你将能熟练运用jQuery,提升网页交互体验。在实践中,不断学习,持续进步,是成为优秀的...

    triggerTracker, 用于跟踪jQuery事件的jQuery调试工具.zip

    triggerTracker, 用于跟踪jQuery事件的jQuery调试工具 triggerTrackerTriggerTracker是跟踪jQuery事件的工具。 它是一个单独的JavaScript文件,当加载时,它向与jQuery事件触发和事件处理程序相关的浏览器的控制台...

    jQuery学习5 jQuery事件模型

    jQuery事件模型是JavaScript库jQuery中的核心功能之一,它简化了事件处理程序的创建和管理,使得跨浏览器的事件处理变得更加简单。以下是对jQuery事件模型的详细说明: 1. **统一事件处理程序方法**:jQuery提供了...

    jQuery事件和动画.md

    jQuery事件和动画.md

    a1392558812#myShare#21.jquery事件处理1

    jquery事件处理。

    jquery-事件冒泡

    jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡...

    jquery事件与动画资料

    jquery事件与动画,初学者不明白怎么用看看pdf吧,这是老师发的

    理解jquery事件冒泡

    一、什么是jquery事件冒泡 在很多教材或者手册都可能会涉及到事件冒泡的概念,老手来说这当然是最基本的概念,但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡...

    第17周-第17章节-JQuery事件之组织事件的发生.avi

    第17周-第17章节-JQuery事件之组织事件的发生.avi

    jQuery事件对象的属性和方法详解

    jQuery事件对象的属性和方法,供大家参考,具体内容如下 事件对象的属于与方法有很多,但是我们经常用的只有那么几个,这里我主要说下作用与区别 event.type:获取事件的类型 触发元素的事件类型 $("a").click...

    jquery效果事件

    三、jQuery事件 1. 基本事件绑定:jQuery提供了`.on()`方法来绑定事件。例如,`$("#myButton").on("click", function() { ... })`表示当id为"myButton"的元素被点击时,执行匿名函数内的代码。 2. 鼠标事件:常见...

    自己收集的26个一些少见的jquery事件事例

    jquery事件种类繁多,有些事件的实用性在我们工作过程中都常用到,但实用性不强的,工作过程用不到的事件很多被遗忘,等真用时,有可能都不知道有这功能。我这里针对不常用的一些事件进行梳理整理一下,共26个。喜欢...

    可制作炫酷页面滚动效果的jQuery事件插件

    插件描述:该插件可制作炫酷页面滚动效果,包含有一组预置的jQuery事件,通过这些事件,可以在页面滚动时为指定元素制作相应的动画效果。 参考示例:http://www.jq22.com/jquery-info6220

Global site tag (gtag.js) - Google Analytics