事件对象

在触发DOM‘事件时,会产生一个事件对象 event

该对象包含着所有与事件有关的信息

所有浏览器都支持 event 对象但是支持的方式有所不同

DOM事件对象

兼容DOM的浏览器会将event对象传入事件处理程序中

如下所示:

var btn = document.getElementByTagName("button")[0];

btn.onclick = function(event){
alert(event.type); //"click"
}

而通过HTML特性指定的事件处理程序,变量event保存着 event 对象

<input type = "button" value = "click" onclick = "alert(event.type)" />

event 对象包含与创建它的特定事件有关的方法和属性

如下表所示:

属性/方法 类型 读/写 说明
bubbles Boolean 只读 表明事件是否冒泡
cancelable Boolean 只读 表明是否可以取消事件的默认行为
currentTarget Element 只读 指向事件处理程序所处理事件的触发元素
defaultPrevent Boolean 只读 为true表示已经调用了preventDefault()方法
detail Integer 只读 与事件相关的细节信息
eventPhase Integer 只读 调用事件处理程序的阶段 1表示捕获阶段  2表示处于目标阶段 3表示冒泡阶段
preventDefault() Function 只读 取消事件的默认行为,当cancelable为 true 时才能使用该方法
stopImmediatePropagation() Function 只读 取消事件的进一步捕获或冒泡,针对同一事件的多个事件处理程序(即事件终止于当前事件处理程序不会继续,就算是同一个元素的同一个事件的不同事件处理程序也不会触发)
stopPropagation() Function 只读 取消事件的下一阶段的事件处理程序,但是当前阶段的不同事件处理程序都会触发
target Element 只读 事件的目标元素
trusted Boolean 只读 true表示事件是浏览器生成,false表示事件为JS创建
type String 只读 事件触发的类型
view AbstractView 只读 与事件关联的抽象视图,等同于发生事件的window对象

在事件处理程序的内部,this 始终等于 currentTarget 的值

而target只包含事件的实际目标

也就是说 this和current指向的是注册当前事件的元素,而target是当前事件的目标元素

这两者可能有一样的值,而在事件委托时我们将事件注册到目标元素的父元素上,这两者就不相同了

当我们需要通过一个函数处理多个事件的时候

可以使用type属性

如:

var btn = document.getElemntByTagName("button")[0]'
var handler = function(event){
switch(event.type){
case "click":
alert("clicked");
break;
case "mouseover":
alert("mouseover");
break;
case "mouseout":
alert("out");
break;
}
} btn.onclick = handle;
btn.onmouseover = handle;
btn.onmouseout = handle;

如果希望阻止事件的默认行为,可以使用 preventDefault() 方法

不过只有cancelable 属性为true 的事件才能阻止默认行为

而关于stopImmediatePropagation()和stopPropagation()的区别在于,前者让事件流停止在当前事件处理程序,而后者是让事件流停在当前事件流阶段

此外,只有在事件处理程序执行期间 event 对象才会存在,一旦执行完毕 event 对象就会销毁

IE中的事件对象

与访问DOM中的 event 对象不同,访问IE中的 event 有几种不同的方式,而方式取决于是如何注册事件处理程序的

当我们使用DOM0级的方式添加事件处理程序的时候 event 对象作为 window  的一个属性存在

而如果我们使用 attachEvent 方法添加事件处理程序,那么就和DOM一样 event 对象会作为一个参数传入事件处理程序

并且也可以使用 window.event来访问

而IE中的所有事件对象都会包含以下属性和方法:

属性/方法 类型 读/写 说明
cancelBubble Boolean 读/写 默认值为false,设置为true就可以取消冒泡
returnValue Boolean 读/写 默认值为true,设为法拉瑟可以取消事件的默认行为
srcElement Element 只读

事件目标与DOM中的 target 属性相同

type String 只读

被触发事件的类型

而IE中有一点比较重要,那就是事件处理程序的this指向和事件处理程序的指定方式有关,所以在使用时最好使用 event.srcElement 比较保险

跨浏览器事件对象

事件对象当然也有跨浏览器的实现方式

下方给出的是一个简略的初步实现:

function eventFunction(e){
var events;
events = e ? e : window.event;// event对象兼容
events.target = e.target || e.srcElement;// 目标元素兼容
events.preventDefault = e.preventDefault || function () {
events.returnValue = false;
};// 阻止默认事件兼容
events.stopPropagation = e.stopPropagation || function () {
events.cancelBubble = true;
};// 阻止冒泡兼容
}

