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),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上, ...
随机推荐
- Android开发输入法遮盖屏幕底部按钮
方法一: 在你的activity中的oncreate中setContentView之前写上这个代码: getWindow().setSoftInputMode(WindowManager.Layout ...
- r.js结合gulp等于webpack（angular为例）
本人大学时玩dojo,开始了AMD模块化的不归路,工作后一直使用requirejs,感觉非常好.但是,近来随着react的火热,webpack成为了天下无敌的模块化工具,能做模块化,合并压缩,监视等, ...
- 小菜学习Winform（一）贪吃蛇
前言 说到贪吃蛇,大家可能小时候都玩过,小菜最近在整理Winfrom的学习系列,那我觉得有兴趣才会有学习,就从这个小游戏讲起吧. 实现 其实我刚开始学习编程的时候,感觉写个贪吃蛇的程序会很难,因为涉及 ...
- swift中Range的使用书名
在swift中Range有两种用法 1.把字符串转换成NSString来使用 //这里是把swift的字符换转换成了nsstring 使用 let str :NSString = text.strin ...
- 【解决】查询无法完成，因为其包含的查找列数已超过管理员强制实施的查找列阈值。Error code=0x80070093; Error source=Groove
前因: 修改了SharePoint Server 2013 下面的文档库的名称,原先2个汉字,现在8个汉字.结果,SkyDrive Pro 就无法同步了,无论是停止重新同步还是手动填写进行同步都不可以 ...
- 记录一则RMAN备份策略修正案例
背景:在给某客户处理问题时,发现客户数据库的备份空间即将用尽,进一步查看发现是用户数据库的当前RMAN备份策略存在潜在问题,需要修改备份策略. 环境:SunOS 5.10 + Oracle 11.2. ...
- DotNet隐藏敏感信息操作方法
在项目中,有时候一些信息不便完全显示,只需要显示部分信息.现在提供一些隐藏敏感信息的操作方法,主要为对信息的截取操作: 1.指定左右字符数量,中间的*的个数和实际长度有关: /// <summa ...
- jQuery-1.9.1源码分析系列（一）整体架构续
这一节主要是jQuery中最基础的几个东东 2. jQuery的几个基础属性和函数 a. jQuery.noConflict函数详解 在jQuery初始化的时候保存了外部的$和jQuery _j ...
- MFC&Halcon之图片显示
上一篇介绍了MFC调用Halcon功能的简单例子,在这个例子中,点击按钮会弹出一个窗口显示图片,但是这样显示并不美观,而且...于是我决定把显示窗口做在MFC的窗体内部. 具体的方案是:使用一个Pic ...
- Objective-C快速上手
最近在开发iOS程序,这篇博文的内容是刚学习Objective-C时做的笔记,力图达到用最短的时间了解OC并使用OC.Objective-C是OS X 和 iOS平台上面的主要编程语言,它是C语言的超 ...