深入理解jQuery 事件处理


Posted in Javascript onJune 14, 2016

浏览器的事件模型

DOM第0级事件模型

1.Event实例

他的属性提供了关于当前正被处理的已触发事件的大量信息。这包括一些细节,比如在哪个元素上触发的事件、鼠标事件的坐标以及键盘事件中单击了哪个键。

2.事件冒泡

当触发 dom 树中一个元素上的事件时,事件模型会检查这个元素是否已经创建了特定的事件处理器。如果是,就会调用已创建的事件处理器。然后,事件模型会检查目标元素的父元素,看其是否已经为此事件类型创建了处理器。如果是,就调用已创建的处理器,之后检查它的父元素,以及父元素的父元素,以此类推,直到 dom 树的顶部。

DOM第2级事件模型

IE事件模型

jQuery事件模型

使用jQuery绑定事件处理器

<html> 
<head> 
  <title>jQuery Events Example</title> 
  <script type="text/javascript" src="../scripts/jquery-1.7.1.js"></script> 
  <script type="text/javascript"> 
    $(function () { 
      $('#example') 
       .bind('click', function (event) { 
         alert('BOOM once!'); 
       }) 
       .bind('click', function (event) { 
         alert('BOOM twice!'); 
       }) 
       .bind('click', function (event) { 
         alert('BOOM three times!'); 
       }); 
    }); 
  </script> 
</head> 
 
<body> 
  <img id="example" src="example.jpg" /> 
</body> 
</html>

bind(eventType, data, handler); bind(eventMap)

可以为事件名称添加以圆点分隔的后缀来指定命名空间,以批量操作事件处理器。

可以通过单个bind()方法来为一个元素绑定多个事件。

$('.whatever').bind({
  click:function(event){/* handle */},
  mouseenter: function (event) {/* handle */ },
  mouseleave: function (event) {/* handle */ }
})

特定的事件绑定:

blur change click dblclick error focus focusin focusout keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup ready resize scroll select submit unload

当使用这些便捷方法时,event.data值是只读的。他们有一个参数 listener 函数,表示事件处理器。

focusin focusout

one(eventType, data, listener)

删除事件处理器

unbind(eventType, listener); unbind(event)

删除特定的事件处理器

删除命名空间中的所有事件处理器

$('*').unbind('.fred')Event实例

独立于浏览器的jQuery.Event属性和方法

名称 描述
altKey
ctrlKey
currentTarget
data
metaKey
pageX
pageY
relatedTarget
screenX
screenY
shiftKey
result
target
timestamp
type
which
preventDefault()
stopPropagation()
stopImmediatePropagation()
isPropagationStopped()
isImmediatePropagationStopped()

触发事件处理器

trigger(eventType, data)

triggerHandler(eventType, data)

触发的便捷方法

blur() change() click() dblclick() error() focus() focusin() focusout() keydown() keypress() keyup() load() mousedown() mouseenter() mouseleave() mousemove() mouseout() mouseover() mouseup() resize() scroll() select() submit() unload()

其他事件相关的方法

1.起切换作用的监听器

toggle(listener1, listener2, ...)

2.在元素上悬停鼠标

hover(enterHandler, leaveHandler); hover(handler)

充分利用(更多的)事件

过滤大的数据集合

通过模板复制创建元素

建立主体标记

添加新的过滤器

添加限定控件

删除不需要的过滤器和其他任务

以上这篇深入理解jQuery 事件处理就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
javascript实现获取服务器时间
May 19 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
对layui中的onevent 和event的使用详解
Sep 06 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
微信小程序实现签到弹窗动画
Sep 21 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 #Javascript
JS操作JSON方法总结(推荐)
Jun 14 #Javascript
JavaScript Promise 用法
Jun 14 #Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 #Javascript
Javascript缓存API
Jun 14 #Javascript
JS修改地址栏参数实例代码
Jun 14 #Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 #Javascript
You might like
解析PHP缓存函数的使用说明
2013/05/10 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
php两种无限分类方法实例
2015/04/21 PHP
php简单日历函数
2015/10/28 PHP
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
小程序实现密码输入框
2020/11/16 Javascript
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
Python datetime包函数简单介绍
2019/08/28 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
工程管理造价应届生求职信
2013/11/13 职场文书
致200米运动员广播稿
2014/02/06 职场文书
绿色环保口号
2014/06/12 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
工作简历自我评价
2015/03/11 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
暖春观后感
2015/06/08 职场文书
疾病证明书
2015/06/19 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
Python使用MapReduce进行简单的销售统计
2022/04/22 Python