Web API-键鼠事件

1. 事件高级

1.1 注册事件

给元素添加事件，称为注册事件或告绑定事件

传统方式（兼容）
- 利用 on 开头的事件 onclick
- <button onclick="alert(hi~')"> </button>
- btn.onclick = function(){}
- 特点：注册事件的唯一性
- 同一个元素同一个事件只能设置一个处理函做，最后注册的处理函数将会覆益前面注册的处理函数
监听注册方式（IE9+）
- w3c 标准推荐方式
- addEventListener() 它是一个方法
- IE9之前的IE不支持此方法，可使用attachEvent() 代替
- 特点：同一个元素一个事件可以注册多个监听器按注册顿序依次执行

1.2 事件监听

第一种：addEventListener()（IE9+）

事件目标.addEventListener('事件类型', 事件处理函数[, useCapture])

事件类型：如 click，（注意不要带 on）
useCapture（可选）：事件调用处理程序以什么阶段运行
- 真：捕获阶段
- 假：冒泡阶段（默认）

第二种：attacheEvent()（ie6~8使用）

事件目标.attachEvent('事件类型', 处理函数)

事件类型：如 onclick，（注意这里带 on）

事件监听兼容性解决方案

封装一个函数，函数中判断浏览器的类型

function addEventListener(element, eventName, fn) {
    //判断当前浏览器是否支持addEventListener方法
    if (element.addEventListener) {
        element.addEventListener(eventName, fn);
    } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn);
    } else {
        // 相当于element.onclick = fn;
        element['on' + eventName] = fn;
    }
}
addEventListener(btns[2], 'click', function() {
	alert('666');
})

1.3 删除事件

传统方式删除事件：事件目标.事件 = null;
事件监听删除事件：
- 事件目标.removeEventListener('事件', 处理函数);
- 事件目标.detachEvent('事件', 处理函数);
注意：属性用法同事件监听

**删除事件兼容性解决方案 **

function removeEventListener(element, eventName, fn) {
    //判断当前浏览器是否支持 removeEventListener 方法
    if (element.removeEventListener) {
        element.removeEventListener(eventName, fn);
    } else if (element.detachEvent) {
        element.detachEvent('on' + eventName, fn);
    } else {
        // 相当于element.onclick = null;
        element['on' + eventName] = null;
    }
}
// removeEventListener(divs[1], 'click', fn);

1.4 DOM事件流

事件流：描述的是从页面中接收事件的顺序

DOM事件流：事件发生时会在元素节点之间按照特定的顺序的传播过程
事件捕获：网景最早提出，由 DOM 最页层节点开始，然后逐级向下传播到到最具体的元素接收的过程
事件冒泡：IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程

DOM事件流

DOM 事件流会经历3个阶段：

捕获阶段
当前目标阶段
冒泡阶段

DOM 事件流

向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡

注意：

Js 代码中只能执行捕获或者冒泡其中的一个阶段
onclick 和 attachEvent 只能得到冒泡阶段
实际开发中我们很少使用事件捕获，我们更关注事件冒泡
有些事件是没有冒泡的，比如 onblur，onfocus，onmouseenter，onmouseleav

<div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, 1);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, 1);
    </script>

2. 事件对象

事件发生后，与事件相关的一系列信息数据的集合产生一个事件对象

事件对象内信息包括比如：

谁绑定了这个事件
鼠标触发事件的话，会得到鼠标的相关信息（如：鼠标位置）
键盘触发事件的话，会得到键盘的相关信息（如：按了哪个键）

2.1 事件对象的使用

事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数，所以在事件处理函数中声明一个形参用来接收事件对象

 div.addEventListener('click', function(e) {
     console.log(e); // 事件对象
 })

2.2 事件对象的兼容性处理

事件对象本身的获取存在兼容问题：

一般浏览器中只需要定义形参 e 就可以获取
在 IE6~8 中获取：window.event （浏览器不会给方法传递参数）

div.onclick = function(e) {
    e = e || window.event; // 兼容性写法
    console.log(e);
}

2.3 事件对象的属性和方法

