4月12日学习笔记——jQuery事件
下面是在 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事件的更多相关文章
- 4月12日学习笔记——jQuery操作属性和样式
区分 DOM 属性和元素属性 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus ...
- 4月12日学习笔记——jQuery管理包装集
创建新的元素 (1)使用 HTML DOM 创建元素 //使用 Dom 标准创建元素 var select = document.createElement("select"); ...
- 4月13日学习笔记——jQuery动画
基本动画函数 $("#divPop").show(); $("#divPop").hide(); $("#divPop").toggle() ...
- 4月13日学习笔记——jQuery工具函数
浏览器及特性检测 jQuery.support.boxModel 如果这个页面和浏览器是以 W3C CSS 盒式模型来渲染的,则等于 true.通常在 IE 6 和 IE 7 的怪癖模式中这个值是 f ...
- 4月10日学习笔记——jQuery选择器
概念 jQuery 是一套Javascript脚本库,注意 jQuery 是脚本库,而不是脚本框架."库"不等于"框架".jQuery 并不能帮助我们解决脚本的 ...
- 5月12日上课笔记-js 弹出框、函数、程序调试、基本事件、浏览器对象模型
一.弹出框 a.提示框 alert(); b.输入框 prompt(); c.确认框 confirm(); var flag= confirm("确认删除吗?"); 二.js程序调 ...
- 022年9月12日 学习ASP.NET Core Blazor编程系列三——实体
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
- 4月8日学习笔记(js基础)
<script>标签放在<body>和<head> 放在 <head></head> 里的会比放在 <body></bod ...
- 4月1日学习笔记(CSS基础)
CSS初始化 内边距padding padding属性宽度是按照上右下左的顺序来的,否则单独设置就是padding-left... 边框border border可以设置样式(border-style ...
随机推荐
- 使用ServiceStackRedis链接Redis简介 [转]
注:关于如何在windows,linux下配置redis,详见这篇文章:) Discuz!NT中的Redis架构设计 目前网上有一些链接Redis的C#客户端工具,这里介绍其中也 ...
- TP复习14
## ThinkPHP 3.1.2 控制器的模块和操作#讲师:赵桐正微博:http://weibo.com/zhaotongzheng 本节课大纲:一.空模块和空操作 1.空操作 function _ ...
- 1028 - Carl the Ant
Ants leave small chemical trails on the ground in order to mark paths for other ants to follow. Ordi ...
- python time模块详解(转)
python 的内嵌time模板翻译及说明 一.简介 time模块提供各种操作时间的函数 说明:一般有两种表示时间的方式: 第一种是时间戳的方式(相对于1970.1.1 00:00 ...
- centos 安装git server
1.yum install lrzsz wget git 2.安装gitosis:gitosis为Git用户权限管理系统,通过管理服务端的/home/git/.ssh/authorized_key文件 ...
- ios上比较好用的Cydia插件
1.iFile查看系统文件 2.KuaiDial归属地数据库 3.KuaiDial电话拨号助手 4.搜狗输入法 Photo Editor 房贷计算器
- (文件描述符0、1、2),(stdin、stdout、stderr),(终端设备)这三者之间的关系???
前言 在Linux系统中,一切设备都看作文件.而每打开一个文件,就有一个代表该打开文件的文件描述符.程序启动时默认打开三个I/O设备文件:标准输入文件stdin,标准输出文件stdout,标准错误输出 ...
- 经典排序算法总结与实现 ---python
原文:http://wuchong.me/blog/2014/02/09/algorithm-sort-summary/ 经典排序算法在面试中占有很大的比重,也是基础,为了未雨绸缪,在寒假里整理并用P ...
- 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 ...
- Golang学习 - regexp 包
------------------------------------------------------------ // 函数 // 判断在 b(s.r)中能否找到 pattern 所匹配的字符 ...