通过HTML网页所呈现的界面是异步的和事件驱动的。步骤:

  • 建立用户界面
  • 等待又去的事情发生
  • 做出相应的反应
  • 重复
  1. 浏览器所实现的事件模型
DOM第0级事件模型

事件处理程序是通过吧函数实例的引用指派到DOM元素的属性而声明的。
                                                  或HTML的特性。
当指定到HTML特性上时,匿名函数就会利用特性的值作为函数体而自动创建
onclick <=> click事件
onmouseover <=>mouseover事件
在事件处理程序中,可以利用event参数
违反了不唐突的JavaScript原则
每个元素对于任何特定的事件类型,每次只能注册一个事件处理程序

DOM第2级事件模型 1.建立事件
  通过一个元素方法而建立:能在同一个元素同一个事件多个事件处理程序
  addEventListener(evenType,listener,useCapture)
  evenType:click,mouseover...
  listener:函数引用
  useCapture: 事件传播,捕获阶段

IE: attchEvent(eventName,handler)
 eventName:onclick,onmouseover...

JQuery事件模型 提供建立事件处理程序的统一方法
允许在每个元素上为每个事件建立多个处理程序
采用标准事件类型名称:click,mouseover
使用Event实例作处理程序的参数
对Event实例的最常用的属性进行规范化
为取消事件和阻塞默认操作提供统一方法
JQuery不支持捕获阶段

在大多数浏览器中,Event的实例作为第一个参数传递到处理程序。但ID把Event实例指派到window对象的名为event属性
事件捕获:从根到目标元素调用事件处理程序。IE 不支持捕获阶段
事件冒泡:调用目标元素的事件处理程序,以及父辈的事件处理程序,直到DOM根
阻止事件冒泡: event.stopPropagation() IE: event.cancelBubble=true
取消事件的默认语义: 将处理程序的返回值设置为false。  a, form

  1. 利用JQuery把事件处理程序绑定到元素上
在匹配集的所有元素上建立函数,作为指定事件类型的事件处理程序 bind(eventType,data,listener)

eventType: 字符串。click,mouseover
               or click.scope
data:对象,event.data,可省略
listener: 函数

包装集 $('#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实践--事件的更多相关文章

  1. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  2. jQuery实践树(2)

    上一个实践主要对jquery的ready事件进行.本实践要来使用jQuery改变页面的背景图片.可以先试试效果:http://hovertree.com/texiao/jquerytree/2/ 当你 ...

  3. Jquery的事件操作和文档操作

    对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...

  4. 深入学习jQuery鼠标事件

    × 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...

  5. jquery的事件命名空间详解

    jquery现在的事件API:on,off,trigger支持带命名空间的事件,当事件有了命名空间,就可以有效地管理同一事件的不同监听器,在定义组件的时候,能够避免同一元素应用到不同组件时,同一事件类 ...

  6. jquery css事件编程 尺寸设置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jquery css事件编程 位置 操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 不写完不让回家的JQuery的事件与动画

    在这看不见太阳的小黑屋里,苦逼的一天又开始了 好了闲话我也就不扯了,接下来我就来说说我对jQuery事件和动画的理解吧!!! 还是得再扯两句,我们敬爱的,Y老师讲完了,jQuery事件和动画,对着我们 ...

  9. jQuery scroll事件实现监控滚动条分页示例(转)

    这篇文章主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可 ...

随机推荐

  1. 数据结构 -- 哈希表(hash table)

    简介   哈希表(Hash table,也叫散列表),是根据关键码值(Key value)而直接进行访问的数据结构.也就是说,它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度.这个映射函 ...

  2. RecursiveSequence(HDU-5950)【矩阵快速幂】

    题目链接: 题意:Si=S(i-1)+2*S(i-2)+i^4,求Sn. 思路:想到了矩阵快速幂,实在没想出来怎么构造矩阵.... 首先构造一个向量vec={a,b,16,8,4,2,1}. 在构造求 ...

  3. Python【HTML基础】

    HTML基础 HTML(Hyper Text Markup Language)超文本标记语言 #HTML是一种用来描述网页的语言,HTML之于网页就好比建筑图纸之于建筑 +++++++++++++++ ...

  4. golang以服务方式运行

    golang开发的二进制程序,一般需要长期后台运行的,在linux上可以用supervisor或upstart或systemd等第三方守护进程来实现.其实golang自己也可以实现以服务的形式常驻后台 ...

  5. popcorn-js视频Video框架简单用法

    <div> <video class="video" id="ourvideobig" preload="auto" co ...

  6. css 水平垂直居中 & vertical-align

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 已知宽度的元素居中 position定位 + margin负值 绝对定位 + 4个方向全部`0px` + ...

  7. C# 延迟初始化 Lazy<T>

    概念:延时初始化重点是延时,用时加载,意思是对象在使用的时候创建而不是在实例化的的时候才创建.   延时加载主要应用的场景: 数据层(ADO.NET或Entity Framework等ORM,Java ...

  8. JDBC 学习复习10 编写自己的JDBC框架

    首先万分感谢狼哥 孤傲苍狼 博客,整个jdbc学习的博客资料 链接为http://www.cnblogs.com/xdp-gacl/p/4006830.html 详细代码见狼哥博客,列出我学习过程中遇 ...

  9. 关于NSOperationQueue,一个容易让初学者误解的问题

    凡是学习NSOperationQueue的人,都会遇到setMaxConcurrentOperationCount这个函数.在网上的许多博文中,都将setMaxConcurrentOperationC ...

  10. shell取消键盘回显

    使用下面这个命令取消回显 stty -echo   使用下面这个命令打开回显   stty echo