事件对象:在触发DOM上的事件时dou都会产生一个对象,事件对象event

DOM中的事件对象

1)type属性 用于获取事件类型

2)target属性 用于获取事件目标

3)stopPropagation()方法 用于阻止事件冒泡

4)preventDefault()阻止默认行为

bubbles,canselable属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title> <script type="text/javascript">
//dom中的事件对象:
//type属性获取事件类型
//target获取事件目标
//stopPropagation阻止事件冒泡(最具体的元素接收)
//preventDefault()阻止事件的默认行为 window.onload=function(){
var btn2=document.getElementById('btn2');
btn2.onclick=function(){
alert('这个是dom0级添加的事件')
}
// btn2.onclick=null;
// var btn3=document.getElementById('btn3');
/* btn3.addEventListener('click',showMessage,false);
btn3.addEventListener('click',function(){
alert(this.value)
},false);*/
// btn3.removeEventListener('click',showMessage,false);
// btn3.attachEvent('onclick',showMessage) }
function showMessage(ev){
alert(ev.target.nodeName);//目标节点名称//target获取事件目标//type获取事件类型
ev.stopPropagation();//阻止事件冒泡(最具体的元素接收)
}
function showBox(){
alert("这是一个box")
}
var eventUtil={
//添加句柄
// var element,type,handler;
addHandler:function(element,type,handler){
if(element.addEventListener){//dom二级
element.addEventListener(type,handler,false)
}else if(element.attachEvent){//IE
element.attachEvent('on'+type,handler);
}else{//dom0级
element['on'+type]=handler;//element.onclick===element['onclick']
}
},//对象的属性用“,”分隔 //删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){//dom二级
element.removeEventListener(type,handler,false)
}else if(element.detachEvent){//IE
element.detachEvent('on'+type,handler);
}else{//dom0级
element['on'+type]=null;//element.onclick===element['onclick']
}
}
} </script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="showMessage()"/>
<input type="button" value="按钮2" id="btn2"/>
<input type="button" value="按钮3" id="btn3"/>
<a href=""></a>
</div>
<script>
var btn3=document.getElementById('btn3');
var box=document.getElementById('box');
eventUtil.addHandler(btn3,'click',showMessage);
eventUtil.addHandler(box,'click',showBox);
// eventUtil.removeHandler(btn3,'click',showMessage);
</script>
</body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title> <script type="text/javascript">
//dom中的事件对象:
//type属性获取事件类型
//target获取事件目标
//stopPropagation阻止事件冒泡(最具体的元素接收)
//preventDefault()阻止事件的默认行为 window.onload=function(){
var btn2=document.getElementById('btn2');
btn2.onclick=function(){
alert('这个是dom0级添加的事件')
}
// btn2.onclick=null;
// var btn3=document.getElementById('btn3');
/* btn3.addEventListener('click',showMessage,false);
btn3.addEventListener('click',function(){
alert(this.value)
},false);*/
// btn3.removeEventListener('click',showMessage,false);
// btn3.attachEvent('onclick',showMessage) }
function showMessage(ev){
alert(ev.target.nodeName);//目标节点名称//target获取事件目标//type获取事件类型
ev.stopPropagation();//阻止事件冒泡(最具体的元素接收)
}
function showBox(){
alert("这是一个box")
}
function stopGoto(event){
event.stopPropagation();
event.preventDefault();
}
var eventUtil={
//添加句柄
// var element,type,handler;
addHandler:function(element,type,handler){
if(element.addEventListener){//dom二级
element.addEventListener(type,handler,false)
}else if(element.attachEvent){//IE
element.attachEvent('on'+type,handler);
}else{//dom0级
element['on'+type]=handler;//element.onclick===element['onclick']
}
},//对象的属性用“,”分隔 //删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){//dom二级
element.removeEventListener(type,handler,false)
}else if(element.detachEvent){//IE
element.detachEvent('on'+type,handler);
}else{//dom0级
element['on'+type]=null;//element.onclick===element['onclick']
}
}
} </script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="showMessage()"/>
<input type="button" value="按钮2" id="btn2"/>
<input type="button" value="按钮3" id="btn3"/>
<a href="evnt.html" id="go">跳转</a>
</div>
<script>
var btn3=document.getElementById('btn3');
var box=document.getElementById('box');
eventUtil.addHandler(btn3,'click',showMessage);
eventUtil.addHandler(box,'click',showBox);
eventUtil.addHandler(go,'click',stopGoto);
// eventUtil.removeHandler(btn3,'click',showMessage);
</script>
</body> </html>
</html>

