javascript——事件处理
<script type="text/javascript">
function EventUtil() {
var _self = this;
///添加事件
var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
el.addEventListener(type, fn, false);
}
} else {
return function (el, type, fn) {
el.attachEvent("on" + type, function () {
return fn.call(el, window.event);
});
}
}
})();
///添加属性改变事件
var addPropertyChangeEvent = function (obj, fn) {
if (window.ActiveXObject) {
obj.onpropertychange = fn;
} else {
obj.addEventListener("input", fn, false);
}
}
//移除事件
var removeEvent = function (obj, type, fn) {
if (obj.removeEventListener) {
obj.removeEventListener(type, fn, false);
} else if (obj.detachEvent) {
obj.detachEvent("on" + type, obj["on" + type + fn]);
obj["on" + type + fn] = null;
}
}
//加载事件
var loadEvent = function (fn) {
var oldonload = window.onload;
if (typeof oldonload != "function") {
window.onload = fn;
} else {
window.onload = function () {
oldonload();
fn();
}
}
}
//阻止事件
var stopEvent = function (e) {
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
e.stopPropagation();
} else {
e.returnValue = false;
e.cancelBubble = true;
}
}
//如果仅仅是阻止事件冒泡
var stopPropagation = function (e) {
e = e || window.event;
if (!+"\v1") {
e.cancelBubble = true;
} else {
e.stopPropagation();
}
}
//取得事件源对象
var getEvent1 = function (e) {
e = e || window.event;
var obj = e.srcElement ? e.srcElement : e.target;
return obj;
}
//取得事件源对象
var getEvent2 = function (e) {
if (window.event) return window.event;
var c = getEvent2.caller;
while (c.caller) {
c = c.caller;
}
return c.arguments[0];
}
//或者这个功能更强大
var getEvent3 = function (e) {
var e = e || window.event;
if (!e) {
var c = this.getEvent3.caller;
while (c) {
e = c.arguments[0];
if (e && (Event == e.constructor || MouseEvent == e.constructor)) {
break;
}
c = c.caller;
}
}
var target = e.srcElement ? e.srcElement : e.target,
currentN = target.nodeName.toLowerCase(),
parentN = target.parentNode.nodeName.toLowerCase(),
grandN = target.parentNode.parentNode.nodeName.toLowerCase();
return [e, target, currentN, parentN, grandN];
}
_self.addEvent = addEvent;
_self.addPropertyChangeEvent = addPropertyChangeEvent;
_self.removeEvent = removeEvent;
_self.loadEvent = loadEvent;
_self.stopEvent = stopEvent;
_self.stopPropagation = stopPropagation;
_self.getEvent1 = getEvent1;
_self.getEvent2 = getEvent2;
_self.getEvent3 = getEvent3;
}
var eventUtil = new EventUtil();
eventUtil.loadEvent(function () {
eventUtil.addEvent(document, "click", function (e) {
alert(eventUtil.getEvent3(e));
});
eventUtil.addPropertyChangeEvent(document,function(e){
alert(eventUtil.getEvent3(e));
});
});
</script>
javascript——事件处理的更多相关文章
- javascript事件处理解析
一.什么是事件!(w3c解释) 事件是可以被 JavaScript 侦测到的行为. JavaScript 使我们有能力创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素 ...
- Javascript事件处理进阶
这篇文章是我在看乌龟书<编写可维护的Javascript>发现的一篇写的非常好的章节,在这里我并不会教大家什么是绑定事件等比较基础的事.有兴趣了解DOM事件的同学们,可以去w3cschoo ...
- JavaScript事件处理的三种方式(转)
一.什么是JavaScript事件? 事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了. 事件可能是用 ...
- 使用AmplifyJS和JQuery编写更好更优雅的javascript事件处理代码
事件(或消息)是一种经常使用的软件设计模式.可以减少消息处理者和消息公布者的之间的耦合,比方J2EE里面的JMS规范.设计模式中的观察者模式(也叫公布/订阅模式).这对于javascript代码相同适 ...
- 私人定制javascript事件处理机制(浅谈)
看到园子里关于事件监听发表的文章,我都有点不好意思写了.不过想想我的题目以私人定制作开头也就妥妥地写吧. 事件相关概念 1.事件类型 发生事件的字符串 有传统事件类型 比如表单.window事件等 D ...
- javascript——事件处理模型(DOM 和 IE)
javascript的事件处理模型分为 DOM事件处理模型和 IE事件处理模型. 一.DOM事件流模型 DOM事件流分为三个阶段:捕获阶段.目标阶段.冒泡阶段. 捕获阶段:自上而下,由document ...
- 【WIP】客户端JavaScript 事件处理
创建: 2017/10/15 完成: 2017/10/15 更新: 2017/11/04 加粗事件的参数 更新: 2017/12/12 增加事件处理时获取事件对象的方法 更新: 2019/05/2 ...
- JavaScript事件处理
客户端javascript程序采用了异步事件驱动程序,在这种程序设计风格下,当文档,浏览器,元素,或与之相关的对象发生某些有趣的事件时,web浏览器就会产生事件.事件本身不是javascript对象. ...
- javascript 事件处理
[写在前面]近期一直在看js的基础,毕竟jquery尽管好用,总归是用着别人写的,仅仅会用api不如搞清楚实现的原理. 等把js基础巩固好了一定要去读jquery的源代码. 事件流 事件流描写叙述的是 ...
随机推荐
- 【转】蓝牙物理链路类型:SCO和ACL链路
原文网址:http://blog.chinaunix.net/uid-23193900-id-3272233.html 蓝牙物理链路ACL(Asynchronous Connectionless), ...
- java多线程编程(3)买票
1,买票非同步版本 http://www.cnblogs.com/anbylau2130/archive/2013/04/17/3025347.html很详细 public class 多线程2 { ...
- (转载)sinaeditor漏洞
SinaEditor简介 SinaEditor是基于新浪博客编辑器的开源编辑器.您可以用它来编辑富文本内容. 编辑器的核心是一个执行队列的调度系统,加入插件来实现功能,并通过事件来驱动编辑器的运行.我 ...
- [cocos2dx 3.0 + xcode]疑难点记录
1: 新项目创建 1.下载最新Python,安装 2.解压引擎包 3.运行终端,切换到引擎目录(直接cd拖动文件夹到光标即可得到路径) 4.按照文档例子: $ cd cocos2d-x $ ./set ...
- QT静态链接
想把QT的程序链接成一个独立的EXE以方便使用,查了很多资料都需要自行编译QT. 搜索了很多的资料,发篇写得比较简明一些:http://my.oschina.net/weiweiqiao/blog/2 ...
- Inheritance - SGU 129(线段与多边形相交的长度)
题目大意:给一个凸多边形(点不是按顺序给的),然后计算给出的线段在这个凸多边形里面的长度,如果在边界不计算. 分析:WA2..WA3...WA4..WA11...WA的无话可说,总之细节一定考虑清楚, ...
- poj 1258 Agri-Net【最小生成树(prime算法)】
Agri-Net Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 44827 Accepted: 18351 Descri ...
- UVA 465 (13.08.02)
Overflow Write a program that reads an expression consisting of twonon-negative integer and an ope ...
- 深入浅出node(4) 异步编程
一)函数式编程基础 二)异步编程的优势和难点 2.1 优势 2.2 难点 2.2.1 异常处理 2.2.2 函数嵌套过深 2.2.3 阻塞 2.2.4 多线程编程 2.2.5 异步转同步 三)异步编程 ...
- Redis的安装(Centos)(转)
1.1. 什么是redis Redis是用C语言开发的一个开源的高性能键值对(key-value)数据库.它通过提供多种键值数据类型来适应不同场景下的存储需求,目前为止Redis支持的键值数据类型如 ...