js跨浏览器事件对象、事件处理程序

项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样;
这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:
var EventUtil={
//节点、事件名、事件处理函数
addHanler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);//这里一个参数为false意为在事件冒泡阶段调用事件处理程序,true为事件捕获阶段调用
}
else if(element.attachEvent)
{
element.attachEvent("on"+type,handler);//IE8及以下只支持事件冒泡
}
else{
element["on"+type]=handler;//DOM0级对每个事件只支持一个事件处理程序
}
}
RemoveHanler:function(element,type,handler){
if(element.RemoveEventListener){
element.RemoveEventListener(type,handler,false);
}
else if(element.detachEvent)
{
element.detachEvent("on"+type,handler);
}
else{
element["on"+type]=null;//移除
}
}
//返回对event对象的引用
getEvent:function(event){
return event?event:window.event;
}
//返回事件目标
getTarget:function(event){
return event.target||envet.srcElement;
}
//取消事件默认行为
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}
else{
event.returnVlaue=false;
}
}
//阻止事件流
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancleBubble=true;
}
}
}

时间: 2024-11-09 06:44:52

js跨浏览器事件对象、事件处理程序的相关文章

js跨浏览器事件处理程序

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="myDiv"> aaaaaaaaaaaaaaaaaaa </div> <ul id="myMenu" style="position:absolute;visibility:hidd

【js事件详解】js事件封装函数,js跨浏览器事件处理机制

一.事件流 事件流描述的是从页面中接受事件的顺序.IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流1.事件冒泡事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档).2.事件捕获事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件. 相关知识链接:js的事件冒泡和事件捕获 二.事件处理程序 1.HTML事件处理程序2.DOM0级事件处理程序3.DOM2级事件处理程序 DOM2级事件定义了两个方法

js 跨浏览器实现事件

我们知道不同的浏览器实现事件是不同的,就比如说我们常见的有三种方法: 1,dom0处理事件的方法,以前的js处理事件都是这样写的. (function () { var p=document.getElementById("huchao1"); //dom0处理方法 p.onclick=function (a) { console.log(a.type); // body... } //移除方法如下: p.onclick=null; // body... })() 2,dom2 处理时

JS DOM基础 事件概述 事件流 事件处理方法 添加监听器 事件类型 事件对象 事件委托

一.事件概述 事件是什么? 在我们的生活中,都会接触到事件这样一个概念,它通常通过描述发生这件事的时间.地点.人物,发生了什么来进行概括. 同样的在javascript也有这样的一个的东西------事件. 页面上发生的事件:鼠标移动.点击.滚动等等. 事件描述了页面上发生的事情,通常它有以下三个要素组成: 事件源:触发事件的元素 事件类型:事件的触发方式(例如鼠标点击或键盘点击) 事件处理程序(事件监听器):事件触发后要执行的代码(函数形式) Javascript 使我们可以动态的去操作一个页

js 跨浏览器获取事件信息模块

1 var EventUtil = { 2 addHandler: function(element, type, handler) { 3 if (element.addEventListener) { 4 element.addEventListener(type, handler, false); 5 } else if (element.attachEvent) { 6 element.attachEvent('on' + type, handler); 7 } else { 8 ele

JS跨浏览器二级事件

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; } }, re

js获取浏览器的keydown事件(附keycode码)

1 <script type="text/javascript" language=JavaScript charset="UTF-8"> 2 document.onkeydown=function(event){ 3 var e = event || window.event || arguments.callee.caller.arguments[0]; /*switch (e && e.keyCode){ case 8: do so

js 去掉浏览器右击默认事件

1.整个页面所有的右击事件 document.oncontextmenu = function(){ return false; } 2.特定的区域 document.getElementById("test").oncontextmenu = function(e){ return false; } 3.去掉后可以给喜欢区块加特定的事件 js: document.getElementById("test").onmousedown = function(e){ i

通过js禁用浏览器的回退事件

js代码: <script> history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, null, document.URL); }); </script> 原文地址:https://www.cnblogs.com/YeHuan/p/11221927.html