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 ...
随机推荐
- centos设置ssh免密码登陆
准备工作: 1.确认本机sshd的配置文件(需要root权限) $ gedit /etc/ssh/sshd_config 找到以下内容,并去掉注释符”#“ RSAAuthentication y ...
- 《JavaScript设计模式》笔记之第一、二章：富有表现力的JavaScript 和 接口
第一章 创建一个类 方法一: var Anim = function() { ... }; Anim.prototype.start = functi ...
- FusionCharts 3.2.1 常用用法
一.XML格式 1.实例化一个FusionCharts 对象 var member_fund_count_pie = new FusionCharts("FusionCharts3.2.1/ ...
- Servlet The Request
The Request HTTP Protocol Parameters 所有的HTTP Protocol Parameters都会放在一个Map中, 可以通过getParameterMap得到. 对 ...
- 最常见的 5 个导致节点重新启动、驱逐或 CRS 意外重启的问题 (文档 ID 1524455.1)
适用于: Oracle Database - Enterprise Edition - 版本 10.1.0.2 到 11.2.0.3 [发行版 10.1 到 11.2]本文档所含信息适用于所有平台 用 ...
- html输入框去除记忆功能
自动完成功能,只需把AUTOCOMPLETE设为off即可,如: 整个表单禁止自动完成 HTML code <FORM method=post action="submit.asp&q ...
- BestCoder Round#15 1002-Instruction
http://acm.hdu.edu.cn/showproblem.php?pid=5083 官方题解——> 1002 Instruction 先考虑编码,首先找到operation对应的编码, ...
- Repbase library|divergence rate|self-sequence alignment|genomic rearrangement|cutoffs|breakpoint
(Panda, dog and human repeat comparison):与其他动物比较重复序列 我们使用Repbase 库(重复序列库)+已知的转录原件序列+识别软件,评估出转录原件占比,并 ...
- Flask——基础知识
Flask应用程序 一个简单的Flask应用程序 # 导入flask程序 from flask import Flask # 初始化flask对象 app = Flask(__name__) # 装饰 ...
- HDU - 4802 - GPA （水题）
题意: 计算GPA,输入一个数字和一个字符串,用 数字×字符串对应的数值 思路: 用map对应数值,要注意的是字符串为P或者N的时候,不计入结果 代码: #include<iostream> ...