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 尚未实现错误解决办法
Nov 27 Javascript
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
vue项目上传Github预览的实现示例
Nov 06 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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
PHP.MVC的模板标签系统(三)
2006/09/05 PHP
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
PHP常用处理静态操作类
2015/04/03 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
javascript实现动态标签云
2015/10/16 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
python破解同事的压缩包密码
2020/10/14 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
信息管理员岗位职责
2013/12/01 职场文书
人资专员岗位职责
2014/04/04 职场文书
大学推普周活动总结
2015/05/07 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书