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 省地市级联选择
Feb 07 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
vue-cli 关闭热更新操作
Sep 18 Javascript
利用promise及参数解构封装ajax请求的方法
Mar 24 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
PHP学习之PHP变量
2006/10/09 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
layui按条件隐藏表格列的实例
2019/09/19 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
Python正则表达式使用范例分享
2016/12/04 Python
python 常用的基础函数
2018/07/10 Python
详解python读取和输出到txt
2019/03/29 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
三严三实对照检查材料思想汇报
2014/09/28 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
销售内勤岗位职责
2015/02/10 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python