Javascript高级编程学习笔记(59)—— 事件(3)事件对象
事件对象
在触发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)事件对象的更多相关文章
- Javascript高级编程学习笔记(57)—— 事件(1)事件流
事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...
- Javascript高级编程学习笔记(64)—— 事件(8)键盘与文本事件
键盘与文本事件 用户在使用键盘时会触发键盘事件 “DOM2级事件”最初规定了键盘事件,但是最后在定稿时又删除了相应内容 所以键盘事件被放入了DOM3级事件的规范中 总的来说有三个键盘事件: keydo ...
- Javascript高级编程学习笔记(70)—— 事件(14)内存和性能
由于事件处理程序是现代的web程序交互能力的提供者 所以在日常实践中,我们免不了要向页面中添加大量的事件处理程序(不管是用于用户交互还是用于统计用户数据) 在创建GUI(图形用户界面)的语言(如C#) ...
- Javascript高级编程学习笔记(69)—— 事件(13)触摸与手势事件
触摸与手势事件 由于移动设备既没有鼠标也没有键盘,所以在为移动浏览器开发交互性网页时,常规的鼠标键盘事件根本不够用 所以早期的苹果为Safari 添加了一些与触摸相关的事件 随着后面Android的W ...
- Javascript高级编程学习笔记(67)—— 事件(11)HTML5事件
DOM规范没有涵盖所有浏览器支持的所有事件 而许多浏览器出于满足用户需求,或解决特殊问题的目的,实现了一些自定义事件 HTML5列出了浏览器应该支持的所有事件,这里只讨论得到浏览器完善支持的事件(并非 ...
- Javascript高级编程学习笔记(66)—— 事件(10)变动事件
变动事件 DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示 变动事件是为XML或HTML DOM 设计的,并不特定于某种语言 DOM2级定义了如下变动事件: DOMSubtreeModif ...
- Javascript高级编程学习笔记(63)—— 事件(7)鼠标及滚轮事件
鼠标与滚轮事件 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备 DOM3级事件中定义了9个鼠标事件: click:在用户单击主鼠标按钮(一般为鼠标左键)或者按下回车时触发,这一点对 ...
- Javascript高级编程学习笔记(62)—— 事件(6)焦点事件
焦点事件 焦点事件会在页面元素获得或者失去焦点时触发,利用焦点事件和 document.hasFocus() 方法配合使用 以及 document.activeElement 属性配合可以知晓用户在页 ...
- Javascript高级编程学习笔记(61)—— 事件(5)UI事件
UI事件 UI事件是指那些不一定与用户操作有关的事件 这些事件在DOM规范出现之前,都是以各种不同的形式存在于不同的浏览器 而在DOM事件中为了保证向后兼容,现有的UI事件如下: DOMActivat ...
- Javascript高级编程学习笔记(58)—— 事件(2)事件处理程序
事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...
随机推荐
- functools 之 partial(偏函数)
当函数的参数个数太多,需要简化时,使用functools.partial可以创建一个新的函数,这个新函数可以固定住原函数的部分参数,从而在调用时更简单.当然,decorator(装饰器) 也可以实现, ...
- django settings配置文件ALLOWED_HOSTS
ALLOWED_HOSTS列表为了防止黑客入侵,只允许列表中的ip地址访问 填写上“*”可以使所有的网址都能访问Django项目了,项目测试的时候,可以这么做.这样就失去了保护
- Oracle 数据库中对记录进行分页处理
学习到 oracle 的视图的时候,了解到对 Oracle 中数据的记录进行分页处理和 Mysql 提供的 limit 来进行分页处理大有不同,limit 是 mysql 中特有的关键字. 那么在 o ...
- windows平台MySQL密码设置与破解
一:制作系统服务: 1.在cmd下输入 mysql 这个相当于启动服务端了,然后该启动客户端了 .就表示安装成功. 2.再重新开启一个 cmd 窗口.kill 进程. 输入 mysql 即可进入 my ...
- Python_格式化字符
%% 百分号标记 #就是输出一个%%c 字符及其ASCII码%s 字符串 %r 是不管是什么打印出来%d 有符号整数(十进制)%u 无符号整数(十进制)%o 无符号整数(八进制)%x 无符号整数(十六 ...
- oracle 索引提升查询速度, in 和 exist 效率
做记录: 今天有一个有153万条数据的表,发现查询很慢: select count(y) as transfereeNum,x from t_ast_subject_invest_order GROU ...
- Itreatot接口实现类中modCount的作用
modCount只有在本数据结构对应迭代器中才使用,以HashMap为例: private abstract class HashIterator implements Iterator { Entr ...
- JavaBean动作元素
用动作标签创建Javabeans实例 <jsp:useBean id="实例对象名" class="com.po.Users(类全名)" scope=&q ...
- 用python turtle实现汉诺塔的移动
1.汉诺塔 汉诺塔(又称河内塔)问题是源于印度一个古老传说的益智玩具.大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘.大梵天命令婆罗门把圆盘从下面开始按大小 ...
- idea取消vim模式
在安装idea时选择了vim编辑模式,但是用习惯了eclipse,总是要拷贝粘贴,在idea中一直按ctrl+c和ctrl+v不起总用.于是想把vim模式关闭掉.方法:菜单栏:tools->vi ...