事件对象

在触发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. functools 之 partial(偏函数)

    当函数的参数个数太多,需要简化时,使用functools.partial可以创建一个新的函数,这个新函数可以固定住原函数的部分参数,从而在调用时更简单.当然,decorator(装饰器) 也可以实现, ...

  2. django settings配置文件ALLOWED_HOSTS

    ALLOWED_HOSTS列表为了防止黑客入侵,只允许列表中的ip地址访问 填写上“*”可以使所有的网址都能访问Django项目了,项目测试的时候,可以这么做.这样就失去了保护

  3. Oracle 数据库中对记录进行分页处理

    学习到 oracle 的视图的时候,了解到对 Oracle 中数据的记录进行分页处理和 Mysql 提供的 limit 来进行分页处理大有不同,limit 是 mysql 中特有的关键字. 那么在 o ...

  4. windows平台MySQL密码设置与破解

    一:制作系统服务: 1.在cmd下输入 mysql 这个相当于启动服务端了,然后该启动客户端了 .就表示安装成功. 2.再重新开启一个 cmd 窗口.kill 进程. 输入 mysql 即可进入 my ...

  5. Python_格式化字符

    %% 百分号标记 #就是输出一个%%c 字符及其ASCII码%s 字符串 %r 是不管是什么打印出来%d 有符号整数(十进制)%u 无符号整数(十进制)%o 无符号整数(八进制)%x 无符号整数(十六 ...

  6. oracle 索引提升查询速度, in 和 exist 效率

    做记录: 今天有一个有153万条数据的表,发现查询很慢: select count(y) as transfereeNum,x from t_ast_subject_invest_order GROU ...

  7. Itreatot接口实现类中modCount的作用

    modCount只有在本数据结构对应迭代器中才使用,以HashMap为例: private abstract class HashIterator implements Iterator { Entr ...

  8. JavaBean动作元素

    用动作标签创建Javabeans实例 <jsp:useBean id="实例对象名" class="com.po.Users(类全名)" scope=&q ...

  9. 用python turtle实现汉诺塔的移动

    1.汉诺塔 汉诺塔(又称河内塔)问题是源于印度一个古老传说的益智玩具.大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘.大梵天命令婆罗门把圆盘从下面开始按大小 ...

  10. idea取消vim模式

    在安装idea时选择了vim编辑模式,但是用习惯了eclipse,总是要拷贝粘贴,在idea中一直按ctrl+c和ctrl+v不起总用.于是想把vim模式关闭掉.方法:菜单栏:tools->vi ...