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 获取select下拉列表值的代码
Sep 07 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
JavaScript实现网页跨年倒计时
Dec 02 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 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 Ajax实现页面无刷新发表评论
2007/01/02 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
JS获取父节点方法
2009/08/20 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
解析python的局部变量和全局变量
2019/08/15 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
python实现udp聊天窗口
2020/03/31 Python
python如何使用代码运行助手
2020/07/03 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
python如何对链表操作
2020/10/10 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
小学国庆节活动方案
2014/02/11 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
主持人开幕词
2015/01/29 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android