事件、事件取消、事件流、阻止事件冒泡、阻止默认行为、键盘事件、事件委托

事件

• 事件: 可以被JavaScript监听到的行为. 元素可以产生某些可以触发JavaScript函数的事件.
• 事件函数: 当事件触发时调用的函数.
• 事件对象: 当事件触发时, 浏览器会把本次事件相关的所有信息封装在一个事件对象中, 包含事件类型, 事件触发对象, 位置信息等.

box.onclick = function (event) {
    event = event || window.event; // 标准浏览器默认第一个参数为事件对象,低版本IE需要window.event获取事件对象
    console.log(event); // MouseEvent {isTrusted: true, screenX: 123, screenY: 172, clientX: 123, clientY: 101, …}
    console.log(event.type); // 事件类型
    console.log(event.target || event.srcElement); // 触发事件的元素 低版本IE:srcElement
    console.log(event.clientX, event.clientY); // 鼠标位置 相对于可视区
    console.log(event.pageX, event.pageY); // 鼠标位置 相对于页面
    console.log(event.screenX, event.screenY); // 鼠标位置 相对于屏幕
    console.log(event.ctrlKey, event.altKey, event.shiftKey); // 功能键
}

事件的绑定

• DOM0级事件: 元素.事件 = 事件函数. 如果使用DOM0级事件给同一元素添加相同的事件会覆盖.
• DOM2级事件：元素.addEventListener(事件类型(不加on), 事件函数, 是否捕获); addEventListener给同一元素添加相同的事件会按照代码顺序执行.
• 低版本IE: 元素.attachEvent(事件类型(加on), 事件函数); attachEvent给同一元素添加相同事件时会倒序执行.

// DOM0级事件: 元素.事件 = 事件函数. 如果使用DOM0级事件给同一元素添加相同的事件会覆盖.
var box = document.getElementById('box');
box.onclick = function () {
    console.log('click1');
}
box.onclick = function () {
    console.log('click2');
}

// DOM2级事件：元素.addEventListener(事件类型(不加on), 事件函数, 是否捕获); addEventListener给同一元素添加相同的事件会按照代码顺序执行.
var box = document.getElementById('box');
box.addEventListener('click', function () {
    console.log('click1');
});
box.addEventListener('click', function () {
    console.log('click2');
});

// 低版本IE: 元素.attachEvent(事件类型(加on), 事件函数); attachEvent给同一元素添加相同事件时会倒序执行.
var box = document.getElementById('box');
box.attachEvent('onclick', function () {
    console.log('click1');
});
box.attachEvent('onclick', function () {
    console.log('click2');
});

• 事件绑定兼容

// 给元素添加事件 ele:元素 eventType:事件类型(不加on) callback:事件函数
function bind(ele, eventType, callback) {
    if (ele.addEventListener) {
        ele.addEventListener(eventType, callback);
    } else {
        ele.attachEvent('on' + eventType, callback);
    }
}

事件取消

• DOM0级事件取消 box.onclick = null;
• DOM2级事件的取消 box.removeEventListener('click', callback);
• DOM2级:IE 取消 box.detachEvent('onclick', callback);

// 给元素添加事件 ele:元素 eventType:事件类型(不加on) callback:事件函数
function bind(ele, eventType, callback) {
    if (ele.addEventListener) {
        ele.addEventListener(eventType, callback);
    } else {
        ele.attachEvent('on' + eventType, callback);
    }
}
// 给元素取消事件
function unbind(ele, eventType, callback) {
    if(ele.removeEventListener) {
        ele.removeEventListener(eventType, callback);
    } else {
        ele.detachEvent('on' + eventType, callback);
    }
}
bind(box, 'click', callback);
unbind(box, 'click', callback);

事件流

• 事件流: 事件在节点之间的传递过程.
• 事件流分为: 事件捕获阶段, 确定目标阶段, 事件冒泡阶段
• 使用DOM2级事件 addEventListener(事件类型, 事件函数, 是否捕获), 第三个参数为是否捕获, 如果为true,表示捕获阶段, 如果为false表示冒泡阶段.

阻止事件冒泡

• JavaScript的事件默认冒泡到window, IE8-冒泡到document.

• 阻止事件冒泡:

  • e.stopPropagation(); 标准浏览器

  • e.cancelBubble = true;IE浏览器

  • e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;

阻止默认行为

• DOM0级事件：return false;
• DOM2级事件：addEventListener：事件对象.preventDefault();
• DOM2级事件：attachEvent：事件对象.returnValue = false;

// DOM0级事件：`return false;`
// DOM2级事件：addEventListener：`事件对象.preventDefault();`
// DOM2级事件：attachEvent：`事件对象.returnValue = false;`
var a = document.querySelector('a');
a.onclick = function () {
    console.log('click');
    return false;
}
a.addEventListener('click', function (e) {
    e = e || window.event;
    console.log('addEventListener');
    e.preventDefault();
});
a.attachEvent('onclick', function (e) {
    e = e || window.event;
    console.log('attachEvent');
    e.returnValue = false;
});

键盘事件

• 键盘事件分为：按下和抬起
• 按下：onkeydown
• 抬起：onkeyup
• event.key：按键
• event.keyCode：按键的编码 0:48 a:65

事件委托

• 把事件添加在父元素上，利用事件冒泡，当子元素触发事件时会冒泡到父元素，在父元素的事件对象中找到具体触发事件的子元素，让该子元素处理具体的业务即可。

// // 点击li输出对应的内容
// var lis = document.getElementsByTagName('li');
// for (var i = 0; i < lis.length; i++) {
    
    
//     lis[i].onclick = function () {
    
    
//         console.log(this.innerHTML);
//     }
// }
// var newli = document.createElement('li');
// newli.innerHTML = 'li6';
// // 后添加的元素没有该事件
// document.querySelector('ul').appendChild(newli);

var ul = document.querySelector('ul');
ul.onclick = function (e) {
    
    
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target.innerHTML);
}
var newli = document.createElement('li');
newli.innerHTML = 'li6';
// 后添加的元素有该事件
ul.appendChild(newli);