事件对象事件对象兼容性处理事件对象常用属性和方法

事件对象

event 就是一个事件对象 写到我们侦听函数的小括号里 当作形参事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，比如鼠标坐标等，如果是键盘事件里面就包含的键盘事件的信息，比如：用户按下了哪个键事件对象可以自己命名，一般用event存在兼容性问题， ie678 可以通过 window.event 兼容性的写法; <script> var div = document.querySelector("div"); div.onclick = function (event) { console.log(event); }; div.addEventListener("click", function (event) { console.log(event); });

兼容性处理

div.addEventListener("click", function (e) { e = e || window.event; console.log(e); });

事件对象常用属性和方法

事件对象属性方法说明e.target返回触发事件对象 标准e.srcElement返回触发事件对象 非标准 ie6-8使用e.type返回事件类型 比如click mouseover 不带one.cancleBubble该属性阻止冒泡 非标准 ie6-8使用e.returnValue该属性阻止默认事件（默认行为） 非标准 ie6-8使用 例如不让链接跳转e.preventDefault()该属性阻止默认事件（默认行为） 标准 例如不让链接跳转e.stopPropagation()阻止冒泡 标准

e.target 与 this 对比：

e.target 返回的是触发事件的对象（元素）

this返回的是绑定事件的对象（元素）

e.target点击了哪个元素，就返回哪个元素；

this哪个元素绑定了该事件就返回谁

var div = document.querySelector("div"); var ul = document.querySelector("ul"); ul.addEventListener("click", function (e) { //我们给ul绑定了事件 this就指向 ul console.log(this); // e.target 指向我们点击的那个对象 谁触发事件指向谁 console.log(e.target); });

e.srcElement 的 ie 兼容性处理 （了解）

div.onclick = function (e) { e = e || window.event; var target = e.target || e.srcElement; console.log(target); });

preventDefault() 阻止事件默认行为

//阻止事件默认行为 比如让链接不跳转 var a = document.querySelector("a"); a.addEventListener("click", function (e) { e.preventDefault(); }); //传统注册方式 阻止事件默认行为 a.onclick = function () { //普通浏览器 e.preventDefault()方法 e.preventDefault(); //低版本浏览器 ie678 returnValue属性 e.returnValue; //也可以利用 return false 来阻止默认行为 没有兼容性问题 return false; //此方法虽然好 但return后面的代码将无法执行，而且仅限于传统注册行为 };

阻止冒泡的两种方式 e.stopPropagation()（重要）

var son = document.querySelector(".son"); son.addEventListener( "click", function (e) { alert("son"); e.stopPropagation(); //阻止冒泡 e.stopPropagation() 方法 //低版本处理方式 e.cancelBubble = true; }, false );

阻止冒泡的处理兼容性问题

function (e) { //阻止冒泡的处理兼容性问题： if (e && e.stopPropagation) { e.stopPropagation(); } else { window.e.cancelBubble = true; } },