关于事件的前端面试题总结

最新推荐文章于 2021-03-22 21:16:56 发布

廿四桥明月夜

最新推荐文章于 2021-03-22 21:16:56 发布

阅读量528

点赞数

分类专栏：前端面试

前端同时被 2 个专栏收录

106 篇文章

订阅专栏

面试

16 篇文章

订阅专栏

作者：英俊潇洒你冲哥
链接：https://zhuanlan.zhihu.com/p/34760498
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

问题一览

mouseover和mouseenter两个事件有什么区别？
移动端的click事件行为与PC端有什么不同？如何屏蔽掉这个不同？
Event对象中，target和currentTarget的区别？
说一说什么是事件冒泡，如何阻止事件冒泡？如何阻止默认事件？
是否了解移动端的点击穿透，原理及解决方法？
是否了解事件委托？
什么是事件循环？
css3中有哪些属性可以直接影响JS中的事件？（可以讲一下pointer-events和touch-action属性吗）

问题解答

1.mouseover和mouseenter两个事件有什么区别？

二者的区别是mouseenter不会冒泡（bubble）。

详细解释一下

当二者绑定的元素都没有子元素时，二者的行为是一致的。但是二者内部都包含子元素时，行为就不一样了。

在mouseover绑定的元素中，鼠标每次进入一个子元素就会触发一次mouseover事件，而mouseenter只会触发一次。

下面一篇博文中的例子写的很好，我就不自己写代码了。

前端面试题之mouseover和mouseenter的区别 - 优快云博客blog.youkuaiyun.com

2.移动端的click事件行为与PC端有什么不同？如何屏蔽掉这个不同？

移动端的click事件会延迟300ms触发事件回调（只在部分手机浏览器上出现）。

为什么会这样？

因为手机浏览器中需要处理如翻页这样复杂的手势。在用户做翻页或双击放大等操作时，是先将手指触碰到屏幕（此时理应已经触发了click事件），然后再上下移动手指，浏览器开发厂商为了识别这种事件，所以加入了300ms延迟的处理。

解决方法

可以引入Fastclick.js来解决这个问题。它的原理是 FastClick 在检测到touchend事件的时候，会通过 DOM 自定义事件立即触发一个模拟click事件，并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。

3.Event对象中，target和currentTarget的区别？

currentTarget是当事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序附加到的元素，而不是event.target，event.target标识事件发生的元素。

有个简单的验证方法，你会在下面的例子中看到e.currentTarget一直返回的是body元素，而e.target则随着你点击位置的不同而变化

<body>
    <ul id="test">
        <li>
            <ul class="enter-sensitive">
                <li>item 1-1</li>
                <li>item 1-2</li>
            </ul>
        </li>
        <li>
            <ul class="enter-sensitive">
                <li>item 2-1</li>
                <li>item 2-2</li>
            </ul>
        </li>
    </ul>
    <script>
        document.body.addEventListener('click', function (e) {
            console.log(e.target, e.currentTarget)
        })
    </script>
</body>

4.说一说什么是事件冒泡，如何阻止事件冒泡？如何阻止默认事件？

事件冒泡是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接受，然后逐级向上传播到较为不具体的节点（文档）。

阻止事件冒泡的方法。

调用当前事件对象的stopPropagation()方法

阻止默认事件

调用当前事件对象的preventDefault()方法

5.是否了解移动端的点击穿透，原理及解决方法？

有上面click事件300ms延迟的讲解，这个“点击穿透”就能好理解一些。

点击穿透是指在移动端，由于click事件延迟300ms触发，那么如果300ms内，页面显示变化（主要是指DOM的隐藏和显示）的话，会出现实际点击元素触发了touch事件，而300ms后该位置的实际元素又被再次触发了click事件的情况。

下面是我在网上找到的点击穿透的现象详细说明：

点击穿透现象有3种：
点击穿透问题：点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件。
蒙层的关闭按钮绑定的是touch事件，而按钮下面元素绑定的是click事件，touch事件触发之后，蒙层消失了，300ms后这个点的click事件fire，event的target自然就是按钮下面的元素，因为按钮跟蒙层一起消失了。

跨页面点击穿透问题：如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转。
因为 a标签跳转默认是click事件触发 ，所以原理和上面的完全相同。

另一种跨页面点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应位置元素的click事件被触发了。

避免方法在上面的问题中已经说过，可以引入fastclick之类的插件来解决。