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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 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
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python最长公共子串算法实例
2015/03/07 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
对Django url的几种使用方式详解
2019/08/06 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
销售员自我评价怎么写
2013/09/19 职场文书
大学在校生求职信范文
2013/11/21 职场文书
摄影展策划方案
2014/06/02 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript