jQuery中的事件

【加载DOM】

在常规的JavaScript代码中，通常使用window.onload方法，在jQuery中，使用的是$(document).ready()方法。极大地提高了web应用程序的响应速度。

执行时机

此方法在DOM完全就绪时就可以被调用。因此可能此时元素的关联文件未下载完。由此可以使用jQuery中另一个关于页面加载的load()方法。load()方法会在元素onload事件中绑定一个处理函数。如果函数绑定给window对象，则会在所有内容加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

$(window).load(function(){

    //编写代码

})

多次使用：JavaScript的onload事件只能保存对一个函数的引用，它会自动用后面的函数覆盖前面的函数。而jQuery的$(document).ready()方法能很好的处理这些情况。

简写方式：$(document).ready(function(){])可以简写为$(function(){})。而且$(document)可以简写为$()，当$()不带参数时，默认参数是document，因此可以简写为$().ready(function(){})。

【事件绑定】

可以使用bind()方法来对匹配元素进行特定事件的绑定，其调用格式为：bind(type[,data],fn);

bind()方法有三个参数：第一个是事件类型；第二个是可选参数，作为event.data属性值传递给事件对象的额外数据对象；第三个是用来绑定的处理函数。

基本效果

<div id="pane1">

    <h5 class="head">什么是jQuery？</h5>

    <div class="content">

        jQuery就是jQuery啊，要想知道，自己百度去。

    </div>

</div>

再加上它的jQuery代码：

$(function(){

    $("#pane1 h5.head").bind("click",fuction(){

        $(this).next().show();   //$(this).next():获取“内容”元素

    })

})

加强效果：单击标题链接，内容出现，再击，内容消失。jQuery代码如下

$(function(){

    $("pane1 h5.heaf").bind("click",function(){

        var $content=$(this).next();

        if($content.is(":visible")){    //如果“内容”显示

            $content.hide();

        }else{

            $concent.show();

        }

    })

})

改变绑定事件的类型：把事件类型从click换成mouseover和mouseout。即当光标滑过时，就触发事件。jQuery代码如下

$(function(){

    $("pane1 h5.heaf").bind("mouseover",function(){

           $(this).next().show();

        }).bind("mouseout",function(){

           $(this).next().hide();

    })

})

简写绑定事件：如上代码改写成使用简写绑定事件的方式

$(function(){

    $("pane1 h5.heaf").mouseover(function(){

           $(this).next().show();

        }).mouseout(function(){

           $(this).next().hide();

    })

});

【合成事件】

jQuery有两个合成事件——hover()方法和toggle()方法，都属于jQuery自定义的方法。

hover()方法：语法结构为hover(enter,leave);用于模拟光标悬停事件，当光标移动到元素上时，会触发指定的第一个函数（enter）；当光标移出这个元素时，会触发指定的第二个函数（leave）。

toggle()方法：语法结构为toggle(fn1,fn2,...fnN);用于模拟鼠标连续单击事件，第一次单击，触发第一个；第二次，触发第二个；依次触发。直到最后一个，随后的每次单击都重复对这几个函数的轮番调用。

toggle()方法在jQuery中还有一个作用：切换元素的可见状态。如果元素是可见的，单击切换后则为隐藏，反之则可见。具体的在《锋利的jQuery》的P107页。

【事件冒泡】

事件冒泡引发的问题：有可能会引发意料之外的效果，因此，有必要对事件的作用范围进行限制。

事件对象:在程序中使用事件对象，只需为函数添加一个参数即可。jQuery代码如下：

$("element").bind("click",function(event){  //event：事件对象

    //......

});

当单击“element”元素时，事件对象就被创建了。这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就销毁了。

停止事件冒泡：可以阻止事件中其他对象的事件处理函数被执行。在jQuery中提供了stopPropagation()方法来停止事件冒泡。

$('span').bind("click",function(event){

    var txt=$('#msg').html()+"<p>内层span元素被单击</p>";

    $('#msg').html(txt);

    event.stopPropagation();         //停止事件冒泡

});

当单击<span>元素时，只会触发<span>元素上的click事件，而不会触发<div>元素和<body>元素的click事件。

阻止默认行为：preventDefault()方法。如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。这是在对事件对象上同时调用stopPropagation()方法和preventDefault()方法的一种简写方式。

事件捕获：事件捕获和事件冒泡是刚好相反的两个过程，事件捕获是从最顶端往下开始触发。

并非所有主流浏览器都支持事件捕获，并且这个缺陷无法通过JavaScript来修复。jQuery不支持事件捕获。

【事件对象的属性】

event.type:可以获取到事件的类型。

event.preventDefault()方法：阻止默认的事件行为。JavaScript中符合W3C规范的该方法在IE浏览器中无效，jQuery对其进行了封装，使之能够兼容各种浏览器。

event.stopPropagation()方法：阻止事件的冒泡。JavaScript中符合W3C规范的该方法在IE浏览器中无效，jQuery对其进行了封装，使之能够兼容各种浏览器。

event.target：获取到触发事件的元素。

event.relatedTarget：

event.pageX和event.pageY：获取到光标相对于页面的x坐标和y坐标。

event.which：在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键。

event.metaKey：为键盘事件中获取<ctrl>按键。

【移除事件】

移除按钮元素上以前注册的事件：unbind()方法。语法结构为：unbind([type],[data]);第一个参数是事件类型，第二个参数是将要移除的函数。说明如下：

（1）如果没有参数，则删除所有绑定的事件；

（2）如果提供了事件类型作为参数，则只删除该类型的绑定事件；

（3）如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

移除<button>元素的其中一个事件：需要为这些匿名处理函数指定一个变量。

one()方法可以为元素绑定处理函数。语法结构为:one(type.[data],fn);

one()方法为<button>元素绑定单击事件后，只在用户第一次单击按钮时，处理函数才执行，之后的单击毫无作用。

【模拟操作】

常用模拟：在jQuery中，可以使用trigger()方法完成模拟操作。如下可以来触发id为btn的按钮的click事件：

$('btn').trigger("click");  也可以直接用简化写法click()：$('#btn').click();

触发自定义事件：trigger()方法还可以触发自定义名称的事件。

传递数据：trigger(type,[data])方法有两个参数，第一个是要触发的事件类型，第二个是要传递给事件处理函数的附加数据，以数组形式传递。

执行默认操作：

//不仅会触发为<input>元素绑定的focus事件，也会使<input>元素本身得到焦点

$("input").trigger("focus");

triggerHandler()方法：只想触发绑定的focus事件，而不像执行浏览器默认操作。

//会触发<input>元素上绑定的特定事件，同时取消浏览器对此事件的默认操作，即文本框只触发绑定的focus事件

$("input").triggerHandler("focus");

jQuery（4）—— jQuery中的事件的更多相关文章

  1. jQuery文本框中的事件应用

    jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  2. JQuery在循环中绑定事件的问题详解

    JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...

  3. 使用jQuery在javascript中自定义事件

    js中的自定义事件有attachEvent,addEventListener等等好多种,往往受困于浏览器兼容,而且代码写起来也相当麻烦.jQuery为我们解决了这个问题,几行代码就可以很好的实现事件的 ...

  4. JQuery 在循环中设置事件,最后一个覆盖了前面所有的设置

    function setValidation() {         for (i = 0; i < alValidations.length; i++) { //alValidations是一 ...

  5. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  6. 四、jquery中的事件与应用

    当用户浏览页面时,浏览器会对页面代码进行解释或编译--这个过程实质上是通过时间来驱动的,即页面在加载时,执行一个Load事件,在这个事件中实现浏览器编译页面代码的过程.时间无论在页面元素本身还是在元素 ...

  7. jQuery：详解jQuery中的事件（二）

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  8. jQuery：详解jQuery中的事件（一）

    之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...

  9. jQuery学习笔记（三）jQuery中的事件

    目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一．加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...

  10. Javascript事件模型系列（三）jQuery中的事件监听方式及异同点

    作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...

随机推荐

  1. 各浏览器的cookie的name个数/最大容量限制测试

    测试代码 for(var ii = 0; ii< 5000;ii++){ if (!window.ia) window.ia=0; window.ia++; var s = 'a'+window ...

  2. Linux进程同步之POSIX信号量

    POSIX信号量是属于POSIX标准系统接口定义的实时扩展部分.在SUS(Single UNIX Specification)单一规范中,定义的XSI IPC中也同样定义了人们通常称为System V ...

  3. 30+WordPress古典风格的主题-古典却不失时尚

    通过WordPress古典风格主题,你可以快速的让你的网站呈现古典情调,并在竞争中脱颖而出.古典风格的网页设计是非常受欢迎的,现在,你可能想知道为什么.很多人被古典风格吸引,他们将一些陈旧的,过时的, ...

  4. 远程安装实施时，如何配置远程服务器的本地 yum 安装源

    配置本地 yum 安装源 overview 1.使用 ftp 将OracleLinux-R5-U8-Server-x86_64-dvd.iso 上传到 /home 目录下.再使用 mount 命令挂载 ...

  5. are both mapped to the url-pattern 错误解决方法

    今天运行tomcat的时候出现报了一大波错误,下面我截取了部分错误信息: 严重:A child container failed during start java.util.concurrent.E ...

  6. 在MyEclipse 2013中使用图形界面快速配置Struts2的操作方法

    Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable ...

  7. java访问权限的问题

    java访问权限的问题 java 访问权限 修饰符 背景: 关于java中的四种访问修饰符,public ,default ,protected ,private的作用范围本以为很熟悉了,但碰到了这样 ...

  8. ListView添加节点

    ListView插入节点的流程 当ListView控件的样式被设置成report时,ListView控件实际上是分为两个部分, 一部分是Column, 这个部分是用来显示ListView的每一列的标题 ...

  9. python 数据聚合与分组

    前面讲完了字符处理,但对数据进行整体性的聚合运算以及分组操作也是数据分析的重要内容. 通过数据的聚合与分组,我们能更容易的发现隐藏在数据中的规律. 数据分组 数据的分组核心思想是:拆分-组织-合并 首 ...

  10. 在Windows上创建同样的Linux操作环境

    在之前的文章中,介绍了我在GNU/Linux图形界面环境下所使用的工具集合.其基本目的是在保证占用最少系统资源的条件下,将电脑操作效率推向极致.这样的工具组合尤如瑞士军刀一般,简洁.高效.功能全面.与 ...