【前端·面试】你可能不知道的JavaScript基础题（一）

第一次执行以下JavaScript代码：document.getElementById("parent").addEventListener("click",function(){alert(`parenteventtriggered,`+this.id);});document.getElementById("child").addEventListener("click",function(){alert(`childeventtriggered,`+this.id);});第二次执行另一组JavaScript代码：document.getElementById("parent").addEventListener("click",function(e){alert(`parenteventtriggers,`+e.target.id);});document.getElementById("child").addEventListener("click",function(e){alert(`childeventtriggers,`+e.target.id);});第三次再执行一组：document.getElementById("parent").addEventListener("click",function(e){alert(`parenteventtriggers,`+e.target.id);},true);document.getElementById("child").addEventListener("click",function(e){alert(`childeventtriggered,`+e.target.id);},true);问题如下：点击id为child的div后，这三个JavaScript代码的执行结果是什么？？题外话本题涉及的内容和知识点都很基础，无外乎事件捕获，事件触发，事件冒泡，以及addEventListener接口中第三个参数的含义。只要你扎实地掌握了JavaScript的基础知识，那么这道题就是分题，轻松愉快；但是一旦这方面的知识出现了盲点，就变成了一个命题，可以做到，并且珍惜。DOM元素事件执行顺序HTML页面DOM元素的事件执行顺序一般分为三个阶段：事件捕获事件触发事件冒泡借用网上的一张图来说明这个过程：dom标准事件流的触发顺序是：首先捕获然后冒泡，即当一个dom事件被触发时，会先捕获该事件，捕获到事件源后，通过事件传播进行事件冒泡。在浏览器中，默认会进行事件冒泡，即我们一般无法观察到事件捕获阶段，比如onclick等事件。如果我们想观察事件的捕获阶段，就需要使用addEventListener接口来实现。关于addEventListener()addEventListener的基本语法是：target.addEventListener(type,listener,useCapture);type事件类型。侦听器事件触发匿名函数的实际执行。userCapture可选，类型为Boolean，表示是否执行事件捕获阶段。关于这个和listener中的target当EventTarget在处理一个事件的时候，向EventTarget注册了一个EventListener，它不会立即被触发，而是有可能在事件流后面的事件触发阶段被触发，例如，它可能被添加在捕获阶段，然后在冒泡阶段触发。一般来说，this的值是触发事件的元素的引用。当使用addEventListener()为元素注册事件时，句柄中this的值是元素的引用。它与传递给句柄的事件参数的currentTarget属性的值相同。解决问题通过上面的分析，我们应该可以得到那个问题的答案：第一个结果是：先弹出“子事件触发，child”，再弹出“父事件触发，parent”。第二次的结果是：先弹出“子事件触发，子”，再弹出“父事件触发，子”。第三次的结果是：先弹出“父事件触发，子”，再弹出“子事件触发，子”。题目总结起来不难，涉及到的知识点比较初级，但是细节一定要注意！~~本文到此结束，感谢阅读！~学习有趣的知识，认识有趣的朋友，塑造有趣的灵魂！大家好，我是〖编程三昧〗的作者王隐，我的公众号是《编程三昧》，欢迎关注，希望大家多多指教！你来，怀揣期待，我以墨香迎接你！您归来，不分得失，只送回味！知识与技能并重，内功与外功并重，理论与实践两手抓，两手都要用力！