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 学习之二 属性(类)
Nov 25 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 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分页类的代码
2011/05/18 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
在Django中限制已登录用户的访问的方法
2015/07/23 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python中的元组介绍
2019/01/28 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
工作表扬信的范文
2014/01/10 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
开学典礼决心书
2014/03/11 职场文书
民生工程实施方案
2014/03/22 职场文书
2014年双拥工作总结
2014/11/21 职场文书