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. eclipse安装svn插件的多种方式

    方法一:在线安装 1.打开HELP->MyEclipse Configuration Center.切换到SoftWare标签页. 2.点击Add Site 打开对话框,在对话框Name输入Sv ...

  2. php钩子程序设计

      序   作为程序员,设计出优雅而完美的系统,永远是让我们非常兴奋的事情.高手不在于你会多少语言,而在于你有多高的思想.   在设计中,怎么体现自身价值,那就是要比别人多想几步.   讲钩子程序,起 ...

  3. SpringAOP导致@Autowired依赖注入失败

    之前用springAOP做了个操作日志记录,这次在往其他类上使用的时候,service一直注入失败,找了网上好多内容,发现大家都有类似的情况出现,但是又和自己的情况不太符合.后来总结自己的情况发现:方 ...

  4. Day1-python理论基础

     一.python介绍 Python 的创始人为Guido van Rossum.Guido为了打发圣诞节的无趣,于1989年发明,在荷兰国家数学和计算机科学研究所设计出来的(作为ABC 语言的一种继 ...

  5. Apache Tomcat部署java web项目

    本教程安装环境为windows服务器 在服务器中下载安装JDK JDK下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8 ...

  6. Docker 搭建 etcd 集群及管理

    环境 host1 10.1.99.13 host2 10.1.99.14 host3 10.1.99.15 host4 10.1.99.12(用于测试添加删除节点) 初始化集群 host1 $ doc ...

  7. Linux Ubuntu 虛擬機系統自定義桌面分辨率且重啓後保持不變

    我用 VMware Workstation 12 Pro 安裝的 Ubuntu MATE Desktop Environment 1.12.1,發現安裝後沒有需要的分辨率,於是安裝 VMware To ...

  8. HDU 1045 Fire Net(DFS)

    Fire Net Problem Description Suppose that we have a square city with straight streets. A map of a ci ...

  9. vedio_note_1

    同步复位 always @ (posedge clk) ....... 异步复位 always @ (posedge clk or negedge rst_n) ....... 异步复位和同步复位的优 ...

  10. fpga串口通信

    ---恢复内容开始--- 1.波特率的计算公式:9600bps 是指每秒可以传输9600位 则一位需要的时间为1/9600 约等于0.000104 开发板晶振大小为50M则传输一位需要的时间为 0.0 ...