本文链接：https://blog.csdn.net/qq_41348029/article/details/81288481

e = e || window.event 在做事件处理时，用于区分IE和其他浏览器事件对象。

下面链接为事件对象的参考资料：

　　http://wenku.baidu.com/view/400a89f4f61fb7360b4c65ca.html

<!DOCTYPE HTML>
<html>

<head>
<title></title>
<style type="text/css">
#aa {
border: 1px solid #000;
width: 100px;
height: 40px;
margin-top: 50px;
}

#bb {
border: 1px solid #000;
width: 500px;
height: 40px;
margin-top: 50px;
}

#cc {
border: 1px solid #000;
width: 500px;
height: 40px;
}
</style>
</head>

<body>
<div id="aa"></div>
<div id="bb">dfdfddfsd</div>
<div id="cc">gregreger</div>

<script type="text/javascript">
/*JS的event.srcElement与event.target（触发事件对象）
IE下,event对象有srcElement属性,但是没有target属性;
Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的，即：
firefox 下的 event.target = IE 下的 event.srcElement
解决方法:使用obj = event.srcElement ? event.srcElement : event.target;
或：var evtTarget = event.target || event.srcElement;
*/

//event.srcElement：表示的当前的这个事件源。
//
//event.srcElement.parentNode：表示当前事件源的父节点。
//
// parentNode：父节点，也就是上一层的节点。可以是任何一个标签。
//
//event.srcElement.firstChild：当前事件的第一个节点，如果节点是input，通过event.srcElement.firstChild.value就可以获取此input的值。
//
//event.srcElement.parentElement：是指在鼠标所在对象的上一个对象。
//
//event.srcElement.children：当前节点下对象的个数，有多个的话就是个数组，如当前节点下有2个input的对象，要获取这两个可以用event.srcElement.children[0] 与 event.srcElement.children[1]分别获取。
//

document.getElementById("aa").onclick = function(e) {
if(e) console.log(e.toString()); // IE6/7/8 e为undefined IE9中e为W3标准事件对象。
//e = window.event;
console.log(e.srcElement.tagName || e.currentTarget.tagName);
};
/* element.onXXX方式（比较古老，不推荐使用）
这种方式添加事件IE6/7/8只支持window.event不支持参数传入，
Firefox只支持参数传入不支持其它方式。
IE9/Opera/Safari/Chrome 两种方式都支持。
*/

var d4 = document.getElementById('bb');

function clk(e) {
alert(e); // 所有浏览器弹出的信息框显示都是事件对象。
alert(e.srcElement.tagName || e.currentTarget.tagName);
e = e || window.event;
alert(e); // IE6/7/8中和上个e弹出相同的对象。
};

//addEventListener() 用于向指定元素添加事件。
// 参数说明：tr件，比如 click mouseenter mouseleave
//fn 回调函数
//useCaption 用于描述是冒泡还是捕获。默认值是false，即冒泡传递。
//当值为true，就是捕获传递。
if(d4.addEventListener) {
d4.addEventListener('click', clk, false);
alert("addEventListener");
};
if(d4.attachEvent) {
d4.attachEvent('onclick', clk);
alert("attachEvent");
};
/* addEventListener、attachEvent方式（推荐使用）

结论：
通常事件句柄里有这句话：e = e || window.event;
但是在这种调用方式（addEventListener、attachEvent方式）中没什么作用，
这是什么原因呢？上边参考文章的总结里指出了原因，即：
“IE6/7/8支持通过window.event获取对象，
通过attachEvent方式添加事件时也支持事件对象作为句柄第一个参数传入”
因为IE6/7/8在attachEvent方式添加事件时同时支持两种方式，所以事件句柄中的参数e在
IE6/7/8中会自动转换为window.event。
这么以来，这句e = e || window.event;在此处就不需要了（个人结论）。

*/

/*
在编写跨浏览器的函数库时，IE和标准事件对象的属性的差异的问题需要解决。
下边抽出相关代码，讨论这个问题在这里的体现。
*/
var _E = {
BindEvent: function(object, fun) {
if(arguments.length == 1) {
fun = arguments[0];
object = null;
}
var args = Array.prototype.slice.call(arguments, 2);
return function(event) {
return fun.apply(object, [fixEvent(event)].concat(args));
}
}
};

function fixEvent(event) { // 统一不同浏览器的event对象
if(event) return event;
event = window.event;
event.pageX = event.clientX + getScrollLeft(event.srcElement);
event.pageY = event.clientY + getScrollTop(event.srcElement);
event.target = event.srcElement;
event.stopPropagation = stopPropagation;
event.preventDefault = preventDefault;
var relatedTarget = {
"mouseout": event.toElement,
"mouseover": event.fromElement
}[event.type];
if(relatedTarget) {
event.relatedTarget = relatedTarget;
}

return event;
};

function stopPropagation() {
this.cancelBubble = true;
};

function preventDefault() {
this.returnValue = false;
};

