JQuery实践--事件
通过HTML网页所呈现的界面是异步的和事件驱动的。步骤:
- 建立用户界面
- 等待又去的事情发生
- 做出相应的反应
- 重复
- 浏览器所实现的事件模型
DOM第0级事件模型 |
事件处理程序是通过吧函数实例的引用指派到DOM元素的属性而声明的。 |
DOM第2级事件模型 | 1.建立事件 通过一个元素方法而建立:能在同一个元素同一个事件多个事件处理程序 addEventListener(evenType,listener,useCapture) evenType:click,mouseover... listener:函数引用 useCapture: 事件传播,捕获阶段 IE: attchEvent(eventName,handler) |
JQuery事件模型 | 提供建立事件处理程序的统一方法 允许在每个元素上为每个事件建立多个处理程序 采用标准事件类型名称:click,mouseover 使用Event实例作处理程序的参数 对Event实例的最常用的属性进行规范化 为取消事件和阻塞默认操作提供统一方法 JQuery不支持捕获阶段 |
在大多数浏览器中,Event的实例作为第一个参数传递到处理程序。但ID把Event实例指派到window对象的名为event属性
事件捕获:从根到目标元素调用事件处理程序。IE 不支持捕获阶段
事件冒泡:调用目标元素的事件处理程序,以及父辈的事件处理程序,直到DOM根
阻止事件冒泡: event.stopPropagation() IE: event.cancelBubble=true
取消事件的默认语义: 将处理程序的返回值设置为false。 a, form
- 利用JQuery把事件处理程序绑定到元素上
在匹配集的所有元素上建立函数,作为指定事件类型的事件处理程序 | bind(eventType,data,listener) |
eventType: 字符串。click,mouseover |
包装集 | $('#thing').bind('click.editmode',listener1) $('#thing').bind('click.display',listner2) $('#thing').unbind('click.editmode') 从页面上的所有元素删除editmode命名空间里的所有click绑定 |
一些快捷方式 | blur(listener) change click dbclick error focus keydown keypress keyup load mousedown mousemove mouseout mouseover mouseup resize scroll select submit unload |
这种方式无法指定data | ||
建立事件,并且执行一次就删掉 | one(eventType,data,listener) | 包装集 | ||
从包装集的所有元素中删除可选的已传递参数所指定的事件处理程序 如果不提供参数,则从元素中删除所有的监听程序 |
unbind(eventType,listener) unbind(eventType) |
eventType:可选 listener:可选 |
包装集 | 如果省略参数就会删除所有的监听器 如果函数时匿名的内联函数,则无法删除 |
2. Event对象实例
altKey | Alt, true/false |
ctrlKey | Ctrl。 true/false |
data | bind(,data,,) |
keyCode | keyup,keydown. 都是大写版本。确定大小写可以用shiftKey |
metaKey | Meta , true/false |
pageX | 鼠标事件。事件相对于页面原地的水平坐标 |
pageY | 鼠标事件。 |
relatedTarget | 光标离开或进入的元素 |
screenX | 相对于屏幕原点的水平坐标 |
screenY | |
shiftKey | Shift, true/false |
target | 那个元素上事件被触发 |
type | 事件类型 |
which | 键盘:建的数字编码 鼠标:按下的是那个鼠标键 |
影响事件传播函数:
stopPropagation() 防止事件沿DOM树向上传播
preventDefault()取消默认操作事件
停止事件传播且取消事件的默认行为:处理函数返回false
3. 在脚本控制下触发事件处理程序
调用所有已匹配元素的,为已传递事件类型而建立的任何事件处理程序 | trigger(eventType) | 字符串 | 包装集 | 没有传播,event实例很多属性没有值。因为作为普通函数调用 |
一些简便方式 | blur() click() focus() select() submit() |
包装集 | ||
针对click事件。两个处理函数相互切换 | toggle(listenerOdd,listenerEven) | 包装集 | ||
mouseover,mouseout | hover(overlistener,outlistener) | 包装集 | ||
JQuery实践--事件的更多相关文章
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...
- jQuery实践树(2)
上一个实践主要对jquery的ready事件进行.本实践要来使用jQuery改变页面的背景图片.可以先试试效果:http://hovertree.com/texiao/jquerytree/2/ 当你 ...
- Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...
- 深入学习jQuery鼠标事件
× 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...
- jquery的事件命名空间详解
jquery现在的事件API:on,off,trigger支持带命名空间的事件,当事件有了命名空间,就可以有效地管理同一事件的不同监听器,在定义组件的时候,能够避免同一元素应用到不同组件时,同一事件类 ...
- jquery css事件编程 尺寸设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery css事件编程 位置 操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 不写完不让回家的JQuery的事件与动画
在这看不见太阳的小黑屋里,苦逼的一天又开始了 好了闲话我也就不扯了,接下来我就来说说我对jQuery事件和动画的理解吧!!! 还是得再扯两句,我们敬爱的,Y老师讲完了,jQuery事件和动画,对着我们 ...
- jQuery scroll事件实现监控滚动条分页示例(转)
这篇文章主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可 ...
随机推荐
- 数据结构 -- 哈希表(hash table)
简介 哈希表(Hash table,也叫散列表),是根据关键码值(Key value)而直接进行访问的数据结构.也就是说,它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度.这个映射函 ...
- RecursiveSequence(HDU-5950)【矩阵快速幂】
题目链接: 题意:Si=S(i-1)+2*S(i-2)+i^4,求Sn. 思路:想到了矩阵快速幂,实在没想出来怎么构造矩阵.... 首先构造一个向量vec={a,b,16,8,4,2,1}. 在构造求 ...
- Python【HTML基础】
HTML基础 HTML(Hyper Text Markup Language)超文本标记语言 #HTML是一种用来描述网页的语言,HTML之于网页就好比建筑图纸之于建筑 +++++++++++++++ ...
- golang以服务方式运行
golang开发的二进制程序,一般需要长期后台运行的,在linux上可以用supervisor或upstart或systemd等第三方守护进程来实现.其实golang自己也可以实现以服务的形式常驻后台 ...
- popcorn-js视频Video框架简单用法
<div> <video class="video" id="ourvideobig" preload="auto" co ...
- css 水平垂直居中 & vertical-align
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 已知宽度的元素居中 position定位 + margin负值 绝对定位 + 4个方向全部`0px` + ...
- C# 延迟初始化 Lazy<T>
概念:延时初始化重点是延时,用时加载,意思是对象在使用的时候创建而不是在实例化的的时候才创建. 延时加载主要应用的场景: 数据层(ADO.NET或Entity Framework等ORM,Java ...
- JDBC 学习复习10 编写自己的JDBC框架
首先万分感谢狼哥 孤傲苍狼 博客,整个jdbc学习的博客资料 链接为http://www.cnblogs.com/xdp-gacl/p/4006830.html 详细代码见狼哥博客,列出我学习过程中遇 ...
- 关于NSOperationQueue,一个容易让初学者误解的问题
凡是学习NSOperationQueue的人,都会遇到setMaxConcurrentOperationCount这个函数.在网上的许多博文中,都将setMaxConcurrentOperationC ...
- shell取消键盘回显
使用下面这个命令取消回显 stty -echo 使用下面这个命令打开回显 stty echo