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> ...
随机推荐
- 第三章_JSP
3.1.JSP概述 Jsp页面实在jsp容器中执行的.Servlet容器一般也是JSP容器.比如,Tomcat就是一个Servlet/JSP容器. 第一次请求一个jsp页面时,Servlet/JSP容 ...
- Dapper的使用
轻量型ORM框架Dapper的使用 /// <summary> /// 查询操作 /// </summary> /// <typeparam name="T&q ...
- Android获取本机IP地址
一.概述 习惯了Linux下的网络编程,在还没用智能机之前就一直想知道怎么得到手机的IP地址(玩智能机之前我是不搞手机应用的).好了,得知Android是基于Linux内核的,那么不就可以利用之前学的 ...
- linux命令之删除
linux删除文件夹非常easy,非常多人还是习惯用rmdir,只是一旦文件夹非空,就陷入深深的苦恼之中,如今使用rm -rf命令就可以. 直接rm就能够了,只是要加两个參数-rf 即:rm -r ...
- js 模块化的规范
The Module Pattern,模块模式,也译为模组模式,是一种通用的对代码进行模块化组织与定义的方式.这里所说的模块(Modules),是指实现某特定功能的一组方法和代码.许多现 ...
- Git--Submodule使用
项目模板中通常由前端保持,所以每次更新模板.我也要跟着变化项目. 随着时间的推移,这不是一个方法来找到,老这么维护.大型项目,更多的模板,真的很容易管理和维护. 然后头让我用submodule前端资源 ...
- WPF学习（5）依赖属性
今天我们来学习WPF一个比较重要的概念:依赖属性.这里推荐大家看看周永恒大哥的文章,讲的确实很不错.我理解的没那么深入,只能发表一下自己的浅见.提到依赖属性,不得不说我们经常使用的传统的.net属性, ...
- zTree实现访问到第一节点在相同水平当前所选节点数目
zTree实现访问到第一节点在相同水平当前所选节点数目 1.实现源代码 <!DOCTYPE html> <html> <head> <title>zTr ...
- [.Net Tools] 超強大的封裝工具 Advanced Installer
原文:[.Net Tools] 超强大的封装工具Advanced Installer 日前在网路上晃到这家公司的产品http://www.advancedinstaller.com/,就直接下载并且安 ...
- Objective-C基调（4）Category
OC它提供了一种不同的方式--Category,可以动态地添加新的行为已经存在的类(方法),这确保了较小的类的原始设计,然后逐渐加入扩展. 正在使用Category扩张的上课时间,你并不需要创建一个子 ...