// 测试代码如下
function get(ev) {
alert(ev.pageX);
}
var cc = document.getElementById("cc");
var clickHandler = _E.BindEvent(get);
// cc.attachEvent('onclick', clickHandler); // IE6/7/8下测试
/*
结果点击id为cc的div元素后，弹出undefined。说明ev.pageX根本不存在。
可是我们在fixEvent()里已经做了事件对象的统一工作。
调试会发现：fixEvent()里if (event) return event;这句是执行后就直接return了，
这里的event按照道理说应该是undefined，但是事实并不是。

//
至于原因个人觉得就是这里：因为IE6/7/8在attachEvent方式添加事件时同时支持两种方式，
所以事件句柄中的参数会自动转换为window.event。也就是说参数不是undefined

//
所以在这里用if (event) return event;判断事件对象不妥。
（说明：fixEvent()这段代码参考自博客园里cloudgamer的函数库，
他里边就是这种写法，个人觉得有错误，希望有兴趣的朋友也做做验证）
*/
</script>
</body>

</html>

e = e || window.event的区别及用法的更多相关文章

  1. ev=ev || window.event 与 ev = window.event || ev 区别

    event是事件对象(也是window的属性),但不是标准的,只有IE支持.在W3C标准支持的浏览器下事件对象是引发事件函数的第一个参数,参数名随意.var oEvent = ev || event; ...

  2. Angular JS中$timeout的用法及其与window.setTimeout的区别

    $timeout的用法 angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会 ...

  3. javascript中window.event事件用法详解

    转自http://www.jb51.net/article/32564.htm描述 event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生 ...

  4. e = e || window.event用法细节讨论

    e = e || window.event是我们在做事件处理时候区分IE和其他浏览器事件对象时常用的写法.但是这行兼容性代码有没有必要出现在所有的事件句柄中呢?标准事件调用方式需要这行代码吗?下边我们 ...

  5. 火狐和IE的window.event对象详解(转载)

    FF的FIREBUG,不仅能测试JS还能检查CSS错误,是一般常用的. 但它主要检查FF方面的错误,对IE就无能为力了. 要测试IE,就用ieTester,它可以测试IE几乎所有版本(1.0恐怕也用不 ...

  6. JS控制键盘录入 和 window.event.keycode对照

    一.只允许录入整数 1.不允许录入非数字(按下字母键就会提示并清空) function intOnly() { if (!(window.event.keyCode >= 48 &&am ...

  7. JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target

    http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...

  8. 转载jquery $(document).ready() 与window.onload的区别

    jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...

  9. window.event对象详细介绍

    1.event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等.event对象只在事件发生的过程中才有效.event的某些属性只对特定的事件有意义.比如,fromEleme ...

随机推荐

  1. spring boot跨域请求访问配置以及spring security中配置失效的原理解析

    一.同源策略 同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源 源[orig ...

  2. 前端技术之：常见前端Web框架

    Express 声称是快速.自由.小巧的Node.js Web框架,官网地址如下: https://expressjs.com/ https://github.com/expressjs/expres ...

  3. 分布式id生成方案总结

    本文已经收录自 JavaGuide (60k+ Star[Java学习+面试指南] 一份涵盖大部分Java程序员所需要掌握的核心知识.) 本文授权转载自:https://juejin.im/post/ ...

  4. Logback MDC

    Mapped Diagnostic Contexts (MDC)   (译:诊断上下文映射) Logback的设计目标之一是审计和调试复杂的分布式应用程序.大多数实际的分布式系统需要同时处理来自多个客 ...

  5. CSPS模拟 87

    考场上思考量不可减少 否则分数秒变弟弟,考后秒变弱智 T1 二分答案.打的稍恶心 T2 线段树维护“如果我在这个点开枪,前方点的贡献有多大” 想明白了就很好理解了 另外已经飞过去八千里的鸟还输入进来干 ...

  6. StrGame

    如果先手可以控制一轮必胜或者必败,则先手必胜 如果只有必胜的方法,不能保证必败,则最后一轮的先手获得胜利,倒数第二轮的先手会被后手想办法”被胜利“从而在最后一轮成为后手,必败.倒数第三轮先手故意胜利, ...

  7. keeplived离线安装openssl-devel依赖包

    转载自素文宅博客:https://blog.yoodb.com/yoodb/article/detail/1434 由于公司业务并发比较高需要高可用使用LVS keeplived.在linux系统ce ...

  8. 基于Docker的Mysql主从复制

    基于Docker的Mysql主从复制搭建 为什么基于Docker搭建? 资源有限 虚拟机搭建对机器配置有要求,并且安装mysql步骤繁琐 一台机器上可以运行多个Docker容器 Docker容器之间相 ...

  9. nyoj 163 Phone List(动态字典树<trie>) poj Phone List (静态字典树<trie>)

    Phone List 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 Given a list of phone numbers, determine if it i ...

  10. nyoj 53-不高兴的小明 （遍历）

    53-不高兴的小明 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:28 submit:89 题目描述:    小明又出问题了.妈妈认为聪明的小明应该 ...