DOM中的事件对象
三、事件对象
事件对象event
1、DOM中的事件对象
(1)、type:获取事件类型
(2)、target：事件目标
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的默认行为
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 300px;
height: 100px;
border: 2px solid red;
}
</style>
</head> <body>
<div id="box">
<input type="button" value="按钮1" id="btn1" onclick="showMes()">
<input type="button" value="按钮2" id="btn2">
<input type="button" value="按钮3" id="btn3">
<a href="event.html" id="go">跳转</a>
</div>
<script>
//html事件处理程序
function showMes(event) {
alert(event.type);
event.stopPropagation();
} function showBox(event){
alert(event.target.nodeName);
} function stopGo(event){
event.preventDefault();
event.stopPropagation();
} //dom0级事件处理程序
var btn2 = document.getElementById("btn2");
var box = document.getElementById("box");
var go = document.getElementById("go");
btn2.onclick = function showmessage() {
alert("这是dom0级处理程序");
}
btn2.onclick = null; //删除onclick属性 // //dom2级事件处理程序
// var btn3 = document.getElementById("btn3");
// addEventListener("click", showMes, false); //事件名不能加on,false兼容各种浏览器，listener单词不要写错。
// addEventListener("click", function() {
// alert(btn3.value);
// }, false);
// addEventListener("click", function() {
// alert("这是dom2级处理程序");
// }, false);
// removeEventListener("click", showMes, false); //删除事件属性 // //dom0 和 dom2都可以添加多个事件属性，按照代码顺序执行 //能力检测 跨浏览器事件处理
var eventutill = {
//添加句柄
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;
}
}
}
eventutill.addHandler(btn3,"click",showMes);//click记得要加引号
eventutill.addHandler(box,"click",showBox);
eventutill.addHandler(go,"click",stopGo);
//eventutill.addHandler(btn3,“click”,showMes); </script>
</body> </html>
2、IE中的事件对象
(1)、type:获取事件类型
(2)、srcElement：事件目标
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默认行为
var eventutill = {
//添加句柄
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;//这个是三目运算符
//return event = event || window.event;
},
getType:function(event){
return event.type;
},//不存在兼容问题
getElement:function(event){
return 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;
}
}
}
编程练习：
DOM中的事件对象的更多相关文章
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- DOM中的事件对象和IE事件对象
DOM中的事件对象 IE事件对象 属性/方法 类型 读/写 说明 属性/方法 类型 读/写 说明 bubles Boolean 只读 表明事件是否冒泡 cancleBubble Boolean ...
- DOM中的事件对象（event）
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件相关的信息. 包括导致事件的元素.事件的类型以及其他与特定事件相关的信息. 例如:鼠标操作导致的事件对象中,会包含鼠 ...
- DOM和IE中的 事件对象
DOM中的事件对象:(符合W3C标准) preventDefault() 取消事件默认行为 stopImmediatePropagation() 取消事件冒泡同时阻止当前节点 ...
- JavaScript中的事件对象
JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...
- IE中的事件对象
IE中的事件对象 1)type属性 用于获取事件类型 2)srcElement属性 用于获取事件的目标 3)cancelBubble属性 用于阻止事件冒泡 设置为true表示阻止事件冒泡 设置为fa ...
- Javascript中的事件对象和事件类型
接上次看JS的事件冒泡和捕获,所以顺带就把事件相关的知识都看完好了 而且想到一个好的学习方法,第一天自己看,第二天把前一天学习的东西写下来,一方面可以当复习,一方面当重新整理并且分享 事件对象 事件处 ...
- js中获取事件对象的方法小结
原文地址:http://jingyan.baidu.com/article/d8072ac4594d6cec95cefdac.html 事件对象 的获取很简单,很久前我们就知道IE中事件对象是作为全局 ...
- 理解DOM中的事件流
浏览器发展到第四代时(IE4和Netscape Communicator 4),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上, ...
随机推荐
- .Net 转战 Android 4.4 日常笔记（5）--新软件Android Studio 0.5.8安装与配置及问题解决
说真心话,Eclipse跟我们.net的VS比起来就是屌丝比高富帅,一切都是那么的难用,速度慢得我无法忍受 于是想试试Google钦点的Android Studio IDE工具,这跟ADT一样也是一套 ...
- 搭建AngualarJS开发环境
1.选择Web浏览器 Chrome和Firefox浏览器 2.选择代码编辑器 Subline Text和Visual Studio Code 3.安装Web服务器 3.1Apache HTTP Ser ...
- Notes:indexedDB使用
indexedDB是浏览器端保存结构化数据的一种数据库,类似于mysql,oracle等数据库,但indexedDB使用对象存储数据,而不是用表. indexedDB是全局的宿主对象,使用window ...
- MySQL学习笔记九：存储过程，存储函数，触发器
存储过程 1.存储过程由一组特定功能的SQL语句组成,对于大型应用程序优势较大,相对不使用存储过程,具有以下优点: a.性能提高,因为存储过程是预编译的,只需编译一次,以后调用就不须再编译 b.重用性 ...
- Shell脚本一枚
脚本如下: #!/bin/bash dir=$1 dir1="" for file in `find $dir -type f` do dir2=${file%/*} name=$ ...
- Oracle层次查询
Oracle层次查询的语法如下: 下面根据两道“烧脑”的题具体来体现: 1. 根据时间先后顺序,十二星座的英文名称用逗号串起来为'Aries,Taurus,Gemini,Cancer,Leo,Virg ...
- iOS-掌握了时间就掌握了一切!
Demo下载地址 一. NSDate相关知识 1.获取当前时间 [NSDate date]; 注意: 获取的当前时间是世界时间:比我们用的时间慢8个小时. 2.世界时间转化为本地时间 - (void) ...
- HTML5 Application cache初探和企业应用启示
Application Cache 在自己做的开源项目( https://github.com/etoah/Lucien ) 用到了HTML5 的Application Cache,现总结如下: 目录 ...
- 自己实现简单的AOP（三） 实现增强四项基本功能
前面的两篇随笔,都是只是个铺垫,真正实现增强四项基本功能的重头戏,在本篇随笔中, 本文将通过AOP实现如下的四个基本功能: /// <para>1.自动管理数据库连接[可选]</pa ...
- Winform混合式开发框架访问Web API接口的处理
在我的混合式开发框架里面,集成了WebAPI的访问,这种访问方式不仅可以实现简便的数据交换,而且可以在多种平台上进行接入,如Winform程序.Web网站.移动端APP等多种接入方式,Web API的 ...