下面是在 jQuery 中最常使用的 bind()方法举例:$("#testDiv4").bind("click", showMsg); 我们为 id 是 testDiv4 的元素, 添加 click 事件的事件处理函数 showMsg。

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

1. 添加的是多播事件委托,也就是为 click 事件又添加了一个方法,不会覆盖对象的 click 事件原有的事件处理函数。

 $("#testDiv4").bind("click", function(event) { alert("one"); });
$("#testDiv4").bind("click", function(event) { alert("two"); });

单击 testDiv4 对象时,依次提示“one”和“two”。

2. 统一了事件名称

添加多播事件委托时,ie 中是事件名称前面有"on"。但是使用 bind()函数我们不用区分 ie 和 dom,因为内部 jQuery 已经帮我们统一了事件名称。

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

让 HTML 代码部分只注意"显示"逻辑.现在的趋势是将 HTML 的行为,内容与样式切分干净.其中用脚本控制元素行为,用 HTML 标签控制元素内容,用 CSS 控制元素样式.使用 jQuery 事件处理函数可以避免在 HTML 标签上直接添加事件.


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


  • 使用 jQuery 事件对象

使用事件自然少不了事件对象。因为不同浏览器之间事件对象的获取,以及事件对象的属性都有差异,导致我们很难跨浏览器使用事件对象。

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

 $("#testDiv").bind("click", function(event) { });

下面是 jQuery 事件对象可以在浏览器中支持的属性:

事件对象除了拥有属性,还拥有事件。有一些是一定会用到的事件比如取消冒泡 stopPropagation() 等。下面是 jQuery 事件对象的函数列表:

4月12日学习笔记——jQuery事件的更多相关文章

  1. 4月12日学习笔记——jQuery操作属性和样式

    区分 DOM 属性和元素属性 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus ...

  2. 4月12日学习笔记——jQuery管理包装集

    创建新的元素 (1)使用 HTML DOM 创建元素 //使用 Dom 标准创建元素 var select = document.createElement("select"); ...

  3. 4月13日学习笔记——jQuery动画

    基本动画函数 $("#divPop").show(); $("#divPop").hide(); $("#divPop").toggle() ...

  4. 4月13日学习笔记——jQuery工具函数

    浏览器及特性检测 jQuery.support.boxModel 如果这个页面和浏览器是以 W3C CSS 盒式模型来渲染的,则等于 true.通常在 IE 6 和 IE 7 的怪癖模式中这个值是 f ...

  5. 4月10日学习笔记——jQuery选择器

    概念 jQuery 是一套Javascript脚本库,注意 jQuery 是脚本库,而不是脚本框架."库"不等于"框架".jQuery 并不能帮助我们解决脚本的 ...

  6. 5月12日上课笔记-js 弹出框、函数、程序调试、基本事件、浏览器对象模型

    一.弹出框 a.提示框 alert(); b.输入框 prompt(); c.确认框 confirm(); var flag= confirm("确认删除吗?"); 二.js程序调 ...

  7. 022年9月12日 学习ASP.NET Core Blazor编程系列三——实体

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...

  8. 4月8日学习笔记(js基础)

    <script>标签放在<body>和<head> 放在 <head></head> 里的会比放在 <body></bod ...

  9. 4月1日学习笔记(CSS基础)

    CSS初始化 内边距padding padding属性宽度是按照上右下左的顺序来的,否则单独设置就是padding-left... 边框border border可以设置样式(border-style ...

随机推荐

  1. 使用ServiceStackRedis链接Redis简介 [转]

      注:关于如何在windows,linux下配置redis,详见这篇文章:)          Discuz!NT中的Redis架构设计 目前网上有一些链接Redis的C#客户端工具,这里介绍其中也 ...

  2. TP复习14

    ## ThinkPHP 3.1.2 控制器的模块和操作#讲师:赵桐正微博:http://weibo.com/zhaotongzheng 本节课大纲:一.空模块和空操作 1.空操作 function _ ...

  3. 1028 - Carl the Ant

    Ants leave small chemical trails on the ground in order to mark paths for other ants to follow. Ordi ...

  4. python time模块详解(转)

    python 的内嵌time模板翻译及说明  一.简介   time模块提供各种操作时间的函数  说明:一般有两种表示时间的方式:       第一种是时间戳的方式(相对于1970.1.1 00:00 ...

  5. centos 安装git server

    1.yum install lrzsz wget git 2.安装gitosis:gitosis为Git用户权限管理系统,通过管理服务端的/home/git/.ssh/authorized_key文件 ...

  6. ios上比较好用的Cydia插件

    1.iFile查看系统文件 2.KuaiDial归属地数据库 3.KuaiDial电话拨号助手 4.搜狗输入法 Photo Editor 房贷计算器

  7. (文件描述符0、1、2),(stdin、stdout、stderr),(终端设备)这三者之间的关系???

    前言 在Linux系统中,一切设备都看作文件.而每打开一个文件,就有一个代表该打开文件的文件描述符.程序启动时默认打开三个I/O设备文件:标准输入文件stdin,标准输出文件stdout,标准错误输出 ...

  8. 经典排序算法总结与实现 ---python

    原文:http://wuchong.me/blog/2014/02/09/algorithm-sort-summary/ 经典排序算法在面试中占有很大的比重,也是基础,为了未雨绸缪,在寒假里整理并用P ...

  9. 548 - Tree (UVa OJ)

    Tree You are to determine the value of the leaf node in a given binary tree that is the terminal nod ...

  10. Golang学习 - regexp 包

    ------------------------------------------------------------ // 函数 // 判断在 b(s.r)中能否找到 pattern 所匹配的字符 ...