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> ...
随机推荐
- T-SQL问题解决集锦——数据加解密（2）
原文:T-SQL问题解决集锦--数据加解密(2) 问题三.如何让指定用户可以对数据表进行Truncate操作? Truncate在对大表全删除操作时,会明显比Delete语句更快更有效,但是因为它不需 ...
- secureCRT使用退格键（backspace）出现^H解决的方法
刚新装了python-3.4.1,使用secureCRT连接上去,可是我在进入后,输入回格键时,屏幕显示的是^H,这个让人受不了.最终在网上找到了解决的方法,仅仅要改动一下secureCRT的配置就可 ...
- “jquery于each方法和选择”学习笔记
<head> <title></title> <script src="jquery-1.4.2.js" type="text/ ...
- HDU 4283 You are the one（间隔DP）
标题效果: The TV shows such as You Are the One has been very popular. In order to meet the need of boys ...
- 页面加速Chromium 预压 Prerendering
前者已经推出了一个博客prefetch预加载的网页资源,以提高网页加载速度,下面我们一起来看一下,以加速网页chromium prerendering.介绍prerendering之前.先介绍两个概念 ...
- 探测器 C++ Singleton（辛格尔顿）
一.静态模式不是单一的情况下, 刚开始学习的人可能误, 误以为所有的成员变量和成员方法用于 static , 就是单例模式了: class Singleton { public: /* sta ...
- Python开发一个csv比较功能相关知识点汇总及demo
Python 2.7 csv.reader(csvfile, dialect='excel', **fmtparams)的一个坑:csvfile被csv.reader生成的iterator,在遍历每二 ...
- LINUX2.4.x网络安全框架
在分析LINUX2.4.x网络安全的实现之前先简介一下它里面包括的几个重要概念:netfilter.iptables.match.target.nf_sockopt_ops.网络安全功能点的实现 ...
- c#有关udp可靠传输(包传输数据包) 升级
在c#有关udp可靠传输(包传输数据包)我们讨论,UDP包的发送,可是上一个程序有一个问题.就是数据比較大.一个Message类序列化后都有2048B,而实际的数据量也就只是 50B罢了,这就说明当中 ...
- 收藏的一些javascript片段
原文:收藏的一些javascript片段 学习js也很有一段时间,收集了一些js的片段.特地整理排版了一下,以一个js初学者的视界来分析注释了这些代码段,暂且不去讨论它的性能和优化问题,相信会对一些初 ...