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 相关文章推荐
js截取函数(indexOf,join等)
Sep 01 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
原生js实现下拉框选择组件
Jan 20 Javascript
javascript实现简单页面倒计时
Mar 02 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实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
Python字符串格式化输出方法分析
2016/04/13 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
使用Python来开发微信功能
2018/06/13 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
pandas.cut具体使用总结
2019/06/24 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
.net软件工程师面试题
2015/03/31 面试题
浅谈react路由传参的几种方式
2021/03/23 Javascript
置业顾问岗位职责
2014/03/02 职场文书
学习保证书范文
2014/04/30 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
教你用python实现12306余票查询
2021/06/30 Python
Python 绘制多因子柱状图
2022/05/11 Python
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python