js-dom-EventUtil
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="format-detection" content="telphone=no, email=no"/>
<meta name="apple-touch-fullscreen" content="yes"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<title></title>
<style type="text/css">
.button {
height: 2em;
border: 0;
border-radius: .2em;
background-color: #34538b;
color: #fff;
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body>
<input type="button" id="button" class="button" value="点击我，显示高度"/>
<a href="javascript:void (0);" id="link-a">标度</a>
</body>
<script type="text/javascript">
//p361--高级程序3
var myBtn=document.getElementById("button");
myBtn.onclick=function(event){
var event = EventUtil.getEvent(event);
console.log("点击成功");
};
var myLink=document.getElementById("link-a");
//用于取消事件的默认行为
myLink.onclick=function(event){
var event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
console.log(target); //输出：<a href="javascript:void (0);" id="link-a">标度</a>
};
//用于取消事件的默认行为
/* myLink.onclick=function(event){
var event=EventUtil.getEvent(event);
var target=EventUtil.preventDefault(event);
};*/ var EventUtil = {
/**
* <br>给元素对象注册事件处理程序<br>
* @param ele 要绑定的元素对象
* @param type 事件名称,例如click、load等
* @param handler 事件处理程序函数
*/
registerEvent : function(ele, type, handler){
// 支持IE9、Firefox、Safari、Chrome、Opera
if (ele.addEventListener) {
ele.addEventListener(type, handler, false);
}
// 支持IE浏览器
else if(ele.attachEvent) {
ele.attachEvent("on" + type, handler);
}
// 通过属性名的方式为元素指定事件处理程序
else {
ele["on" + type] = handler;
}
},
//删除事件处理程序
removeEvent : function() {
if (ele.removeEventListener) {
ele.removeEventListener(type, handler, false);
} else if(ele.detachEvent) {
ele.detachEvent("on" + type, handler);
} else {
ele["on" + type] = null;
}
},
// 获取(DOM/IE中的)事件对象
getEvent : function(event) {
return event ? event : window.event;
},
// 返回事件的目标
getTarget : function(event) {
return event.target || event.srcElement;
},
// 取消事件冒泡
stopPropagation : function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
// 获取当前事件发生的对象
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
} }
</script>
</html>
js-dom-EventUtil的更多相关文章
- 货架工程项目之js dom实现项目工程进度图
笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示 由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...
- js DOM优化相关探索
我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...
- js DOM的几个常用方法
<div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...
- JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
- Js DOM 详解
DOM事件类 基本概念 DOM事件的级别 1.DOM0 element.onclick = function(){} 2.DOM2 element.addEventListener("cli ...
- JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解 方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
- css3动画和JS+DOM动画和JS+canvas动画比较
css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...
- JS(DOM 和 BOM)
JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定 ...
- JS DOM（文档对象模型）与BOM（浏览器对象模型）
在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTM ...
随机推荐
- 安卓新的联网方式 Volley的使用（一）加载图片与 json
最近刚接触安卓, 以前搞wp ,一对比起来 ,安卓怎么这么麻烦.联网必须要重新开一个线程才可以.而且加载网络图片也很麻烦...花了很久一直卡在快速滑动加载网络图片的listview上面 ,一直很纠结痛 ...
- HashMap之put方法流程解读
说明:本文中所谈论的HashMap基于JDK 1.8版本源码进行分析和说明. HashMap的put方法算是HashMap中比较核心的功能了,复杂程度高但是算法巧妙,同时在上一版本的基础之上优化了存储 ...
- maven创建springMVC项目（一）
1.Eclipse配置 添加maven集成安装包:路径是maven下载安装的解压位置,如果不知道如何下载安装请点击这里看我的另一篇安装文章,这里不多说 这里需要注意的是: a.settings.xml ...
- 《Head First HTML与CSS》项目实践中学到的东西
1.组织的重要性. 首先是要建立两个根文件夹,一个存上线页面的资源,一个存测试页面的资源.所有改动内容都在测试页面的文件夹中进行,在这个文件夹中进行测试.W3C语法检测后(HTML检测网站:https ...
- [windows]桌面中添加我的电脑，我的文档和网上邻居图标
xp系统: 操作步骤:桌面任意位置--〉右键--〉属性--〉桌面选项卡--〉自定义桌面--〉常规:勾选相关图标确定即可. win7系统: 操作步骤:桌面任意位置--〉右键--〉个性化--〉(右侧)更改 ...
- jsp中<c:forEach varStatus="status">的属性值问题
c:forEach varStatus属性 current当前这次迭代的(集合中的)项 index当前这次迭代从 0 开始的迭代索引 count当前这次迭代从 1 开始的迭代计数 first用来表明当 ...
- JS 字符串 时间 数字函数操作 事件
字符串 操作 var s="abcdefg" s.tolowerCase() 转小写 s.toupperCase() 转大写 s.substring(2,5) 索引下 ...
- HDU 6041 I Curse Myself(点双联通加集合合并求前K大） 2017多校第一场
题意: 给出一个仙人掌图,然后求他的前K小生成树. 思路: 先给出官方题解 由于图是一个仙人掌,所以显然对于图上的每一个环都需要从环上取出一条边删掉.所以问题就变为有 M 个集合,每个集合里面都有一堆 ...
- 数据库_6_SQL基本操作——库操作
SQL基本操作——库操作:对数据库的增删改查 一.新增数据库(创建) 基本语法:create database 数据库名字 [库选项]: 库选项用来约束数据库,分为两个选项:1.字符集设定:chars ...
- java后台验证码的生成
前台代码: <tr> <td>验证码</td> <td><input name="checkCode" type=" ...