当用户浏览页面时，浏览器会对页面代码进行解释或编译--这个过程实质上是通过时间来驱动的，即页面在加载时，执行一个Load事件，在这个事件中实现浏览器编译页面代码的过程。时间无论在页面元素本身还是在元素与人机交互中，都占有十分重要的地位。

1.事件中的冒泡现象：

时间在出发后分为两个阶段，一个是捕获（capture），另一个则是冒泡（bubbling）；大多数浏览器不支持捕获阶段，jquery也不支持。因此时间出发后往往执行冒泡过程。

冒泡

<script type="text/javascript">

        $(function() {

            var intI = 0; //记录执行次数

            $("body,div,#btnShow").click(function(event) {//点击事件

                intI++; //次数累加

                $(".clsShow")

                .show()//显示

                .html("您好，欢迎来到jQuery世界!")//设置内容

                .append("<div>执行次数 <b>" + intI + "</b> </div>"); //追加文本

            })

        })

    </script>

时间在执行过程中纯在冒泡现象，即虽然单机的是按钮，但按钮的外围<div>元素的时间也被出发，同时<div>元素的外围<body>元素的时间也随之被处罚，其整个事件波及的过程就像水泡一样向外冒，故称之为冒泡过程。

阻止冒泡的发生

在实际在实际的，我们并不希望时间的冒泡现象发生，即单机按钮就执行单一的单机时间，并不出发其他外围的时间。在jquery中通过stopProgragation（）方法可以组织冒泡过程的发生。在上述代码中加入如下代码即可

event.stopPropagation();//阻止冒泡过程

另外还可以通过语句retrun false实现挺值时间的冒泡过程。

2.页面载入事件

ready()方法是jquery中的页面载入时间方法，该方法类似于传统的javascript中的onload()方法

两者区别就是方法的执行时间的不同，onload()：页面中的全部元素加载完全才触发，ready():加载前就触发。

ready()的工作原理

在jquery脚本加载到页面时，会设置一个isReady的标记，用于监听页面加载的进度。遇到执行ready()，通过查看isReady是否被设置，如果未被设置，那么就说明页面并未加载完成，在次琴光下，将未完成的部分用一个数组缓存起来，当全部家在完成后，再将未完成的部分通过缓存一一执行。

ready()方法的写法

写法一：

$(document).ready(function(){

      //代码部分

})

写法二：

$(function(){

        //代码部分

})

3.绑定事件

使用bind()方法绑定事件：

　　bind()方法是为每个选择的元素的事件绑定处理函数，其语法格式如下：

bind(type,[data],fn)

　  type:一个或多个类型的从字符串，包括click、change、blur、focus、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleft、select、submit、keydown、keypress、keyup、error

　　data：作为event.data属性值传递给事件对象的额外数据对象

　　fn：绑定到每个选择元素的事件的中的处理函数。

    <script type="text/javascript">

        $(function() {

            $("#btnBind").bind("click mouseout", function() {

                $(this).attr("disabled", "disabled"); //按钮不可用

            })

        })

    </script>

4.切换事件

有两个方法用于事件的切换，一个是hover()，另一个是方法toggle()。

4-1.hover()方法：

hover()方法可以是元素在鼠标悬停与鼠标移除的事件 中进行切换

下列代码是等价的：

$(".clsTitle").hover(function() {

                   //执行代码一

            }, function() {

                   //执行代码二

            })

等价于

$("a").mouseenter(function(){

         //执行代码一

})

$("a").mouseleave(function(){

         //执行代码二

})

4-2.toggle方法：

toggle方法可以因此调用N各函数，知道最后一个函数，然后重复对这些函数轮播调用。

toggle(fn,fn2,[fn3,fn4])

其中，参数是因此被调用的函数

5.移除事件

unbind()方法是移除元素绑定的事件，其调用的语法格式如下：

unbind([type],[fn])

其中，参数type为移除的事件类型，fn为需要移除的事件处理函数。如果该方法没有参数，则移除所有绑定的事件；如果带有参数type，移除该参数所制定的事件类型；如果带有桉树fn，则至移除绑定时的函数fn。

6.其他事件

6-1.one()方法：

为所选绑定元素绑定一个浸出法一次的处理函数，语法格式为：

