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 相关文章推荐
chrome原生方法之数组
Nov 30 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 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错误日志的获取方法
2015/07/20 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
护士实习自我鉴定
2013/10/22 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
留学推荐信中文范文
2015/03/26 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
费城故事观后感
2015/06/10 职场文书
辞职离别感言
2015/08/04 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
2019求职信大礼包
2019/05/15 职场文书
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers