在触发 DOM 上的某个事件时, 会产生一个事件对象 event. 这个对象中包含着所有与事件有关的信息.
包括导致事件的元素, 事件的类型以及其他与特定事件相关的信息.
- <body>
- <a href="http://www.baidu.com">baidu</a>
- <div class="box">
我是 div
- <div class="son">son</div>
- </div>
- <script>
- var box = document.querySelector('.box');
- // 事件对象的兼容写法 var e = e || Windows.event; // 或 var e = e || event
- box.onclick = function(e) { // e 是形参
- var e = e || Windows.event; // 或 var e = e || event
- // event 是事件对象 ie6-8 通过 Windows.event 来获取事件对象
- console.log(e); // Windows.event
- console.log(e.target);// 触发事件的元素 var target = e.target || e.srcElement
- console.log(this); // 绑定事件的对象
- }
- // box.onmouseover = fn;
- // box.onmouseout = fn;
- function fn(e) {
- var e = e || Windows.event;
- console.log(e.type);
- }
- // 阻止浏览器的默认行为 比如链接跳转 e.preventDefault()或 return false;
- var a = document.querySelector('a');
- a.onclick = function(e) {
- var e = e || Windows.event;
- console.log('hello');
- // 阻止浏览器的默认行为 比如链接跳转 ie6-8 returnValue 属性 e.returnValue
- //e.preventDefault();
- return false; // 也可以阻止默认行为 且没有兼容性问题
- }
- </script>
- </body>
event 常用属性:
1.event.type;-- 获取绑定的事件类型, 比如 click,mouseover 等
2.event.target;(在 IE 低版本中用 event.srcElement)-- 返回触发事件的元素.
比如 [object htmlInputElement] 指的是 HTML 里的 input 元素
3.event.stopPropagation()[?pr?p?'ɡe??n];(在 IE 中用 oEvent.cancelBubble=false)// 用于阻止事件冒泡
4.event.stopImmediatePropagation();//Immediate[??mi:di?t] // 当一个元素绑定多个事件处理程序的时候,
事件会按照顺序全部执行, 如果不想让后面的事件处理程序执行, 就在当前事件里加这个方法,
就不执行后面的事件处理程序了.
- 5.event.preventDefault();(在 IE 低版本中用 oEvent.returnValue=true)
- // 阻止事件的默认行为, 比如阻止 a 的 href 链接.
来源: http://www.bubuko.com/infodetail-3301011.html