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 ...
随机推荐
- Spark Mllib里如何将trainDara训练数据的分类特征字段转换为数值字段（图文详解）
不多说,直接上干货! 字段3 是分类特征字段,但是呢,在分类算法里不能直接用.所以,必须要转换为数值字段才能够被分类算法使用. 具体,见 Hadoop+Spark大数据巨量分析与机器学习整合开发实战的 ...
- Nginx upstream负载均衡配置
1.在http节点下添加 upstream test { server 127.0.0.1:16010; server 127.0.0.1:16011; } 2.把server 节点下 ...
- ASP.Net MVC 控制@Html.DisplayFor日期显示格式
在做一個舊表的查詢頁時,遇到一個問題: 字段在db里存儲的是DATETIME,但保存的值只有日期,沒有時間數據,比如2018/2/26 0:00:00,顯示出來比較難看, 當然也可以做一個ViewMo ...
- django创建超级用户
终端输入 python3 manage.py createsuperuser 按照提示进行操作即可 不输入用户名会给你默认一个用户名,输入密码是在原处不动的,其实已经在输入了. 创建超级用户是为了能够 ...
- 涉及到弹出层的opacity样式问题
最近遇到一个弹出层在Chrome中重复的问题,观察发现是opacity引起的以下是代码及现象<!DOCTYPE html><html> <head> ...
- 从Assets读取文件 用scanner扫描inputstream
代码如下: 对InputStream的处理,从assets获取数据 InputStream in; try { in = getAssets().open("Android05.txt&qu ...
- SP2-0734: 未知的命令开头 "imp scott/..." - 忽略了剩余的行。
Oracle数据导入报错:SP2-0734: 未知的命令开头 "imp scott/..." - 忽略了剩余的行. 原因:进入sqlplus里是不能执行imp的(sqlplus不认 ...
- LR常用函数汇总
lr_start_transaction为性能分析标记事务的开始 lr_end_transaction为性能分析标记事务的结束 lr_rendezvous在 Vuser 脚本中设置集合点 lr_thi ...
- UWP中获取Encoding.Default
Encoding.GetEncoding(0); 即可
- XDU——受教了
存在的问题还是很多的 GG 突然觉得刷题的目的并不是追求A.我们应该在那个过程中提高代码能力和建立模型解题能力 会的算法会巧妙应用才是王道 吐槽自己两句,写高数了