WEBPAPI事件详解及应用

htmL:

 

 

小课堂总结：

一、注册事件的三种方式：onclck(普通)，addEventListener(可以注册多个，不覆盖，IE9以后才支持)，attachEvent（跟前面效果一样，老版本：IE6-10支持）；

二、移除事件： btn.onclick = null；，removeEventListener('事件名', 函数名（不能匿名函数）)

三、addEventListener的第三参数效果(默认值是false;)：

1、参数为false从内到外执行：事件冒泡

2、参数为true从外到内执行：事件捕获

四、 事件委托：原理冒泡事件；

1、e （event）事件参数, window.event 老版本浏览器兼容

2、e.target是真正触发的事件；

3、e.currentTarget事件处理所属的对象相当于this；

4、e.type 事件名称

5、。。。。。。多个可以打印console.log(e)

6、e.clientX ,e.clientY  根据鼠标指针在浏览器 的可视区域的坐标

7、e.pageX,e.pageY 根据鼠标指针在页面 坐标（+滚动条

 8、获取滚动条滚动的距离

            console.log(document.documentElement.scrollLeft)

            console.log(document.documentElement.scrollTop)

9、 偏移量上左offsetLeft，offsetTop（就是一块区域的周围的距离）

10、 键盘事件  keydown(键盘按下) keyup(键盘松开)

            console.log(e.keyCode)键盘码