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

一、加载DOM时执行的事件

JavaScript中的window.onload方法和Jquery中的$(document).ready()方法的对比。

1、执行时机

window.onload方法是等网页中的所有元素（包括所有的关联元素）都加载完毕之后执行，而$(document).ready()方法是在DOM就绪之后就可以调用，不必等到所有关联文件加载完毕。举个例子，比如一个商品列表的页面，需要加载很多商品的图片，点击每个商品的图片可以链接到商品的详情页面。如果用JavaScript中的window.onload方法的话，必须得每个图片都加载好以后才可以执行其中的事件，如果用Jquery中的$(document).ready()方法的话，则可以等想要点击的图片加载完毕后就可以触发其中的事件。但是$(document).ready()方法也有其不适用的时候，比如方法中有一个事件是为所有图片设置宽和高，那么可能有些图片就无法获取设置了，所以Jquery中有新添加了一个方法，load()方法，此方法会在元素的onlond事件中绑定一个处理函数，如果这个处理函数绑定在window对象上，则其功能等同于JavaScript中的window.onload方法，如果绑定在一个元素上的话，则这个元素加载完毕之后执行处理函数。

2、多次使用

JavaScript中的window.onload方法一次只能保存对一个函数的引用，即如果先后给window.onload方法绑定两个函数，则系统只会执行第二个函数，第一个函数自动被第二个函数覆盖。而Jquery中的$(document).ready()方法会按绑定的先后顺序，一次执行每一个函数。

3、简写方式

$(document).ready(){}可以简写成$(function(){}),而$(document)可以简写为$()，当$不带参数时，默认参数就是“document”,因此，$(document).ready(){}还可以简写成$().ready(){}。

二、事件绑定

1、使用bing()可以给元素绑定事件，举个例子吧。

$(#name_1).bind("click",function(){

内部要执行的代码。

})

该示例是给id属性为name_1的元素绑定了一个click事件。

2、改变绑定事件的类型

给一个元素绑定mouseover事件和mouseout事件，实现的方法是：

$(#name_1).bind("mouseover",function(){

显示文本

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

隐藏文本

})

以上代码执行的效果是：当鼠标移到属性id为name_1的元素上时，显示文本，当鼠标移开时，隐藏文本。

三、合成事件

Jquery有两个合成事件：hover()方法和toggle()方法。

hover()方法是模拟光标悬停事件，它可以绑定两个事件，当鼠标移动到选中元素上时，执行第一个方法；当鼠标移开时执行第二个事件。

toggle()方法可以绑定多个事件，当鼠标单击绑定它的元素时，该元素会依次执行其中的事件。

四、事件冒泡

事件冒泡是指几个嵌套的元素里绑定了相同类型的事件，当触发里边元素的事件后，外边元素的事件也会依次被触发。例如在一个html页面中，<body>下添加了一个<div>元素，而在<div>元素中又嵌套了<span>元素。为<body>、<div>、<span>三个元素依次绑定事件，事件中分别执行输出3、2、1。单击<span>元素，页面会依次输出1、2、3。这就是时间冒泡。

解决时间冒泡的方法是：在function的参数中添加事件对象，例如事件对象名为event，在此时间中添加如下代码，即可停止事件冒泡：

event.stopPropagation();

网页中的有些元素有其默认的行为，阻止其默认行为的方法是：在function的参数中添加事件对象，例如event，执行以下代码：

event.preventDefault();

如果想同时阻止元素的默认行为和事件冒泡，可以在事件处理函数中返回false：

return false；

五、事件捕获

事件捕获的效果与事件冒泡恰恰相反，它是相同类型的时间从外到内的执行，遗憾的是，Jquery不支持事件捕获！

又到凌晨了，不学了，睡觉！！！

