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),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上, ...
随机推荐
- Entity Framework Code First关系映射约定
本篇随笔目录: 1.外键列名默认约定 2.一对多关系 3.一对一关系 4.多对多关系 5.一对多自反关系 6.多对多自反关系 在关系数据库中,不同表之间往往不是全部都单独存在,而是相互存在关联的.两个 ...
- 深入理解DOM事件机制系列第一篇——事件流
× 目录 [1]历史 [2]事件冒泡 [3]事件捕获[4]事件流 前面的话 javascript操作CSS称为脚本化CSS,而javascript与HTML的交互是通过事件实现的.事件就是文档或浏览器 ...
- Markdown编辑器入门
欢迎使用博客园的Markdown编辑器 前言 今天早上起来在Ubuntu下操作,所以不能使用Windows Live Writer.所以就直接使用博客园的后台编辑器,开始以为博客园出错了,怎么编辑都没 ...
- MySQL学习笔记六：基本DML操作
1.查询语句,语法如下: SELECT [ALL | DISTINCT | DISTINCTROW ] [HIGH_PRIORITY] [STRAIGHT_JOIN] [SQL_SMALL_RESUL ...
- 如何利用脚本实现MySQL的快速部署以及一机多实例的部署
MySQL有三个版本:二进制,源码包,RPM. 下面讲讲二进制包的安装过程 下载地址: http://dev.mysql.com/downloads/mysql/ 选择Linux-Generic 我这 ...
- 【记录】ASP.NET MVC AuthorizeAttribute OnAuthorization 验证跳转
重写 AuthorizeAttribute 的 OnAuthorization 方法: using System.Web.Mvc; namespace Demo.Web.Common { public ...
- 改写yii2的listview功能
在vendor\yiisoft\yii2\widgets路径下新增文件ListViewtest,将下列代码粘贴并保存 <?php namespace yii\widgets; use Yii;u ...
- 1Z0-053 争议题目解析682
1Z0-053 争议题目解析682 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 682.Identify the scenarios in which the RMAN CROS ...
- 1Z0-053 争议题目解析686
1Z0-053 争议题目解析686 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 686.You execute the following FLASHBACK TABLE com ...
- Android 源码下载方法（Git 方式clone）
Android源码对于Android开发者来说,迟早有一天你会用到的,所以就记录一下,分享给读者,希望对读者有用 这里需要使用到Git相关知识,不清楚的可以先阅读,了解的可以跳过 Git-Tortoi ...