通过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. 创建新表,自动授权trigger

    需求 一个用户下三个表,开发人员不定时进行rename表名称,create原表名称 as old_table 插入少量数据,另一个业务用户需要访问该表,由于表名称rename导致经常需要手工授权. 需 ...

  2. hdu 4745 two Rabits

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=4745 题解:首先要抽象出题目要求的是啥.首先对于环的问题, 我们可以倍增成链,然后环的所有情况可以通过链来 ...

  3. 加密算法 MD5 和 SHA 的 JAVA 实现

    首先先简单的介绍一下MD5 和 SHA 算法 然后看一下在  java.security.MessageDigest   (信息摘要包下) 如何分别实现  md5 加密 和 sha 加密 最后在看一下 ...

  4. 在docker下SQL Server attach mdf和ldf文件

    (DB:MyPost) USE masterGO-- Create database via attachCREATE DATABASE [MyPost]    ON ( FILENAME = N'C ...

  5. Django rest-framework框架-组件之分页

    分页: a. 分页,看第n页, 每页显示n条数据 from rest_framework import serializers from api import models from rest_fra ...

  6. ThinkPHP5.0.*远程代码执行漏洞预警

    安全公告 Thinkphp5.0.*存在远程代码执行漏洞. 漏洞描述 Thinkphp5.0.*存在远程代码执行漏洞.攻击者可以利用漏洞实现任意代码执行等高危操作. 目前官方已经出了补丁: https ...

  7. js的页面交互

    与html标签建立关系 //获取标签,js如何与html标签建立联系 两种方式 //1. let num = document.getElementsByClassName('d1'); consol ...

  8. 认识:before和:after伪类

    有时候,我们需要大量的重复代码去实现一个非常简单的功能,这不仅浪费时间,而且效率低下,例如: <div class="aa">你好</div><div ...

  9. leetcode-8.atoi · string *

    题面 原题挺长的,还是英文,就不抄了,

  10. How to find Oracle EBS Weblogic Server Admin Port and URL

    How to find Oracle EBS Weblogic Server Admin Port and URL   Weblogic admin portMethod 1 Open the App ...