事件对象属性方法	说明	使用
e.target	返回触发事件的元素	ie9+
e.srcElement	返回触发事件的对象	ie6~8
e.type	返回事件的类型（不带on）	兼容
e.preventDefault()	阻止默认事件	ie9+
e. returnValue	阻止默认事件（值：false）	ie6~8
e.stopPropagation()	阻止冒泡	ie9+
e.cancelBubble	阻止冒泡（值：true）	ie6~8

2.4 e.target 和 this 的区别

事件触发的元素：e.target
事件绑定的元素：this
- 相似方法：e.currentTarget（ie9+）

<ul>
    <li>abc</li>
    <li>abc</li>
    <li>abc</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) { 
        console.log(this); // ul
        console.log(e.target); // li
    });
</script>

获取事件触发的元素兼容性写法

div.onclick = function(e) {
     e = e || window.event;  // 兼容性语句
     var target = e.target || e.srcElement; // 兼容判断
     console.log(target);  // 兼容性输出
}

2.5 阻止默认行为

html中一些标签有默认行为，如a标签被单击后，默认会进行页面跳转

a.onclick = function(e) {
    e = e || window.event;
    e.returnValue = false; // 低版本浏览器
    e.preventDefault(); // 普通浏览器
    // return false;
}

利用 return false 也能阻止默认行为没有兼容性问题

注意：return 后面的代码不执行（只限于传统的注册方式）

2.6 阻止事件冒泡

事件冒泡本身的特性，会带来的坏处，也会带来的好处

标准：e.stopPropagation()
非标准：e.cancelBubble = true;

<div class="father">
    <div class="son">son儿子</div>
</div>
<script> 
    var son = document.querySelector('.son');
    var father = document.querySelector('.father');
	// 点击了 son 不再向上冒泡
	son.addEventListener('click', function(e) {
    	alert('son');
		e.stopPropagation();	// 停止传播
	});
	// father 不会触发
	father.addEventListener('click', function() {
    	alert('father');
	});
</script>

2.7 事件委托

事件委托也称为事件代理，在 jQuery 里面称为事件委派

原理：给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素

简解：给父元素注册事件，处理子元素行为在父元素的事件中执行

作用：

只操作了一次 DOM，提高了程序的性能
动态新创建的子元素，也拥有事件

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
<script>
    // 点击的 li 背景变色
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) {
        for (var i = 0; i < ul.children.length; i++) {
            ul.children[i].style.backgroundColor = '';
        }
        e.target.style.backgroundColor = 'pink';
    })
</script>

3. 常用鼠标事件

鼠标事件	说明
contextmenu	上下文菜单
selectstart	选择事件

// 1. 禁用右键菜单
document.addEventListener('contextmenu', function(e) {
	e.preventDefault();  // 阻止默认行为
})
// 2. 禁止选中文字
document.addEventListener('selectstart', function(e) {
	e.preventDefault();
})

鼠标事件对象 MouseEvent

event 事件对象是事件相关的一系列信息的集合

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

document.addEventListener('click', function(e) {
		// 2. page 鼠标在页面文档的X和Y坐标
    	console.log(e.pageX);
    	console.log(e.pageY);
    })

注意：事件对象的 X 和 Y 都要大写

4. 常用的键盘事件

键盘事件	触发条件	执行优先级
onkeydown	某个键盘被按下时触发	1
onkeypress	某个键盘被按下时触发	2
onkeyup	某个键盘被弹起时触发	3

如果使用 addEventListener 不需要加 on
keypress 不识别功能键，如：Ctrl、shift、左右箭头

键盘事件对象

键盘事件对象，用 e 作形参来接收事件对象

键盘事件对象中的 keyCode 属性可以返回相应键的 ASCII 码值

语法：e.keyCode

keydown 和 keyup 不区分输入字母大小写
keypress 区分大小写，返回不同的 ASCII 值

document.addEventListener('keyup', function(e) {
            console.log(e.keyCode);
        })

posted @ 2020-09-08 20:19 今夜星河漫漫阅读(135) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

溯

“人间理想，追溯漫天星光”