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 相关文章推荐
JQuery 选择器、过滤器介绍
Feb 14 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
angularjs基础教程
Dec 25 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
简单的js表格操作
Sep 24 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
vue实现表格合并功能
Dec 01 Vue.js
分页栏的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
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
详解angular应用容器化部署
2018/08/14 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
详解ES6数组方法find()、findIndex()的总结
2020/05/12 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
Python 深入理解yield
2008/09/06 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
如何在Python中编写并发程序
2016/02/27 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
python线程信号量semaphore使用解析
2019/11/30 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
茶叶店创业计划书范文
2014/01/19 职场文书
打架检讨书500字
2014/01/29 职场文书
小学生新年寄语
2014/04/03 职场文书
党员个人公开承诺书
2014/08/29 职场文书
总经理检讨书
2014/09/15 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
紧急通知
2015/04/17 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL