事件
1.mouseover和mouseenter两个事件有什么区别?
二者的区别是mouseenter不会冒泡(bubble)。
详细解释一下
当二者绑定的元素都没有子元素时,二者的行为是一致的。但是二者内部都包含子元素时,行为就不一样了。
2.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>
3.说一说什么是事件冒泡,如何阻止事件冒泡?如何阻止默认事件?
事件冒泡是指 事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播到较为不具体的节点(文档)。
**大部分情况冒泡是有用的 **
阻止事件冒泡的方法。
outer.onclick = function(e){
console.log(111);
}
inner.onclick = function(e){
console.log(222);
方法一:
e.stopPropagation()
方法二:
e.cancelBubble = true
}
阻止默认事件
调用当前事件对象的preventDefault()方法
4.是否了解事件委托?
事件的委派:将所有的子元素的事件,绑定到其公共的父元素
事件委托是指利用“事件冒泡”,只通过指定一个事件处理程序,来管理某一类型的所有事件。也就是说,当此事件处理程序被触发时,通过当前事件对象中的target来确认究竟是在哪个元素触发的事件,从而达到一次注册 处理多个元素触发事件的目的。
5.什么是事件循环
事件循环是一个大概念,想要讲透不是几句话可以说清的。当然如果面试官问到了,他的初衷也绝对不是想让你透彻的讲解一遍,只是想确认面试者对于JS运行机制的了解程度。
笼统地概括一下。
JavaScript是单线程的, 当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件,然后再去宏任务队列中取出一个事件。同一次事件循环中,微任务永远在宏任务之前执行。