深入理解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 相关文章推荐
一些常用的Javascript函数
Dec 22 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
js中typeof的用法汇总
Dec 12 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
js实现多个标题吸顶效果
Jan 08 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版本实现代码
2012/09/15 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
js获取class的所有元素
2013/03/28 Javascript
javascript数组的使用
2013/03/28 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
小程序实现留言板
2018/11/02 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
QML实现钟表效果
2020/06/02 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
给校长的一封建议书
2014/03/12 职场文书
工作建议书范文
2014/05/13 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
酒店开业主持词
2015/07/02 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
德生2P3收音机开箱评测
2022/04/30 无线电