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 相关文章推荐
json 实例详细说明教程
Oct 31 Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
vue实现在线翻译功能
Sep 27 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 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
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
jQuery AJAX应用实例总结
2020/05/19 jQuery
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
python实现给微信公众号发送消息的方法
2017/06/30 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
使用python实现对元素的长截图功能
2019/11/14 Python
使用Python函数进行模块化的实现
2019/11/15 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
详解Python IO口多路复用
2020/06/17 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
土木工程毕业生自荐信
2013/11/12 职场文书
煤矿安全生产标语
2014/06/06 职场文书
党支部特色活动方案
2014/08/20 职场文书
群众路线领导对照材料
2014/08/23 职场文书
工厂标语大全
2014/10/06 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
英文道歉信
2015/01/20 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
初中军训感言
2015/08/01 职场文书
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL
Linux中文件的基本属性介绍
2022/06/01 Servers