Jquery：Jquery中的事件<一>的更多相关文章

  1. jquery ajax 中各个事件执行顺序

    jquery ajax 中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事 ...

  2. jquery ajax中各个事件执行顺序如下

    $(function(){ setTimeout(function(){ $.ajax({ url:'/php/selectStudent.php', }); },0); $(document).aj ...

  3. Javascript中的事件二

    <!------------------示例代码一---------------------><!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  4. 原生js实现jquery库中部分事件的功能（jquery库封装二）

    继续昨天的封装,今天的部分继昨天选择器之后实现了css样式的获取和添加,attr的获取和添加和一部分事件的封装:只是我自己的理解,不妥之处欢迎大家在评论中提出,相互学习,共同提高 /** * Crea ...

  5. Jquery：Jquery中的事件<二>

    这几天快忙死了,办了离职还得办入职,完全打乱了我的计划,但是能有一个理想的工作,还是很开心的,以后加把劲,争取把计划再赶上来!不说了,学习!!! 五.事件对象的属性 1.event.type:获取事件 ...

  6. 【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行

    最近一直都在研究[锋利的jQuery],确实是一本好书,受益匪浅.但由于技术发展及版本更新等原因,里面还是有些坑需要踩的. 比如:第六章七节中提到的全局事件ajaxStart.ajaxStop照着案例 ...

  7. Python-JS中的事件详解

    目录 fdf!! fefd 一.JS中的事件二.JS中的事件分类: 1.事件初级: 2.事件参数 Event 3.鼠标事件 4.键盘事件 *** 5.表单事件 *** 6.文档事件 * 7.图片事件 ...

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

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

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

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

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

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

随机推荐

  1. cocos2dx Sprite的多种创建方法

    1.通过文件创建 Sprite *bg = Sprite::create("backGround.jpg"); 2.通过图片的某个区域创建 SpriteFrame *frame = ...

  2. angularjs中关于ng-if的一些理论

    ng-if简介: ● 使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素.如果赋值给ng-if 的表达式的值是false,那对应的元素将会从DOM中移除,否则对应元素的一个克隆将被重 ...

  3. （一）Knockout - 入门

    knockout 简介 knockoutjs的实现依照[MVVM模式],Model-View-ViewModel. Model,用来聚合server端数据 ViewModel,描述的数据以及操作,是行 ...

  4. for 迭代器遍历list map

    1.map与list区别     list是对象集合,允许对象重复. map是键值对的集合,不允许key重复 2.list 与 list<类型> list不限制类型,也就是object类型 ...

  5. n！(n的阶乘)

    我们在这里介绍一些关于n!的性质. 在计数问题中,经常需要用到n!.有必要了解n!在mod p下的一些性质.下面我们假设p是素数,n!=ape(a无法被p整除),并试图求解e和a mod p(把这个东 ...

  6. 直播 linux上的第一个c++程序

    这里用crt来直播吧: 登录到服务器上之后: 1.mkdir -p 建一个文件夹 2.ll 查看一下这个文件夹 3.cd 进入这个文件夹 4.vim 进行文本编辑 写完之后,按下esc中止输入模式,用 ...

  7. iOS 9的 Universal Links 通用链接使用

    前段时间和朋友(@品味生活)一起搞 iOS9的通用链接,我主要做了前面官方文档翻译工作,后面的一些东西都是他在搞,整理也是他整理的. 他的博客原文地址:http://pinwei.blog.51cto ...

  8. 关于nginx架构探究（2）

    nginx 数据结构 1.Hash table nginx 对虚拟主机的管理使用到了HASH数据结构,假设配置文件里有如下的配置. Server{ listen 192.168.0.1 server_ ...

  9. DOS的BAT技巧两则

    一,杀FF进程 二,删除FF产生的配置文件(这个大了,不小心就会爆盘) taskkill /f /t /im firefox.exe for /d %%i in (C:\Users\cheng\App ...

  10. 磁珠(FB)的选用

    1. 磁珠(FB)的单位是欧姆,而不是亨特,这一点要特别注意.因为磁珠的单位是按照它在某一频率 产生的阻抗来标称的,阻抗的单位也是欧姆.磁珠的 DATASHEET上一般会提供频率和阻抗的特性曲线图,一 ...