通过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. Word 写论文插入参考文献的正确操作

    1. 引言 一般我们写论文插入参考文献的标号都是手动输入的,这样造成的问题有以下几个: 手动输入标号比较麻烦: 如果参考文献顺序变了,需要一个一个重新更改标号数值,及其麻烦: 标号无法和末尾的参考文献 ...

  2. 如何理解Python中的None

    Python中的None是一个经常被用到的知识点,但是很多人对于None的内涵把握的还是不够精确,今天就和我一起好好理解下这个小知识点吧. 1.None表示空,但它不等于空字符串.空列表,也不等同于F ...

  3. linux-centos7安装Oracle11gr2数据库(在图形界面下)

    修改操作系统核心参数 在Root用户下执行以下步骤: 1)修改用户的SHELL的限制,修改/etc/security/limits.conf文件 oracle soft nproc 2047 orac ...

  4. 『Python基础练习题』day01

    个人主页: https://lipeiguan.top 1.简述变量命名规范 2.name = input(">>>") name变量是什么数据类型? 3.if条 ...

  5. substr函数索引创建测试

    技术群里小伙伴,沟通说一条经常查询的SQL缓慢,单表SQL一个列作为条件,列是int数值类型,索引类型默认创建. 一.SQL文本substr函数索引创建测试 ,) nm1 ')需求,将上述SQL执行速 ...

  6. Kafka 消息中间件

    kafka简介与应用场景 Apache Kafka是分布式发布-订阅消息系统,在 kafka官网上对 kafka 的定义:一个分布式发布-订阅消息传递系统. 它最初由LinkedIn公司开发,Link ...

  7. C# 第一次做项目。一些经验总结。

    这是我的第一篇博客,写得不好望大家多多包涵. 初学C#2个多月,拿着老师给的项目,试着做了做,发现自己在编程方面有很多陋习与编程知识方面的不足. 首先是没有遵守某一个设计模式,这导致我想到哪里就做到了 ...

  8. Python 3.7的新特性

    Python 3.7为数据处理.脚本编译和垃圾收集优化以及更快的异步I/O添加了许多新类.python是一种旨在简化复杂任务的语言.python 3.7的最新版本已经正式休闲鹿进入beta发布阶段.P ...

  9. C++ 语句函数再探

    1. 表达式只计算,抛弃计算结果: 2. 空语句什么也不做: 3.switch case语句漏写break,将会从匹配到的情况开始执行,直到语句结束 int main() { ; i + ; //表达 ...

  10. 第五章、drf-JWT认证

    目录 JWT认证 JWT认证方式与其他认证方式对比: 优点 格式 drf - jwt 插件 官网 安装 token的签发与校验初识: 签发token 校验token 自定义drf-jwt配置 sett ...