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 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
详解angular2.x创建项目入门指令
Oct 11 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 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文件上传实例详解!!!
2007/01/02 PHP
PHP中基本符号及使用方法
2010/03/23 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
php压缩文件夹最新版
2018/07/18 PHP
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
python有证书的加密解密实现方法
2014/11/19 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
在Django的视图(View)外使用Session的方法
2015/07/23 Python
python一键升级所有pip package的方法
2017/01/16 Python
Scrapy的简单使用教程
2017/10/24 Python
python书籍信息爬虫实例
2018/03/19 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
小学生读书感言
2014/02/12 职场文书
党员党性分析材料
2014/02/17 职场文书
任命书怎么写
2014/06/04 职场文书
大学生毕业求职信
2014/06/12 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
民事辩护词范文
2015/05/21 职场文书
志愿服务心得体会
2016/01/15 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis