<script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function (event) { console.log("Clicked"); event.stopPropagation(); }; document.body.onclick = function (event) { console.log("Body clicked"); }; </script>
eventPhase 属性，可以确定事件当前正处于事件流的哪一个阶段：
<script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function (event) { console.log(event.eventPhase);//2 }; document.body.addEventListener("click", function (event) { console.log(event.eventPhase);//1 }, true);//true 表示捕获阶段 document.body.onclick = function (event) { console.log(event.eventPhase);//3 }; </script>
注意： 只有在事件处理程序执行期间，event 对象才会存在；一旦事件处理程序执行结束，event 对象就会被销毁！
2 IE 中的事件对象
在使用 DOM0 级方法添加事件处理程序时，event 对象是作为 window 对象的一个属性存在：
var btn = document.getElementById("myBtn"); btn.onclick = function () { var event = window.event; console.log(event.type);//"click" };
如果是通过 HTML 属性指定的事件处理程序，也跟 DOM一样，可以通过 event 变量来访问 event 对象。
IE 的 event 对象也包含着创建它的特定事件相关的属性和方法，所以可能每个特定事件都有自己所特有的属性和方法，不过所有事件都会有这些属性和方法：
属性
类型
读/写
说明
cancelBubble
Boolean
读/写
默认值为 false，true 表示可以取消事件冒泡（同 DOM 的 stopPropagation() ）。
returnValue
Boolean
读/写
默认值为 true，false 表示取消事件默认行为（同 DOM 的 preventDefault() ）。
srcElement
Element
只读
事件的目标（同 DOM 中的 target）。
type
String
只读
被触发的事件类型。
因为事件处理程序的作用域是根据它指定的方式来确定的，所以最好是使用 event.srcElement 来得到事件的目标比较靠谱：
<button>点我</button> <script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function () { console.log(window.event.srcElement === this);//true }; btn.attachEvent("onclick", function (event) { console.log(event.srcElement === this);//false }); </script>
将 returnValue 设置为 false，就能阻止默认行为：
<a href="https://www.jb51.net/163.com" >点我</a> <script type="text/javascript"> var link = document.getElementById("myLink"); link.onclick = function () { window.event.returnValue = false; } </script>
与 DOM 不同的是，这里没有办法确定事件是否能被取消。
因为 IE 不支持事件捕获，所以只能取消事件冒泡：
<script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function () { console.log("Clicked"); window.event.cancelBubble = true; }; document.body.onclick = function (event) { console.log("Body clicked"); }; </script>
3 跨浏览器的事件对象
我们把之前的 EventUtil 对象进行增强：
var EventUtil = { ... /** * 返回对 event 对象的引用 * @param event * @returns {*} */ getEvent: function (event) { return event ? event : window.event; }, /** * 返回事件的目标 * @param event * @returns {*|elem|Object} */ getTarget: function (event) { return event.target || event.srcElement; }, /** * 取消事件默认行为 * @param event */ preventDefault: function (event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, /** * 阻止事件流 * @param event */ stopPropagation: function (event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } } }
这样使用：