一、事件对象

在事件处理程序中,浏览器会为之传入一个event对象,该对象的常用属性和方法如下:

type:触发的事件类型,如click,keypress等

target:事件的目标

currentTarget:事件处理程序当前正在处理事件的那个元素

在事件处理程序内部,this始终等于curentTarget的值,如果事件处理程序直接赋给了目标元素,那么这三个值是相等的。但是,如果事件处理程序是注册到父节点上,那么this和currentTarge则等于父节点,而target则等于实际发生事件的子节点元素。

eventPhase:事件发生到哪个阶段:0事件捕获阶段,1事件处于目标对象上,2冒泡阶段。

常用方法:

preventDefault()取消事件的默认行为

stopImmediatePropagation()取消事件的进一步捕获或者冒泡。

stopPropagation()取消事件冒泡

不同浏览器对上述对象和方法的调用也存在一定差异,因此,下列代码实现了一个跨浏览器的EventUtil对象。

//事件的添加和删除
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getEvent:function(event){
return event?event:window.event;
},
getTarget:function(event){
return event.target?event.target:event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
} };

三、常见的事件类型(这里只备注常用的)

1.UI事件

UI事件值那些不一定和用户操作有关的事件。包括

1)load 在页面完全加载,包括图像(延迟图像实现的依据),js文件,框架,css等资源都加载完毕后才会触发,

2)unload 在页面完全卸载时在window上触发,在所有框架都卸载后在框架上触发,或者迁入内容卸载完毕后在object上触发。

3)resize 窗口大小变化时在window上触发

4)scroll 当用户滚动带有滚动条的元素中内容在,在该元素上触发。

5)error 当发生javascript错误时,在window上触发;当无法加载图像时在img上触发;

注意上述事件,有些不仅仅是在window上出发,如load在<img>上,scroll在其他元素上也能够出发

备注:很多js库,如jquey,其$(function())与load的区别有两点,1)window.onload只能赋值一次,这是DOM0的限制,运用上面的eventUtil也可以对一个事件增添多个事件处理程序。2)window的load是在所有资源全部加载才触发,而库中的全局函数则是在dom资源可用就能够触发,如果想实现同样的效果,可以利用document的"DOMContentLoaded"事件。

error:在js发生错误时出发

EventUtil.addHandler(window,"load",function(event){
alert("window is ready");
});

2,焦点事件

focus:在元素获得焦点时候触发,不冒泡,所有浏览器都支持

blur:在元素失去焦点时候触发,不冒泡,所有浏览器支持

focusin:元素获得焦点的时候触发,冒泡

focusout:元素失去焦点时候触发,冒泡

3.鼠标与滚轮事件(也是最常用的一类事件)

click:用户单击鼠标左键时触发,按下回车键也能触发

dbclick:用户双击左键时触发

mousedown:用户按下了任意鼠标按钮手触发,不能通过按键触发这个事件

mouseup :用户释放鼠标按键时触发,不能通过按键触发这个事件

mouseenter:用户从元素外进入元素内时触发,这个事件不冒泡,并且在光标移动到后代元素的时候不会触发

mouseleave :用户从元素上方移动到元素外的时候触发,事件不冒泡,并且在光标移动到后代元素的时候不会触发

mouseout: 鼠标从元素内进入元素外时触发,事件冒泡,鼠标移动到子元素时候也会触发

mouseover 鼠标从元素外进入元素内时触发,事件冒泡,鼠标移动到子元素时候也会触发

mousemove 在元素内部移动时重复触发

mousewheel 鼠标滚轮事件,该事件可以在任何元素上触发,最终会冒泡到document或者window

只有在同一个元素上相继触发mousedown和mouseup,才会触发一次click,只有触发了两次click,才会触发一次dbclick;

对于鼠标事件,event对象会包含下列属性:

event.clientX与event.clinetY:鼠标相对于视口的坐标;

event.pageX与event.pageY:鼠标相对于页面的坐标;

event.screenX与event.screenY:鼠标相对于屏幕的坐标:

event.relateTarget:其中,mosueover和mouseout事件中,event的relateTarget的值不再为空,对于mouseover来说,代表与之相关的失去焦点的元素;mouseout则与之相反

event.shiftKey/event.ctrlKey/event.altKey/event.meatKey:代表是否在点击鼠标的同时按下了对应的键盘键

event.button:对于mousedown和mouseup事件来说,因此点击任何鼠标按键都会触发,此时event.button 取值如果为0代表按下了左键,如果为1代表中间键(滚轮),为2代表右键。

4,键盘与文本事件(在文本框上输入文本时最常用到)

keydown:按钮键盘任意键时候出出发,如果按住不放,就重复触发

keypress:按下键盘上的字符键才触发,按住不放,重复触发

keyup:释放键盘时候,触发

textInput事件:DOM3级引入了一个新事件textInput,这个事件与keypress的不同之处在于:1)keypress可以在任何获得焦点的元素上触发,textInput仅在可编辑区域触发;2)textInput只有在用户输入实际字符按键时候才会触发,而keypress在按下影响文本显示的按键(如退格)时候也会触发

如果按下了字符键,那么触发顺序是:keydown——>keypress——>keyup;keydown和keypress是在文本变化之前触发的,keyup则是在文本变化之后触发的。

对于这些事件,event对象会包含以下属性:

