jquery 笔记 事件


Posted in Javascript onNovember 02, 2011

浏览器模型:
1、DOM第0级模型
事件处理程序通过吧函数实例的引用指派到DOM元素的属性而声明。这也是我们最常见的,如onclick等

<img onclick="alert('hello');" src="1.jpg" /> 
$("img").onmouseover = function(){alert("hello");}

(1)、其中比较好玩的是Event实例和事件冒泡
Event实例是大多数浏览器把事件的类实例作为第一个参数传给函数,但是ie中则是将event指定到window的属性;在获取目标元素w3c标准浏览器存在target,ie则取srcElement属性,为兼容事件如下写:
$("img").onclick=function(event){ 
if(!event) event = window.event; 
var target = event.target?event.target:event.srcElement; 
}

(2)、事件冒泡
目标元素获得机会吃力事件,事件模型坚持目标元素的父元素,看是否为同类型建立了处理程序,如果是,则也调用处理程序,直到DOM树顶部
对于w3c标准浏览器可使用event的stopPropagation(),对于ie可使用event的cancelBubble取消冒泡

2、第2级模型
解决0级模型中每个属性存储事件只能注册一个处理程序缺陷。

$("img").addEventListener('click',function1,false).addEventListener('click',function2,false);

在2级模型中,事件被触发,先从DOM树向下传播到目标元素(捕捉阶段),再向上冒泡,上面的addEventListener第三个参数为false时建立冒泡型处理程序,为ture时建立捕捉型处理程序。
这里的捕捉型也是第一次听说,因为ie6和7就不支持第2级模型,所以也难怪,但部分ie浏览器支持类似冒泡型的有attachEvent(eventName,handler)。

那么jquery的bind则我们解决了这些。。。
参考《jquery实战》

Javascript 相关文章推荐
JavaScript 高级语法介绍
Jun 15 Javascript
jQuery JSON的解析方式分享
Apr 05 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
浅谈React之状态(State)
Sep 19 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
分页栏的web标准实现
Nov 01 #Javascript
jquery键盘事件使用介绍
Nov 01 #Javascript
JS鼠标事件大全 推荐收藏
Nov 01 #Javascript
EasyUI中的tree用法介绍
Nov 01 #Javascript
jQuery代码优化 事件委托篇
Nov 01 #Javascript
jQuery代码优化 遍历篇
Nov 01 #Javascript
jQuery代码优化 选择符篇
Nov 01 #Javascript
You might like
php在apache环境下实现gzip配置方法
2015/04/02 PHP
php简单防盗链实现方法
2015/07/29 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
js修改input的type属性问题探讨
2013/10/12 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
简单谈谈python的反射机制
2016/06/28 Python
python 重命名轴索引的方法
2018/11/10 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
python tkinter组件摆放方式详解
2019/09/16 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
static关键字的用法
2013/10/07 面试题
三下乡活动方案
2014/01/31 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
小学新课改心得体会
2016/01/22 职场文书