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

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

一、事件对象的获取 

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

例如:

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>


本文转载:CSDN博客