在发生keydown和keyup事件时候,event对象的keyCode会包含一个代码,是对应的ASCII,如数字A是65等。

在发生keypress时候,event的charCode属性也包含一个值,代表所表示字符的ASCII编码,此时的keyCode通常为0或者等于该键的键码。

常见按键的键码有:

回车:13

退格:8

制表tab:9

如果用跨浏览器的方法取得键码:

var code=event.charCode||event.keyCode;

三、事件模拟

事件模拟:dispatchEvent()或者IE8之前的fireEvent(),但是感觉貌似要么使用原生的事件模拟快捷方法:如submit(),focus()等,或者如jquery那般重构事件对象,很少有这样触发事件模拟的。

javaScirpt学习之事件的更多相关文章

  1. Vue – 基础学习(4):事件修饰符

    Vue – 基础学习(3):事件修饰符

  2. 【JavaScript学习】-事件响应,让网页交互

    什么是事件: JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单 ...

  3. 系统学习DOM事件机制

    本文将从以下几个方面介绍DOM事件: 基本概念:DOM事件的级别 DOM事件模型,事件流 描述DOM事件捕获的具体流程 Event对象的常见应用 自定义事件 DOM事件的级别 //DOM0 eleme ...

  4. C#基础学习之事件的理解和应用

    事件的使用和委托类似,也是分四步来实现:声明委托.定义事件.注册事件.调用事件 我们先看一下事件的定义 //定义委托 public delegate void PublishEventHandler( ...

  5. JS学习笔记-事件绑定

    一.传统事件模型 传统事件模型中存在局限性. 内联模型以HTML标签属性的形式使用,与HTML混写.这样的方式无疑造成了改动以及扩展的问题,已经非常少使用了. 脚本模型是将事件处理函数写到js文件里, ...

  6. 微信小程序入门学习之事件 事件对象 冒泡非冒泡事件(1)

    这关于事件的学习,可以自己复制到微信开发者工具上自己运行试试. 首先这里有两个文件.js 和.wxml 文件 首先给出.js文件下代码 // pages/news/news.js Page({ /** ...

  7. Flex事件机制学习-自定义事件实现类间通信 .

    今天,学习Flex自定义事件,可以使两个类通信,定义一个Main类. public class Main extends Sprite     {            public function ...

  8. js学习笔记-事件委托

    通过事件委托,你可以把事件处理器绑定到父元素上,避免了把事件处理器添加到多个子级元素上.从而优化性能. 事件代理用到了事件冒泡和目标元素.而任何一个元素的目标元素都是一开始的那个元素. 这里首先要注意 ...

  9. iOS学习9_事件分发&amp;响应链

    iOS的三种事件:触摸事件/运动事件/远程控制事件 typedef enum { UIEventTypeTouches, UIEventTypeMotion, UIEventTypeRemoteCon ...

随机推荐

  1. PAT天梯赛练习题 L3-011. 直捣黄龙(多关键字SPFA+DFS)

    L3-011. 直捣黄龙 时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 本题是一部战争大片 —— 你需要从己方大本营出发,一路 ...

  2. 使用HIBERNATE的SQL查询并将结果集自动转换成POJO

    在某些场合下,我们可能想使用HIBERNATE的框架提供的SQL查询接口,但是,由于实体没有做映射,HIBERNATE不能把结果集转换成你想要的List<POJO>,本文讨论如何在这种情况 ...

  3. UVALive 7297 bfs

    题意 一个小偷偷到了项链 他想知道自己是否可以逃出去 地图中有一个小偷 一个警察 警察有一条狗 一开始 小偷和警察的移动速度都是1 当警察走到小偷经过过的地方时 警察会有一条狗嗅到小偷的气味并且以2的 ...

  4. Nginx 笔记与总结(13)Nginx 的 gzip 压缩

    使用 FireFox(40.0)访问博客园(http://www.cnblogs.com/),观察 http 头信息 请求头信息: Accept-Encoding gzip, deflate 表示浏览 ...

  5. 做bbs论坛项目的收获(1)

    1. 当两张表出现关联的时候,关联的外键,千万不能是汉字,千万不能使汉字,因为这个问题,直接导致项目进行不下去..... 顺便记录一下知识点(一) 当用frameset设置网页的结构的时候 eg: & ...

  6. node.js 初体验

    node.js 初体验 2011-10-31 22:56 by 聂微东, 174545 阅读, 118 评论, 收藏, 编辑 PS: ~ 此篇文章的进阶内容在为<Nodejs初阶之express ...

  7. PHP文件操作 之统计目录大小

    <?php //定义一个函数 统计目录大小函数 function dirSize($dirName) { //判断目录是否存在 if (!file_exists($dirName)) { die ...

  8. MySQL binlog-do-db选项是危险的

    很多人通过 binlog-do-db, binlog-ignore-db, replicate-do-db 和   replicate-ignore-db 来过滤复制(某些数据库), 尽管有些使用, ...

  9. wordpress插入腾讯视频的方法

    wordpress插入腾讯视频的方法 最近网站需要插入腾讯视频,但是腾讯视频目前没有分享代码,只有分享到微信,qq,微博等具体选项.百度这个问题,貌似没有很好地解决办法,好像有两个插件可以使用,安装试 ...

  10. Advanced Packaging Tool

    https://en.wikipedia.org/wiki/Advanced_Packaging_Tool Eventually, a new team picked up the project, ...