dom02
事件对象：在触发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的更多相关文章
- 005 DOM02
在上一篇DOM的基础上,继续案例的实践. 一:案例 1.禁用文本框 <!DOCTYPE html> <html lang="en"> <head> ...
- JS基础语法之DOM02(事件）
1.常用事件 1.onclick 单击 应用场景:为按钮绑定 2.ondbclick 双击 3.onfocus 获得焦点 4.onblur 失去焦点 应用场景:用于表单验证,用户离开某个输入框时, ...
- js 大厦之JavaScript事件
1.js事件简介 事件(Event) 是 JavaScript 应用跳动的心脏 ,进行交互,使网页动起来.也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了 ...
- eCharts_基于eCharts开发的一个多图表页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- 【转】JAVA 网络编程
网络编程 网络编程对于很多的初学者来说,都是很向往的一种编程技能,但是很多的初学者却因为很长一段时间无法进入网络编程的大门而放弃了对于该部分技术的学习. 在 学习网络编程以前,很多初学者可能觉得网络编 ...
- solr/solrj原子更新
lucene原子更新自己不用多介绍,但solr它的包装,下面是一个简单的介绍是:这个操作是用于索引非常有用. 详细在代码中使用例如以下: /** * 原子更新方式 * */ public static ...
- linux添加到普通用户sudo才干
在超级用户模式添加到普通用户sudo才干 1. su -(进root用户) 2. chmod u+w /etc/sudoer 3. vim /etc/sudoers 于root ALL=(ALL) A ...
- 2014辽宁ACM省赛 Prime Factors
问题 L: Prime Factors 时间限制: 1 Sec 内存限制: 128 MB [提交][状态][论坛] 题目描写叙述 I'll give you a number , please te ...
- 如何使用Google APIs和Google应用系统集成(7)----在里面JSON兑换XML数据处理，JSON数据包括违规XML数据规范：XML节点名称不支持号码Java解
笔者电话Google Calendar APIs的GetColors方法,其中(有关详细信息Google Calendar API已经Google API看到我的博文介绍的其余部分,目前,我们只取Go ...
- FTP定时批量下载文件（SHELL脚本及使用方法 ） （转）--good
#/bin/bash URL="http://192.168.5.100/xxx.php" check() { RESULT=$(curl -s $URL) echo $RESUL ...
- 如何解决Ora-04031错误（转）
诊断并解决ORA-04031 错误 当我们在共享池中试图分配大片的连续内存失败的时候,Oracle首先清除池中当前没使用的所有对象,使空闲内存块合并.如果仍然没有足够大单个的大块内存满足请求,就会产生 ...
- 半平面交总结and模板
博客原文地址:http://blog.csdn.net/xuechelingxiao/article/details/40859973 这两天刷了POJ上几道半平面交,对半平面交有了初步的体会,感觉半 ...
- Java虚拟机参数设置（转）
今天在加载一幅图片时,eclipse报出如下错误: “Exception in thread "main" java.lang.OutOfMemoryError: Java hea ...
- Java JSON处理库Jackson
Jackson是一款为Java平台提供的一套数据处理类库工具,Jackson的主要功能是提供JSON解析和生成.另外,Jackson还提供额外的类库以支持处理Avro, CBOR, CSV, Smil ...