JavaScript-DOM事件对象

事件对象：任何事件触发过后都会产生一个事件对象，例如：

是谁要绑定这个事件。
事件触发过后会得到什么，比如触发鼠标事件，可以得到鼠标的位置（所对应的事件对象就叫鼠标事件对象）。
如果是键盘触发了事件，那么就会得到一些键盘的相关信息，比如按了什么按键（所对应的事件就叫键盘事件对象）。

一、事件对象的获取

需要声明一个形参用来接收事件对象

例如：

var btn = document.querySelector('button');

btn.addEventListener('click' , function(e){}) //此处的e就是一个事件对象，也可以写成event或者evt

事件对象的获取存在兼容性问题

目前的标准浏览器包括：Opera 10.10、Safari 4.0.4、Intelnet Explorer 9、Firefox 3、Chrome。
您也可以对自己的浏览器进行验证，方法如下：
在浏览器的地址栏中复制以下地址，
若能看到一张笑脸，则您的浏览器是标准浏览器。

在IE678中浏览器不会用方法传递参数，需要window.event获取

兼容问题的解决方案

var div = document.querySelector('div');
   div.onclick = function(e) {
   e = e || window.event; // 事件对象
   console.log(e);

}

二、事件对象的属性和方法：

属性和方法	说明
e.target	返回事件源（标准浏览器）
e.srcElement	返回事件源（非标准浏览器，在 IE6~8 中）
e.type	返回事件类型
e.stopPropagation()	阻止事件冒泡（标准浏览器）
e.cancelBubble	阻止事件冒泡（非标准浏览器，在 IE6~8 中，true）
e.preventDefault()	阻止默认事件（标准浏览器）默认事件==默认行为，比如不让链接跳转。
e.returnValue	阻止默认事件（非标准浏览器，在 IE6~8 中，false）默认事件==默认行为，比如不让链接跳转。

e.target 和 this 的区别

e.target 是事件触发的元素，也就是所说的事件源，this是事件绑定的元素

三、阻止事件冒泡

e.stopPropagation(); //阻止事件冒泡（标准浏览器）

window.event.cancelBubble = true; //阻止事件冒泡（非标准浏览器，在 IE6~8 中）

阻止事件冒泡的兼容性处理

if (e && e.stopPropagation) {
   e.stopPropagation(); //阻止事件冒泡（标准浏览器）
   } else {
   window.event.cancelBubble = true;//阻止事件冒泡（非标准浏览器，在 IE6~8 中）
   }

以下写法不能阻止事件冒泡：

return false;

四、阻止默认行为

e.preventDefault(); //阻止默认事件（标准浏览器）

window.event.returnValue = false; //阻止默认事件（非标准浏览器，在 IE6~8 中，false）

兼容性问题同上述阻止事件冒泡的兼容性处理一致

但是：可以用

return false;

阻止默认行为，并且没有兼容性问题，注意区别

鼠标无法右键菜单、鼠标无法选中

oncontextmenu：无法右键

onselectstart：无法选中

网页中禁止用F12按键打开开发者工具

document.onkeydown = function(e){
            var current = e.keyCode ||e.which || e.charCode;
            console.log('此处已经无法用f12调用开发者工具');
            e = e || window.event;
            if (current == 123) {
                e.stopPropagation();
                e.preventDefault();
            }
        }

注意：仍然可以通过鼠标点击的相应菜单的操作来打开

五、鼠标事件对象的属性

鼠标事件对象属性	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标（IE9+支持）
e.pageY	返回鼠标相对于文档页面的Y坐标（IE9+支持）
e.ScreenX	返回鼠标相对于电脑屏幕的X坐标
e.ScreenY	返回鼠标相对于电脑屏幕的Y坐标

六、键盘事件对象的属性

键盘事件对象属性	说明
keyCode	返回按键的ASCII码值

1.通过事件对象获取用户按下的按键

script>
    /* 利用keycode返回的ASCII码值来判断用户按下了那个键 */
    document.onkeyup = function(e) {
    	console.log('onkeyup:' + e.keyCode); //不区分大小写字母，返回大写字母的ASCII码值。
	}
	document.onkeypress = function(e) {
    	console.log('onkeypress:' + e.keyCode); //区分大小写字母，返回大小写字母的ASCII码值。
	}
	document.onkeydown = function(e) {
    	console.log('onkeydown:' + e.keyCode); //不区分大小写字母，返回大写字母的ASCII码值。
	}
</script>

2.搜索框获得鼠标焦点案例

<input type="text">
<button type="button">搜索</button>

<script>
    var input = document.querySelector('input');
	document.onkeyup = function(e) {
    	console.log(e.keyCode);
    	if (e.keyCode === 81) { //Q键
        	input.focus(); // 触发输入框的获得焦点事件
    	} else if (e.keyCode === 27) { //Esc键
        	input.blur(); // 触发输入框的失去焦点事件
    	}
	}
</script>

Biegral Blog