dom02的更多相关文章

  1. 005 DOM02

    在上一篇DOM的基础上,继续案例的实践. 一:案例 1.禁用文本框 <!DOCTYPE html> <html lang="en"> <head> ...

  2. JS基础语法之DOM02(事件)

    1.常用事件 1.onclick 单击 应用场景:为按钮绑定 2.ondbclick 双击 3.onfocus   获得焦点 4.onblur 失去焦点 应用场景:用于表单验证,用户离开某个输入框时, ...

  3. js 大厦之JavaScript事件

    1.js事件简介 事件(Event) 是 JavaScript 应用跳动的心脏 ,进行交互,使网页动起来.也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了 ...

  4. eCharts_基于eCharts开发的一个多图表页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. SDL2来源分析7:演出(SDL_RenderPresent())

    ===================================================== SDL源代码分析系列文章上市: SDL2源码分析1:初始化(SDL_Init()) SDL2 ...

  2. Java 理论与实践: 正确使用 Volatile 变量(转)

    Java 语言中的 volatile 变量可以被看作是一种 “程度较轻的 synchronized”:与 synchronized 块相比,volatile 变量所需的编码较少,并且运行时开销也较少, ...

  3. 7.oracle学习门户系列七---网络管理和配置

    oracle学习门户系列七 网络管理和配置 们学习了模式和用户.包含模式定义以及模式的作用. 这篇我么来看下ORACLE数据库中的网络管理和配置.只是这篇好像和上篇没有继承啊.这怎么看? Ok,事实上 ...

  4. 如何设置eclipse在默认模式下打开文件

    如何设置eclipse在默认模式下打开文件 打开eclipse.选择例如以下:windows --> preferences --> General --> Editors --&g ...

  5. Atitit..文件上传组件选择and最佳实践的总结(2)----HTTP

    Atitit..文件上传组件选型and最佳实践总结(2)----断点续传 1. 断点续传的原理 1 2. 怎样推断一个插件/控件是否支持断点续传?? 1 3. 经常使用的组件选型结果::马 1 4.  ...

  6. Atitit。团队建设--管理最佳实践--如何留住关键人才,防止人才外流 ??

    Atitit.团队建设--管理最佳实践--怎样留住核心人才,防止人才流失 ?? 1. 1.人才流失后果 1 1. 1.员工的离职带走商业技术秘密和客户等资源 1 2. 2.影响在职员工的情绪.极大挫伤 ...

  7. NSIS:禁止选择安装路径和编辑安装目录

    原文 NSIS:禁止选择安装路径和编辑安装目录 如果你想在安装包中禁止用户选择安装路径和编辑安装目录,有两种方式.   第一种:注释或删除安装目录选择页面 1 ;!insertmacro MUI_PA ...

  8. MVC中使用SignalR

    MVC中使用SignalR打造酷炫实用的即时通讯功能附源码   前言,现在这世道写篇帖子没个前言真不好意思发出来.本贴的主要内容来自于本人在之前项目中所开发的一个小功能,用于OA中的即时通讯.由于当时 ...

  9. openWRT自学---自己编译的第一个 backfire10.03 版本的过程记录(转)

    基于 backfire10.03(从http://downloads.openwrt.org/backfire/10.03/ 中下砸的源码包backfire_10.03_source.tar.bz2: ...

  10. android_线

    说明:android螺纹. android无非就是一个线程Main Thread和Worker Thread.(除了主线程Main Thread是Worker Thread) Main Thread ...