JavaScript高级程序设计41.pdf
事件对象
在触发DOM上某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。
DOM中的事件对象
兼容DOM的浏览器会将event对象传入到事件处理程序中,无论指定事件处理程序时使用什么方法(DOM0级或DOM2级)
btn.addEventListener("click",function(event){
alert(event.type); //"click"
},false);
通过HTML特性指定事件处理程序时,变量event中保存着event对象
<input type="button" value="Click Me" onclick="alert(event.type)"/>
event对象包含于创建它的特定事件有关的属性和方法,触发的事件类型不一样,可用的属性和方法也不一样(以下属性或方法均只读)
bubbles 布尔值 表明事件是否冒泡
cancelable 布尔值 表明是否可以取消事件的默认行为
currentTarget 元素 其事件处理程序当前正在处理事件的那个元素
defaultPrevented 布尔值 true表示已经调用了preventDefault()(DOM3级事件新增)
detail 整数 与事件相关的细节信息
eventphase 整数 调用事件处理程序的阶段:1表示捕获阶段调用,2表示“处于目标”,3表示冒泡阶段调用
preventDefault() 函数 取消事件的默认行为。如果cancelable是true,则可以使用这个方法
stopImmediatePropagation() 函数 取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用(DOM3级事件中新增)
stopPropagation() 函数 取消事件的进一步捕获或冒泡,如果bubbles为true,则可以使用这个方法
target 元素 事件的目标
trusted 布尔值 为true表示事件是浏览器生成的,false表示事件是由开发人员通过Javascript创建的(DOM3级事件中新增)
type 字符串 被触发的事件的类型
view AbstractView 与事件关联的抽象视图。等同于发生事件的window对象
在事件处理程序内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标,如果直接将事件处理程序指定给了目标元素,则this、currentTarget和target包含的值相同
btn.onclick=function(event){
alert(event.currentTarget===this); //true
alert(event.target===this); //true
如果事件处理程序存在于按钮的父节点中(如document.body),那么这些值是不同的
document.body.onclick=function(event){
alert(event.currentTarget===document.body); //true
alert(document.body===this); //true
alert(event.target===document.getElementById("myBtn")); //true
};
因为事件处理程序是注册到这个元素(document.body)上的,而target元素却等于按钮元素,由于按钮上没有注册处理程序,结果click事件冒泡到了document.body元素
在需要通过一个函数处理多个事件时,可以使用type属性,如
switch(event.type){
case"click":
alert("Clicked");
break;
case"mouseover":
...
}
要阻止特定事件的默认行为,可以使用preventDefault()方法(cancelable属性为true的前提下)。例如,链接的默认行为就是在单击时会导航到其href特性指定的URL
var link=document.getElementById("myLink");
link.onclick=function(event){
event.preventDefault(); //取消默认行为
};
stopPropagation()方法用于立即停止事件在DOM层次中的传播。即取消进一步的事件捕获或冒泡,下例只弹出一次窗口
btn.onclick=function(event){
alert("Clicked");
event.stopPropagation(); //取消进一步的事件捕获或冒泡
};
document.body.onclick=function(event){
alert("Body clicked");
};
eventphase表示调用事件的阶段
var btn=document.getElementById("myBtn");
btn.onclick=function(event){
alert(event.eventphase); //2
};
document.body.addEventListener("click",function(event){
alert(event.eventphase); //1
},true);
document.body.onclick=function(event){
alert(event.eventphase); //3
};
只有在事件处理程序执行期间,event对象才会存在,一旦事件处理程序执行完毕,event对象就会被销毁。
JavaScript高级程序设计41.pdf的更多相关文章
- JavaScript高级程序设计61.pdf
JSON对象 早期的JSON解析器就是使用JavaScript的eval()函数,ECMAScript5对解析JSON的行为做出了规定,定义了全局对象JSON. JSON对象有2个方法:stringi ...
- JavaScript高级程序设计60.pdf
错误处理 try-catch语句 try{ //可能会导致错误的代码 }catch(error){ //在错误发生时如何处理 } error是一个包含着错误信息的对象,它有一个message属性,保存 ...
- JavaScript高级程序设计58.pdf
15章 使用Canvas绘图 略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作 跨文档消息传递 简称XDM,指来自不同域 ...
- JavaScript高级程序设计57.pdf
表单序列化 首先了解一下浏览器如何将数据发送给服务器 对表单字段的名称和值进行URL编码,使用和号(&)分隔 不发送禁用的表单字段 只发送勾选的复选框和单选按钮 不发送type为“reset” ...
- JavaScript高级程序设计55.pdf
输入模式 HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值 例如,只想在允许在文本字段中输入数值 <input type="text&q ...
- JavaScript高级程序设计54.pdf
过滤输入 对于一些浏览器,可以使用正则表达式里的text()测试用户按下的按键,Firefox和safari(3.1版本之前)会对向上向下.退格键和删除键触发keypress事件,在Firefox中, ...
- JavaScript高级程序设计53.pdf
共有的表单字段方法 每个表单字段都有两个方法:focus()和blur(),其中focus()用于将浏览器焦点设置到表单字段,激活表单字段.可以侦听页面的load事件 EventUtil.addHan ...
- JavaScript高级程序设计52.pdf
表单脚本 表单的基础知识 在HTML中,表单是由<form>元素表示的,在Javascript对应的是HTMLFormElement类型,它继承自HTMLElement,因此具有与其他HT ...
- JavaScript高级程序设计50.pdf
hashchange事件 HTML5新增了hashchange事件,以便在URL的参数列表(及URL中“#”号后面的所有字符串)发生变化时通知开发人员,之所以新增这个事件,是因为在Ajax应用中,开发 ...
随机推荐
- javascript 节点属性详解
javascript 节点属性详解 根据 DOM,html 文档中的每个成分都是一个节点 DOM 是这样规定的:整个文档是一个文档节点每个 html 标签是一个元素节点包含在于 html 元素中的文本 ...
- OrderedDict
OrderedDict 使用dict时,Key是无序的.在对dict做迭代时,我们无法确定Key的顺序. 如果要保持Key的顺序,可以用OrderedDict: >>> from c ...
- POJ 3264 Balanced Lineup 简单RMQ
题目:http://poj.org/problem?id=3264 给定一段区间,求其中最大值与最小值的差. #include <stdio.h> #include <algorit ...
- POJ 2002 Squares 哈希
题目链接: http://poj.org/problem?id=2002 #include <stdio.h> #include <string.h> ; struct Has ...
- 分享关于学习new BufferedWriter()方法时常遇到的一个无厘头的问题
今天在学习IO的过程中,关于处理流BufferedWriter的使用时,遇到了一个很犯二但是又会让初学者经常没有避免的问题,百度后才发现有人和我一样二,这还是对java基础掌握得不牢固的原因啊. 首先 ...
- Ubuntu修改语言环境为英文
转自把语言环境变量改为英文 将Ubuntu系统语言环境改为英文的en_US.UTF-8 查看当前系统语言环境 locale 编辑配置文件,将zh_US.UTF-8改为en_US.UTF-8,zh改为e ...
- 两种方法,获取磁盘剩余空间--PYTHON
import ctypes import os import platform import sys def get_free_space_mb(folder): """ ...
- 【HDU 5233】Tree chain problem (树形DP+树剖+线段树|树状数组)最大权不相交树链集
[题目] Tree chain problem Problem Description Coco has a tree, whose vertices are conveniently labeled ...
- Android 自定义组件随着手指自动画圆
首先自定义一个View子类: package com.example.androidtest0.myView; import android.content.Context; import andro ...
- ruby迭代器iterator和枚举器Enumerator
编写自定义的迭代器 The defining feature of an iterator method is that it invokes a block of code associatedwi ...