JS中addEventListener的用法

事件模型

这是一个完整的事件流： 事件捕获----处于目标----事件冒泡

注意：事件捕获由于浏览器兼容问题用的比较少

 

事件处理程序（addEventListener）

格式为：element.addEventListener(type, handle, false);

type: 事件触发类型，如click,keypress等等，下面我们详细的讲讲事件类型！！

handle:事件处理函数，事件出发后，定义可能发生的变化！！

false: 表示事件冒泡模型，一般来说都是false。

栗子如下所示（只展示关键代码）：

var flag = false;
btn.addEventListener('click',function(){
   senction.style.backgroundColor = flag?'#ddd':'#bbb'
},false);

效果图如下图所示：

在这两种背景颜色之间来回转换。

事件对象

将handle事件处理函数中的function(){}适当的修改为：function（event）{conso;le.log(event)}；则将会输出该事件的全部信息，截图如图所示：

包括触发事件时鼠标所点击的位置，是否取消冒泡事件（cancelBubble）：这就是上面的addEventListener最后一项是false的原因了。

 

事件类型

事件类型整体来说可以分为三大类：

1）鼠标类

click                        点击

mousedown            按下

mouseup                松开

mouseenter            划进

mouseleave           划出

mouseover            划进

mouseout              划出

mousemove          移动

上面两个划进划出，区别在于是否对子元素有影响，具体可以去百度查一查用法的差异

 

2）键盘类

keydown         按下（按所有键都会触发）

keypress         按下（按字符集触发）

keyup              松开

两者设计的初衷就不同。

keypress 就是用来检测用户输了啥字符的，而 keydown 则是单纯的检测用户是否按了键盘上的按键，所以 keypress 常用。

两者事件对象上的 keyCode 值也不同。

keyCode是一个代码，与键盘上的一个键对应。在 keypress 事件中，这个 keyCode 还与 ASCII码对应，比如keyCode 等于 105 ，就是按了 i。

最后说下，判断一个前端专业不专业，就问下他开发界面的时候有没有考虑过键盘事件。

 

3）UI类

load                 加载

unload             重载

resize             改变浏览器尺寸

scroll               使用滚动条

 

 

本博客属于作者原创，如需转载请注明出处