Javascript跨浏览器的事件对象
一、跨浏览器的事件对象
var EventUtil = {
///添加事件
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
//获取事件
getEvent: function (event) {
return event ? event : window.event;
},
//获取事件元素目标
getTarget: function (event) {
return event.target || event.srcElement;
},
//取消事件的默认行为
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
}
else {
event.returnValue = false;
}
},
///移除事件
removeHandler: function (element, type, handler) {
if (element.removeEvenListener) {
element.removeEvenListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
}
else {
event.cancelBubble = true;
}
}
};
二、右键菜单demo
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="myDiv">
点击右键
</div>
<ul id="myMenu" style="position: absolute; visibility: hidden; background-color: silver;">
<li><a href="http://baidu.com">baidu.com</a>
</li>
<li><a href="http://zhihu.com">zhihu.com</a>
</li>
</ul>
<script src="../Scripts/EventUtil.js"></script>
<script>
EventUtil.addHandler(window, "load", function (event) {
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "contextmenu", function (event) {
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event); var menu = document.getElementById("myMenu");
menu.style.left = event.clientX + "px";
menu.style.top = event.clientY + "px";
menu.style.visibility = "visible"; }); EventUtil.addHandler(document, "click", function (event) {
document.getElementById("myMenu").style.visibility = "hidden";
});
}) EventUtil.addHandler(window, "beforeunload", function (event) {
event = EventUtil.getEvent(event);
var message = "您确定要离开当前页";
event.returnValue = message;
return message;
});
</script>
</body>
</html>
Javascript跨浏览器的事件对象的更多相关文章
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- 跨浏览器的事件对象-------EventUtil 中的方法及用法
什么是EventUti----封装好的事件对象 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即 ...
- EventUtil——跨浏览器的事件对象
. 首页 博客园 联系我 前言:什么是EventUtil?. EventUtil对象全见. addHandler方法. removeHandler方法. event对象与getEvent方法. tar ...
- JavaScript跨浏览器绑定事件函数的优化
JavaScript作为一门基于事件驱动的语言(特别是用在DOM操作的时候),我们常常需要为DOM绑定各种各样的事件.然而,由于低版本的IE的不给力,在绑定事件和移除事件监听上都与众不同,我们常常需要 ...
- javaScript之跨浏览器的事件对象
跨浏览器的兼容代码 var eventHandler = { addHandler: function(element, type, handler){}, removeHandler: functi ...
- 封装常用的跨浏览器的事件对象EventUtil
var EventUtil = { addHandler: function(element,type,handler) { //事件监听 if(element.addEventListener) { ...
- 跨浏览器的事件对象EventUtil
var EventUtil = function(){ /*--addHandler--*/ addHandler:function(element,type,handler){ if(element ...
- js实现一些跨浏览器的事件方法
用JavaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象: var EventUtil = { on: funct ...
- 封装常用的Javascript跨浏览器方法
var EventUntil={ // 跨浏览器的添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListen ...
随机推荐
- 设计模式原则(5)--Law of Demeter(LoD)--迪米特法则
作者QQ:1095737364 QQ群:123300273 欢迎加入! 1.定义: 一个软件实体应当尽可能少地与其他实体发生相互作用.也就是说:一个类对自己依赖的类知道的越少越好.也就是 ...
- console.log-对象引用
现象 现象1 利用简单的例子描述下 打印出的结果为 很明显可以看出,对象在打印之后改变,但最终结果还是改变后的值,因此console.log保存的事对象的引用. 现象2 但是,在debugger的过程 ...
- 【代码笔记】iOS-自定义选择框（高底强弱）
一,效果图 二,代码. ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewControl ...
- flutter 调用原生（获取当前设备电池电量）
代码: import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'dart:asy ...
- SQL语句创建数据库及表
--删除数据库drop database ArchiveDev; --建立归档数据库CREATE DATABASE ArchiveDev; USE ArchiveDev;GO --1.建立归档计划执行 ...
- 分享一个android debug模式，出现 waiting for debugger把界面卡住，取巧的解决办法
使用android studio开发程序时,有时会出现 waiting for debugger 卡住界面,软件无法正常debug运行的情况,很多网友分享了一些解决办法,比如: 1 打开cmd进入命令 ...
- linux下安装jdk安装及环境变量配置
1.默认是在windows下载,linux下安装 2.在jdk官网下载相应版本的jdk,这次下载为 jdk-8u161-linux-x64.tar.gz 3.将下载好的文件上传到指定目录,我这次把它放 ...
- Python tuple
元组其实跟列表差不多,也是存一组数,只不是它一旦创建,便不能再修改,所以又叫只读列表 语法 names = (a,b,c) 它只有2个方法,一个是count,一个是index. 当然也有可变元祖: 可 ...
- Safari中的Date
在js中处理Date时,发现Safari和其他浏览器的支持方式不一致 1.例如:2017-01-01 12:00:00 在其他浏览器中,使用这个格式的字符串进行new Date操作没有问题,但是在Sa ...
- IIS 安全设置
这近网站中毒,以下把IIS安全设置记录一下,以便查阅. 1.对于不需要执行的目录,将处理程序映射中的编辑功能权限中的脚本去掉,这样即使上传了木马文件在此目录,也是无法执行的. 删除IIS默认的匿名用户 ...