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> ...
随机推荐
- POJ3467(预处理)
Cross Counting Time Limit: 1000MS Memory Limit: 131072K Total Submissions: 1331 Accepted: 375 De ...
- 默认情况下安装的应用程序C盘后提示权限不足,当你开始介意。。。
最近,不少用户抱怨的经销商.正在使用win 7我们的计算机系统上安装软件后,提示权限不够开放系统,无法启动软件. 在xp该系统是没有问题的.原因是,我们会选择在默认安装路径系统C-disk.和win ...
- mysql数据文件迁移到新的硬盘分区的方法
该系统增加了一个硬盘.要创建新的分区/data文件夹,mysql对于数据文件夹/var/lib/mysql 1. 停止mysql维修 [root@localhost~]# service mysql ...
- 如何获得 oracle RAC 11g asm spfile S档
方法一: [root@vmrac1 ~]# su - grid [grid@vmrac1 ~]$ sqlplus / as sysasm SQL*Plus: Release 11.2.0.3.0 ...
- crm创建报告补充导航
报告导航实现动态交互体验报告. 通过使用各种类型的操作的,报告允许用户导航到特定的报告.Microsoft Dynamics CRM 记录或其它网站 动态钻取到 Microsoft Dynamics ...
- Android开源项目分享
Android PDF 阅读器 http://sourceforge.net/projects/andpdf/files/ 个人记账工具 OnMyMeans http://sourceforge.ne ...
- SharePoint 2013 配置启用搜索服务
原文:SharePoint 2013 配置启用搜索服务 1.安装完毕SharePoint 2013,新建网站集,点击搜索,出现如下错误(因为没配置,别激动). 2.尝试启动服务器场中的服务之Share ...
- 一键安装 gitlab7 on rhel6.4 并设置邮件发送
一键安装 gitlab7 on rhel6.4 并设置邮件发送 世间本无事,庸人自扰之.书归正传,简短节说:gitlab是个好东西,可是安装手冊奇烂.尽管以前对比文档一步一步安装起来gitlab 6. ...
- Saiku一个简短的引论
一个简短的引论 Saiku成立于2008年,通过Tom Barber和Paul Stoellberger研究. 最初叫Pentaho分析工具.最初是基于OLAP4J图书馆的使用GWT采用前端分析工具包 ...
- HDU - 5008 Boring String Problem (后缀数组+二分法+RMQ)
Problem Description In this problem, you are given a string s and q queries. For each query, you sho ...