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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
JS实现快递单打印功能【推荐】
Jun 21 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
使用Vue实现一个树组件的示例
Nov 06 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操作mysqli(示例代码)
2013/10/28 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
新手入门常用代码集锦
2007/01/11 Javascript
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
webpack入门必知必会
2017/01/16 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
JS实现li标签的删除
2019/04/12 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
Python学习之time模块的基本使用
2021/01/17 Python
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
爱情检讨书大全
2014/01/21 职场文书
小学家长评语大全
2014/04/16 职场文书
争先创优演讲稿
2014/09/15 职场文书
人民币使用说明书
2019/04/17 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript