原理: + DOM2级事件绑定,绑定的方法一般不是匿名函数 + 能给当前元素的某个事件行为绑定多个方法 * */
/** * 事件对象 * 给当前元素的某个事件行为绑定方法,当前事件行为触发,不仅会把绑定的方法执行, * 并且还会给方法默认传递一个参数,而这个实参就是事件对象 * * * */
let body = document.body;
/** * 事件对象 * + 鼠标事件对象 MouseEvent * + clientX/clientY 鼠标触发距离当前窗口的 X/Y轴坐标 * + pageX/pageY 鼠标触发距离BODY的 X/Y轴坐标 * + type 事件类型 * + target/srcElement 获取当前事件源 * + path 传播路径 * + ev.prevemtDefault() / ev.returnValue = false 阻止默认行为 * + ev.stopPropagation() / ev.cancelBubble = true 阻止冒泡传播 * + ... */
// body.onclick = function(ev){ // console.log(ev); // } // let n = null;
// body.addEventListener('click',function(ev){ // n = ev; // console.log(ev,0); // })
// body.addEventListener('click',function(ev){ // console.log(ev === n); // true // console.log(ev,1); // })
/** * 键盘事件对象 * KeyboardEvent * + key / code 存储按键名字 * + which / keyCode 获取当前按键的 键盘码 * + 方向键 "左 37 上 38 右 39 下 40 " * + Space 32 * + BackSpace 8 * + Del 46 * +... * + altKey 是否按下 alt 键(组合按键) * + ctrlKey 是否按下 ctrl 键(组合按键) * + shiftKey 是否按下 shift 键(组合按键) */ // document.onkeydown = function(ev){ // console.log(ev); // }
/** * 手指事件对象 * TouchEvent * + changedTouches / targetTouches / touches 都是用来记录手指信息,常用的是changedTouches * + 手指按下 、移动 、 离开屏幕 changedTouches 都存储了对应的信息 * 而 touches 在手指离开屏幕后,就没有任何的信息了 * => 获取的结果都是一个 TouchList 集合,记录每一根手指的信息 * + ev.changedTouches[0] 第一根手指的信息 * + clientX / clientY * + pageX / pageY * * */
// document.body.ontouchstart = function(ev){ // // console.log(ev); // let point = ev.changedTouches[0]; // console.log(point); // }
/** * Event 普通事件对象 * */ // window.onload = function(ev){ // console.log(ev); // }