DOM事件
要做一个动态的网页,那就必须要网页拥有动态的活动,因此对于网页上的DOM对象,我们需要获取其中的事件来做出相应的活动。
节点名.addEventListener('事件名', function () {});
利用此方法可以获取节点上发生的事件,并在之后的function中对事件做出反应。
具体事件如下
- 焦点事件
- focus:表单组件(Input, Textarea, etc..)获取焦点事件
- blur: 表单组件(Input, Textarea, etc..)失去焦点事件
- 鼠标事件
- click: 点击事件
- dblclick: 双击事件
- mousedown: 在元素上按下任意鼠标按钮。
- mouseenter: 指针移到有事件监听的元素内。
- mouseleave: 指针移出元素范围外(不冒泡)。
- mousemove: 指针在元素内移动时持续触发。
- mouseover: 指针移到有事件监听的元素或者它的子元素内。
- mouseout: 指针移出元素,或者移到它的子元素上。
- mouseup: 在元素上释放任意鼠标按键。
- 键盘事件
- keydown: 键盘按下事件
- keyup: 键盘释放事件
- 视图事件
- scroll: 文档滚动事件
- resize: 窗口放缩事件
- 资源
- load: 资源加载成功的事件
可以通过以上方法结合DOM操作中更改样式属性的方法,来实现动态化
事件冒泡
在JavaScript有一种情况,当你同时在父亲节点和子节点同时设置监听事件,当你触发了子节点的监听事件,父节点的事件也会被触发,这种现象叫做事件冒泡。
利用这种原理,我们可以实现事件委托—即点击任意子节点都能触发父亲节点的事件
当然,如果我们想阻止这样的情况也是可以的
likeBtn.addEventListener('click', function(e) {
// 点击事件
e.stopPropagation()//阻止冒泡
以此来解决问题
除了事件冒泡,JavaScript也存在事件捕捉
捕获和冒泡是完全相反的,冒泡是从当前元素沿着祖先节点往上冒泡,而捕获是从根 HTML 节点开始
依次移动到当前元素。
我们上面使用的addEventListener
是在冒泡阶段监听事件,如果想在捕获阶段监听事件,我们需要传
递第三个参数为true
, 代码如下
dom.addEventListener('click', function () {}, true);