js鼠标键盘事件

事件

1、添加事件的两种方式

传统注册方式：

• 使用on开头
• 注册事件的唯一性，如果对同一个元素有多个事件，将会执行最后一个

方法监听注册方式：

• w3c推荐

• addEventListener()

• ie9以前用attachEvent()代替

• 不会出现唯一性问题，如果有多个事件，会依次执行

elem.addEventListener(type, listener, useCapture)

type：字符串，事件类型

listener：事件处理函数：直接写方法名就可，不要加’()’

useCapture：默认为false，处于冒泡阶段；为true时，为捕获阶段

2、DOM事件流

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即为DOM事件流。

事件从上向下找叫捕获；从下向上找叫冒泡。

• 事件中的onclick…与attachEvent只能得到冒泡阶段
• addEventListener，第三个参数为true，则处于捕获状态，为false处于冒泡阶段

所以如果大标签包含小标签且两个标签都有事件时，捕获时先执行大标签元素的事件；冒泡时先执行小标签的事件

3、事件对象

3.1 概念

<div>点击<div>
<script>
    document.querySelector('div').onclick = function(e){
        console.log(e);
    }
    // 或者
    document.querySelector('div').addEventListener('click', function(e){
        console.log(e);
    });// 或者
    document.querySelector('div').addEventListener('click', fun);
    function fun (event) {
        
    }
</script>

• 其中的e就是事件对象，写在小括号里座作为形参来看
• 包含该事件一系列的相关数据的集合（状态、位置、触发对象等）
• 形参的名字可以随意
• 有兼容性问题，ie678不通过形参获取，通过window.event获取

3.2 常见事件对象属性和方法

a.onclick = function (e) {
	console.log(this);
}

1、e.target返回触发事件的对象，而this返回绑定事件的对象

例：如果父标签为绑定事件，有子标签，点击子标签，target返回的是子标签元素，this返回父标签元素

2、阻止默认行为：链接不跳转、提交按钮不生效等

​ e.previousDefault()：这是方法，高版本

​ e.returnValue：这是属性，低版本

​ return false; // 无兼容问题，仅适用传统注册方式

a.onclick = function(e){
	e.previousDefault(); 或
	return false; 或
	e.returnValue; 
}

3、阻止冒泡

事件对象的属性方法
e.target	返回触发事件的对象（标准）
e.srcElement	返回触发事件的对象（非标准 ie6-8使用）
e.type	返回事件的类型
e.cancelBubble	阻止冒泡（非标准）
e.stopPropagation()	阻止冒泡（标准）
e.preventDefault()	阻止默认事件（标准） 如：禁止连接跳转
e.returnValue	阻止默认事件（非标准）

4、事件委托

原理：给父节点添加事件监听，利用冒泡影响每一个子节点

<ul>
    <li>点击</li>
    <li>点击</li>
    <li>点击</li>
    <li>点击</li>
</ul>
<script>
    ul.addEventListener('click', function(e){
		alert('点击了');
        e.target.style.color = 'red';	// 在li点击时，点击的li中字体将会变成red
    });
</script>

5、鼠标事件与事件对象

事件:

1、鼠标右键事件：contextmenu

// 禁止鼠标右键的事件（触发源为document）
document.addEventListener('contextmenu', function (e) {
	e.preventDefault();
});
// 上面代码的意思是如果出现右键事件，立马不生效，从而达到禁止右键的目的

2、选择事件：selectstart

// 禁止选中文字
document.addEventListener('selectstart', function(e){
	e.preventDefault();
});

3、其他

More Actions鼠标事件

• onclick

• onmouseover：鼠标移入监听对象中，或者从监听对象的一个子元素移入另一个子元素中时触发该事件。（会冒泡）

• onmouseout：鼠标离开某元素时（会冒泡）

• onmouseenter：鼠标移入监听对象时触发，在监听对象内移动不会触发。（只捕获）

• onmouseleave：鼠标离开时（只捕获）

• onfocus：元素获得焦点

• onblur：元素失去焦点

• onmousemove：鼠标移动时

• onmouseup：鼠标点击后抬起时

• onmousedown：鼠标按下时

注：mouseover与mouseenter都是鼠标经过时触发，mouseover在鼠标经过子元素时会触发（会冒泡），mouseenter只在自身盒子时会触发（不会冒泡）

事件对象:

document.querySelector('a').onclick = function(e){
	// 相对于页面（不是浏览器）可视区域 -----------》 fixed
    console.log(e.clientX);
	console.log(e.clientY);
	
    // 相对于文档 -----------------》 absolute
    console.log(e.pageX);
    console.log(e.pageY);
}

鼠标事件对象
e.clientX	鼠标相对窗口可视区的X坐标
e.clientY
e.pageX	鼠标相对于文档页面的X坐标
e.pageY
e.screenX	相对于电脑屏幕的X坐标
e.screenY

6、键盘事件与事件对象

事件：

这是对document进行监听

键盘事件
onkeyup	按键被松开时触发
onkeydown	按键按下时触发
onkeypress	按键按下时触发（不识别功能键，如：ctrl、shift等）

这三个事件的执行顺序 keydown —》 keypress —》keyup

事件对象：

1. e.keyCode：返回按键的ascii码

• keydown与keyup不区分大小写，返回的都是大写的ascii码
• keypress区分大小写