one(type,[data],fn)

6-1.trigger()方法：

　　可以实现触发性事件，既不必用户做任何事件，自动执行该方法中的事件。示例代码如下：

    <script type="text/javascript">

        $(function() {

            var oTxt = $("input"); //获取文本框

            oTxt.trigger("select"); //自动选中文本框

            oTxt.bind("btn_Click", function() {//编写文本框自定义事件

                var txt = $(this).val(); //获取自身内容

                $("#divTip").html(txt); //显示在页面中

            })

            oTxt.trigger("btn_Click"); //自动触发自定义事件

        })

    </script>

四、jquery中的事件与应用的更多相关文章

  1. 锋利的jQuery ——jQuery中的事件和动画（四）

    一.jQuery中的事件 1)加载DOM $(document).ready()和window.onload的区别 1>执行时机 $(document).ready(){}  方法内注册的事件, ...

  2. jQuery中的事件绑定方法

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

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

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

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

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

  5. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  6. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  7. Jquery：Jquery中的事件<一>

    由于今天有一个比较重要的面试,所以昨天晚上对以前做的一些项目做了一下总结,直接导致昨天的学习笔记断更了,哎,计划永远赶不上变化啊!今天学习了Jquery中是事件,就此做一个笔记,便于日后复习. 一.加 ...

  8. jQuery中的事件监听方式及异同点

    jQuery中的事件监听方式及异同点 作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery&g ...

  9. jQuery中绑定事件bind() on() live() one()的异同

    jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也 ...

  10. jQuery 中的事件绑定

    一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...

随机推荐

  1. POJ 2823 Sliding Window 线段树区间求和问题

    题目链接 线段树区间求和问题,维护一个最大值一个最小值即可,线段树要用C++交才能过. 注意这道题不是求三个数的最大值最小值,是求k个的. 本题数据量较大,不能用N建树,用n建树. 还有一种做法是单调 ...

  2. android 决解启动屏白黑屏会延迟几秒的问题

    通常写启动屏,都有个很不喜欢的问题,就是会空白几秒才显示界面,而且界面还是很简单的! 解决办法 1 写一个透明的主题,一般启动屏都是不要bar的所以继承AppTheme.NoActionBar < ...

  3. vmware下centos7桥接模式无法上网

    前一段时间由于想给vm中的centos分配一个独立的IP,就将网络适配器的连接方式由NAT改为桥接,一切顺利. 今天再次开机,IP居然变成了192开头的局域网,并且ping不通外网,经过查找资料,解决 ...

  4. ThreadStart 与ParameterizedThreadStart的区别

    1) ParameterizedThreadStart与ThreadStart 1 static void Main(string[] args) { #region ParameterizedThr ...

  5. startUML破解方式

    StarUML官方下载地址:http://staruml.io/download StarUML是一个非常好用的画UML图的工具,但是它是收费软件​,以下是破解方法: ​1.使用Editplus或者N ...

  6. Jquery判断变量是否为空

    var aaa=''; if(aaa) { //aaa不为空也不是不可识别对象时执行 } else { //aaa为空或不可识别时执行 } aaa必须是变量,对象的属性好像是不行,

  7. StartCom 申请 SSL 证书及 Nginx HTTPS 支持配置全攻略

    来源:https://www.williamyao.com/index.php/archives/1397/ 前言 最近收到 StartCom 的邮件,数字证书即将过期,想到去年在 StartSSL ...

  8. LD算法获取字符串相似度

    一个如何识别相似语句的问题,于是上网找了找,一个叫Levenshtein Distance的算法比较简单,就写了段代码实现了一下,效果还不错. 这个算法是一个俄国人Lvenshtein提出的,用于计算 ...

  9. [WebKit内核] JavaScript引擎深度解析--基础篇（一）字节码生成及语法树的构建详情分析

    [WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析 标签: webkit内核JavaScriptCore 2015-03-26 23:26 2285 ...

  10. 《UML大战需求分析》阅读随笔（四）

    状态机图(State Machine Diagram),状态机图是通过描述某事物状态的改变来展现流程的.一般适用于流程围绕某个事物展开,例如请假的流程就围绕请假条的展开.语法,开始于结束符号,实心圆表 ...