JavaScript课程——Day12（事件基础、事件绑定与取消、DOM事件流、事件委托行为、事件委托、键盘事件、滚轮事件）
1、事件基础
1.1、事件函数
- 当事件被触发时调用的函数就是事件函数
function fn() { console.log('我执行了'); } div.onclick = fn; // fn是一个事件函数 fn(); // fn不是事件函数
1.2、事件对象
- 事件对象：当一个事件发生的时候，跟这个事件有关的一些信息保存在一个全局的event对象中，这个对象就是事件对象。
- IE和谷歌：全局的event对象
- 标准浏览器：事件函数的第一个函数
- 兼容：IE9及以上，用事件函数的第一个参数，IE8及以下，用全局的event
var box = document.getElementById('box'); box.onclick = function (ev) { // console.log(event); // IE和谷歌 // console.log(ev); // 标准浏览器 var ev = ev || event; // 兼容 console.log(ev); // 事件对象 // 事件对象详情 console.log(ev.type); // 事件类型 // console.log(ev.target); // 事件源，IE8及以下不支持 // console.log(ev.srcElement); // 事件源，IE8及以下支持 var target = ev.target || ev.srcElement; // 事件源兼容 target.style.background = 'yellow'; console.log(ev.clientX, ev.clientY); // 鼠标相对可视区的距离 console.log(ev.pageX, ev.pageY); // 鼠标相对文档的距离（IE8及以下不支持） console.log(ev.altKey); // 事件发生的时候，alt键是否按下 console.log(ev.shiftKey); // 事件发生的时候，shift键是否按下 console.log(ev.ctrlKey); // 事件发生的时候，ctrl键是否按下 }
2、事件绑定与取消
2.1、事件绑定
- 格式：元素.addEventListener(不要on的事件名,函数,是否捕获); IE9及以上支持
- 格式：元素.attachEvent(要on的事件名,函数); IE8及以下支持
<script>
// 需求：给同一个元素的同一个事件添加不同的处理函数
var box = document.getElementById('box');
function fn1() {
console.log(this === window);
console.log(1);
}
function fn2() {
console.log(2);
}
// 赋值的写法，后面的覆盖前面的
box.onclick = fn1;
box.onclick = fn2;
// ---------------------------------------------
// IE9及以上支持
// Listener 监听
// 格式：元素.addEventListener(不要on的事件名, 函数, 是否捕获);
// 第三个参数默认为false，false冒泡，true捕获
box.addEventListener('click', fn1, false);
box.addEventListener('click', fn2, false);
// ----------------------------------------
// IE8及以下
// 格式：元素.attachEvent(要on的事件名, 函数);
box.attachEvent('onclick', fn1);
box.attachEvent('onclick', fn2);
// ---------------------------------------------
// 区别：
// 1、ie 没有捕获，标准有捕获
// 2、ie 的事件名称前面有 on，标准没有
// 3、标准的会根据事件的顺序正序执行，IE逆序执行
// 4、ie 的 this 是 window，标准的是触发这个事件的对象
// ---------------------------
// 兼容原理(浏览器能力判断)
// console.log(box.addEventListener); // IE9及以上返回一个函数，IE8及以下返回undefined
if (box.addEventListener) {
// IE9及以上
box.addEventListener('click', fn1, false);
box.addEventListener('click', fn2, false);
} else {
// IE8及以下
box.attachEvent('onclick', fn1);
box.attachEvent('onclick', fn2);
}
// --------------------------------
// 事件绑定封装
function bind(ele, event, callback) {
if (ele.addEventListener) {
// IE9及以上
ele.addEventListener(event, callback, false);
} else {
// IE8及以下
ele.attachEvent('on' + event, callback);
}
}
bind(box, 'click', fn1);
bind(box, 'click', fn2);
</script>
2.2、取消事件绑定
标准浏览器
- 绑定格式：元素.addEventListener(不要on的事件名,函数,是否捕获);
- 解绑格式：元素.removeEventListenter(不要on的事件名,函数,是否捕获);
IE8及以下
- 绑定格式：元素.attachEvent(要on的事件名,函数);
- 解绑格式：元素.detachEvent(要on的事件名,函数);
<script>
// 需求：给同一个元素的同一个事件添加不同的处理函数
var box = document.getElementById('box');
function fn1() {
console.log(1);
}
function fn2() {
console.log(2);
}
// 赋值的写法，后面的覆盖前面的
// box.onclick = fn1;
// box.onclick = null; // 取消事件绑定
// ---------------------------------------------
// IE9及以上支持
// 格式：元素.addEventListener(不要on的事件名, 函数, 是否捕获);
// 解绑：元素.removeEventListener(不要on的事件名, 函数, 是否捕获);
box.addEventListener('click', fn1, false);
box.addEventListener('click', fn2, false);
box.removeEventListener('click', fn2, false);
// ----------------------------------------
// IE8及以下
// 格式：元素.attachEvent(要on的事件名, 函数);
// 解绑：元素.detachEvent(要on的事件名, 函数);
box.attachEvent('onclick', fn1);
box.attachEvent('onclick', fn2);
box.detachEvent('onclick', fn2);
// --------------------------------
// 事件绑定封装
function bind(ele, event, callback) {
if (ele.addEventListener) {
// IE9及以上
ele.addEventListener(event, callback, false);
} else {
// IE8及以下
ele.attachEvent('on' + event, callback);
}
}
// 解绑
function unbind(ele, event, callback) {
if (ele.removeEventListener) {
// IE9及以上
ele.removeEventListener(event, callback, false);
} else {
// IE8及以下
ele.detachEvent('on' + event, callback);
}
}
bind(box, 'click', fn1);
bind(box, 'click', fn2);
unbind(box, 'click', fn2); // 解绑
</script>
3、DOM事件流
3.1、事件流
- 事件流：当事件发生的时候，事件会按一定的顺序在根节点和各元素之间传播，所经过的节点，都会出发对应的事件。
- 事件流分为三个阶段：
- 1、捕获阶段：从最外层的document > html > body > box1 > box2 > box3的过程，从外到里
- 2、处于目标阶段：到达了box3的上面
- 3、冒泡阶段：从最里面的box3 > box2 > box1 > body > html > document的过程，从里到外
<div id="box1"> <div id="box2"> <div id="box3"></div> </div> </div>
var box1 = document.getElementById('box1'); var box2 = document.getElementById('box2'); var box3 = document.getElementById('box3'); function fn() { console.log(this.id); } box1.onclick = fn; // 这种形式的绑定，是在冒泡阶段触发 box2.onclick = fn; box3.onclick = fn;
3.2、捕获与冒泡
- 冒泡，事件在子元素发生，子元素先处理，然后子元素传递到父元素
- 捕获，事件在子元素发生，先经过父元素，父元素先处理，再分发到子元素
var box1 = document.getElementById('box1'); var box2 = document.getElementById('box2'); var box3 = document.getElementById('box3'); function fn() { console.log(this.id); } box1.addEventListener('click', fn, false); // false 事件会在冒泡阶段触发 box2.addEventListener('click', fn, false); // false 事件会在冒泡阶段触发 box3.addEventListener('click', fn, false); // false 事件会在冒泡阶段触发 box1.addEventListener('click', fn, true); // true 事件会在捕获阶段触发 box2.addEventListener('click', fn, true); // true 事件会在捕获阶段触发 box3.addEventListener('click', fn, true); // true 事件会在捕获阶段触发 // -------------------------------- // 元素.事件 和 attachEvent只有冒泡（冒泡是默认存在的） // addEventListener可以选择捕获或冒泡
3.3、阻止冒泡
- 标准浏览器：event.stopPropagation();
- IE浏览器：event.cancelBubble = true;
<style> span { display: block; width: 100px; height: 30px; background-color: green; text-align: center; line-height: 30px; color: white; cursor: pointer; } #box { width: 200px; height: 500px; background-color: yellow; display: none; } </style> </head> <body> <span>标题</span> <div id="box"></div> <script> // 阻止冒泡 // Propagation 传播 cancel取消 Bubble泡泡 // 标准浏览器：event.stopPropagation(); // IE 浏览器：event.cancelBubble = true; var span = document.querySelector('span'); var box = document.getElementById('box'); // 1、点击span，box展示 span.onclick = function (ev) { var ev = ev || event; box.style.display = 'block'; // ev.stopPropagation(); // 标准浏览器 // ev.cancelBubble = true; // IE 浏览器 stopPropagation(ev); // 阻止冒泡的兼容 } // 2、点击页面的任何地方，box隐藏 document.onclick = function () { box.style.display = 'none'; } // 阻止冒泡的兼容 function stopPropagation(ev) { if (ev.stopPropagation) { ev.stopPropagation(); } else { ev.cancelBubble = true; } } </script> </body>
4、事件委托行为
某些事件，即赋予了元素特殊的操作
- 元素.事件添加的事件：return false;
- 元素.addEventListener()：ev.preventDefault();
- 元素.attachEvent()：ev.returnValue = false;
<body style="height: 3000px;"> <a href="https://www.baidu.com">百度</a> <script> var a = document.querySelector('a'); a.onclick = function (ev) { var ev = ev || event; preventDefault(ev); } // 阻止默认行为的兼容 function preventDefault(ev) { if (ev.preventDefault) { ev.preventDefault(); } else { ev.returnValue = false; } } </script> </body>
5、事件委托
事件委托：也叫事件代理，利用事件冒泡原理，只指定一个事件处理程序，就可以管理某一类型的所有事件。
实现：事件加给父级，找到事件源，对事件源进行判断，然后做相应的操作
好处：
- 节省性能
- 新添加的元素也有之前的事件
<ul> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> </ul>
var ul = document.querySelector('ul'); var li = ul.getElementsByTagName('li'); // 通常做法（新添加的元素，没有之前的事件） // for (var i = 0; i < li.length; i++) { // li[i].onclick = function () { // this.style.background = 'red'; // } // } // 事件代理 ul.onclick = function (ev) { var ev = ev || event; var target = ev.target || ev.srcElement; // 事件源 if (target.nodeName === 'LI') { target.style.background = 'yellow'; } } // 添加一个li var item = document.createElement('li'); item.innerHTML = '我是新来的'; ul.appendChild(item);
6、键盘事件
6.1、键盘事件
- onkeydown 键盘按下
- onkeyup 键盘抬起
在能响应用户输入的元素上触发（表单元素、document都可以响应键盘事件）
var input = document.querySelector('input'); // 按下 input.onkeydown = function () { console.log(this.value); } // 抬起 input.onkeyup = function () { console.log(this.value); }
6.2、键盘事件和事件对象
var input = document.querySelector('input'); // 抬起 input.onkeyup = function (ev) { var ev = ev || event; console.log(ev); console.log(ev.keyCode); // 键码 按键的键码 // a 65 z 90 回车 13 esc 27 空格 32 console.log(ev.key); // 键值 IE8及以下不支持 console.log(ev.altKey); console.log(ev.shiftKey); console.log(ev.ctrlKey); }
7、滚轮事件
标准和IE：
- 事件：onmousewheel
- 方向：ev.wheelDelta 上：120/150 下：-120/-150
火狐：
- 事件：DOMMouseScroll 必须用addEventListener绑定
- 方向：ev.detail 上：-3 下：3
var box = document.getElementById('box'); var h = box.clientHeight; function fn(ev) { var ev = ev || event; if (wheelDelta(ev) > 0) { h--; } else { h++; }; box.style.height = h + 'px'; } bind(box, 'mousewheel', fn); bind(box, 'DOMMouseScroll', fn); // 滚轮方向的兼容：上：120 下：-120 function wheelDelta(ev) { if (ev.wheelDelta) { return ev.wheelDelta; } else { return -40 * ev.detail; } } // 事件绑定封装 function bind(ele, event, callback) { if (ele.addEventListener) { // IE9及以上 ele.addEventListener(event, callback, false); } else { // IE8及以下 ele.attachEvent('on' + event, callback); } }