Javascript高级编程学习笔记(59)—— 事件(3)事件对象的更多相关文章

  1. Javascript高级编程学习笔记(57)—— 事件(1)事件流

    事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...

  2. Javascript高级编程学习笔记(64)—— 事件(8)键盘与文本事件

    键盘与文本事件 用户在使用键盘时会触发键盘事件 “DOM2级事件”最初规定了键盘事件,但是最后在定稿时又删除了相应内容 所以键盘事件被放入了DOM3级事件的规范中 总的来说有三个键盘事件: keydo ...

  3. Javascript高级编程学习笔记(70)—— 事件(14)内存和性能

    由于事件处理程序是现代的web程序交互能力的提供者 所以在日常实践中,我们免不了要向页面中添加大量的事件处理程序(不管是用于用户交互还是用于统计用户数据) 在创建GUI(图形用户界面)的语言(如C#) ...

  4. Javascript高级编程学习笔记(69)—— 事件(13)触摸与手势事件

    触摸与手势事件 由于移动设备既没有鼠标也没有键盘,所以在为移动浏览器开发交互性网页时,常规的鼠标键盘事件根本不够用 所以早期的苹果为Safari 添加了一些与触摸相关的事件 随着后面Android的W ...

  5. Javascript高级编程学习笔记(67)—— 事件(11)HTML5事件

    DOM规范没有涵盖所有浏览器支持的所有事件 而许多浏览器出于满足用户需求,或解决特殊问题的目的,实现了一些自定义事件 HTML5列出了浏览器应该支持的所有事件,这里只讨论得到浏览器完善支持的事件(并非 ...

  6. Javascript高级编程学习笔记(66)—— 事件(10)变动事件

    变动事件 DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示 变动事件是为XML或HTML DOM 设计的,并不特定于某种语言 DOM2级定义了如下变动事件: DOMSubtreeModif ...

  7. Javascript高级编程学习笔记(63)—— 事件(7)鼠标及滚轮事件

    鼠标与滚轮事件 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备 DOM3级事件中定义了9个鼠标事件: click:在用户单击主鼠标按钮(一般为鼠标左键)或者按下回车时触发,这一点对 ...

  8. Javascript高级编程学习笔记(62)—— 事件(6)焦点事件

    焦点事件 焦点事件会在页面元素获得或者失去焦点时触发,利用焦点事件和 document.hasFocus() 方法配合使用 以及 document.activeElement 属性配合可以知晓用户在页 ...

  9. Javascript高级编程学习笔记(61)—— 事件(5)UI事件

    UI事件 UI事件是指那些不一定与用户操作有关的事件 这些事件在DOM规范出现之前,都是以各种不同的形式存在于不同的浏览器 而在DOM事件中为了保证向后兼容,现有的UI事件如下: DOMActivat ...

  10. Javascript高级编程学习笔记(58)—— 事件(2)事件处理程序

    事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...

随机推荐

  1. 按enter 导致整个页面刷新的解决办法

    1.如果用的又from表单的存在,则在form中添加事件 <form onsubmit="return false;">.......</form> 2.增 ...

  2. 手把手教学在Springboot中搭建使用Guava cache,包教包会,不会我输一包辣条给你

     guava cache使用简介 概述 缓存是日常开发中经常应用到的一种技术手段,合理的利用缓存可以极大的改善应用程序的性能. Guava官方对Cache的描述连接 缓存在各种各样的用例中非常有用.例 ...

  3. mongocxx-driver编译安装

    1. 确保安装epel yum install -y epel-release 2. 按照<CentOS7.2部署node-mapnik>一文中的步骤,手动安装 gcc-6.2.0 和 b ...

  4. windows 下安装redis

    https://github.com/MicrosoftArchive/redis/releases redis 服务安装到系统 redis-server.exe --service-install ...

  5. 安装CentOS 7 的yum 到 Radhat 7上,使其可以获取资源

    镜像资源: 1. http://mirrors.163.com/ 2. https://opsx.alibaba.com/mirror 从上列镜像资源下载如下rpm软件包 -rw-r--r--. 1 ...

  6. day04-Servlet介绍(1)

    1.servlet的概述 a.什么是servlet --servlet是javaWeb的三大组件(Listener,Filter)之一,他属于动态资源 --servlet的作用是(10086): 服务 ...

  7. 《笨方法学Python》加分题17

    题目通过前学习的文件操作把一个文件中的内容拷贝到另一个文件中,并使用 os.path.exists 在拷贝前判断被拷贝的文件是否已经存在,之后由用户判断是否继续完成拷贝. 新知识os.path.exi ...

  8. ci框架nginx访问

    url:http://localhost:20082/index.php/welcome/index 问题:apache环境下可以访问,nginx环境下不可以

  9. GUI学习之五——QPushbutton类学习笔记

    QPushButton是QAbstractButton类下使用最多的子类,它的用法在上一章中基本讲完了,这里还总结了几个别的用法. 一.创建按钮 我们在前面所有的案例中创建按钮都是用这样的方式 win ...

  10. 初识spark的MLP模型

    初识Spark的MLP模型 1. MLP介绍 Multi-layer Perceptron(MLP),即多层感知器,是一个前馈式的.具有监督的人工神经网络结构.通过多层感知器可包含多个隐藏层,实现对非 ...