第十七节：JavaScript 事件（二）

3.5.10 事件对象 event

event 对象

<button>点击</button>

<script>
	let btn = document.querySelector('button');
    
    btn.onclick = function (event) {
        // 事件处理程序
        
        // 获取标签名
        console.log(event.targht.nodeName);
        // 获取内容
        console.log(event.targht.innerHTML);
    }
</script>

兼容IE6~8 event

event = event || window.event

事件对象的方法

e == event

事件对象属性方法	说明
e.target	返回 触发 事件的对象（标准）
e.srcElement	返回 触发 事件的对象（非标准 IE6~8使用）
e.type	返回事件的类型，例：click、mouseover 不带on
e.cancelBubble	该属性 阻止冒泡（非标准，IE6~8使用）
e.returnValue	该属性 阻止默认事件 / 默认行为，如：不让链接跳转（非标准 IE6~8使用）
e.preventDefault	该属性 阻止默认事件 / 默认行为，如：不让链接跳转（标准）
e.stopPropagation	阻止冒泡（标准）

this 关键字

this的指向在函数定义的时候是确定不了的，只有函数指向的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。

1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
2. 方法调用中，谁调用 this就指向谁
3. 构造函数中 this指向构造函数的实例

e.target 和 this 的区别

1. this 是事件绑定的元素（绑定这个事件处理函数的元素）
2. e.target 是事件触发的元素

通常情况下 terget 和 this 是一致的，
但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），
	这时候 this 指向的就是父元素，因为他绑定事件的元素是对象，
    而 target 指向的是子元素，因为他是触发事件的那个具体元素对象。

3.5.11 阻止默认行为

DOM 标准写法：preventDefault()

event.preventDefault();

3.5.12 阻止事件冒泡

event.stopPropagation();

// IE 6~8 兼容写法
event.cancelBubble = true;

3.5.13 禁止鼠标右键菜单

contextmenu

<div> contextmenu 禁止右键菜单 </div>

<script>
	let div = document.querySelector('div');
    
    // 监听方式创建事件
    div.addEventListener('contextmenu', function (event) {
        event.preventDefault();
    });
    
    // 传统方式创建事件
    div.oncontextmenu = function (event) {
        event.preventDefault();
    }
</script>

3.5.14 禁止鼠标选中

selectstart

<div> selectstart 禁止鼠标选中 </div>

<script>
	let div = document.querySelector('div');
    
    // 监听方式创建事件
    
    
    // 传统方式创建事件
    
</script>

3.5.15 鼠标相关事件对象

结合 mousemove 添加鼠标事件进行使用

鼠标事件对象	说明
event.pageX	返回鼠标相对于文档页面的 X轴坐标
event.pageY	返回鼠标相对于文档页面的 Y轴坐标
event.clientX	鼠标相对于浏览器可视区的 X轴坐标
event.clientY	鼠标相对于浏览器可视区的 Y轴坐标
event.screenX	鼠标相对于电脑屏幕的 X轴坐标
event.screenY	鼠标相对于电脑屏幕的 Y轴坐标

鼠标相对于文档页面的 XY轴坐标

event.pageX event.pageY

文档页面：有滚动条时，被滚动上去的页面也叫 文档页面

<script>
	document.addEventListener('mousemove', funciton (event) {
		// 鼠标相对于文档页面 x轴坐标
		console.log(event.pageX);
    	// 鼠标相对于文档页面 y轴坐标
		console.log(event.pageY);
	});
</script>

鼠标相对于浏览器可视区的 XY轴坐标

event.clientX event.clientY

页面可视区：浏览器能看到的地方就是可视区

<script>
	document.addEventListener('mousemove' function (event) {
        // 鼠标相对于浏览器可视区 X轴坐标
        console.log(event.clientX);
        // 鼠标相对于浏览器可视区 y轴坐标
        console.log(event.clientY);
    });
</script>

鼠标相对于电脑屏幕的 X轴坐标

event.screenX event.screenY

电脑屏幕：整张屏幕可视区

<script>
	document.addEventListener('mousemove' function (event) {
        // 鼠标相对于电脑屏幕的 X轴坐标
        console.log(event.screenX);
        // 鼠标相对于电脑屏幕的 Y轴坐标
        console.log(event.screenY);
    });
</script>

3.5.16 键盘事件

执行顺序：keydown keypress keyup

可以使用属性 keyCode，来获取按下的是哪个键（默认是返回的是字母对应的数字）

键盘事件	说明
onkeyup	键盘弹起
onkeydown	键盘按下
onkeypress	某个按键按下

键盘按下事件

keyup

/ 语法格式

document.addEventListener('keyup', function (event) {
	console.log('键盘按下');
});

键盘弹起事件（重点）

keydown 实际开发常用

能识别键盘上的任意键，但是不能区分字母大小写，但可以识别功能键

/ 语法格式

document.addEventListener('keydown', function (event) {
    console.log('键盘弹起');
});

event 键盘属性

event.key

按下按键时获取键盘按钮

var x = event.key;

按下 Enter	// Enter

event.keyCode

获取按下的键盘按键Unicode值

var x = event.keyCode;

119   // 119 是字符 "w"

键盘某个按键按下

keypress

可以识别字母大小写，但是不能识别功能键

/ 语法格式

document.addEventListener('keypress', function (event) {
    consloe.log(event.keyCode);
});