axios和addEventlistener引发的面试题

527 阅读3分钟

axios是开发中经常用到的,是基于ES6的promises实现的HTTP网络请求,具体用法就不在这里说了,掘金有很多讲axios的文章,addEventlistener这个知识点大家做业务逻辑功能开发的时候,用到的应该比较少,但是学习js的时候,也肯定学过,现在有两个知识点(面试题)

1.axios为啥能在浏览器运行,也能在node环境中运行?

2.addEventlistener添加事件和onclick有啥区别?

这两道题虽然看着比较简单,隐藏的知识点可以说是不少,下面就来解析一下这两道题

axios为啥能在浏览器运行,也能在node环境中运行

这种问题,第一个想法就是axios肯定在底层做了兼容,面试的时候,面试官肯定要问通过什么判断是浏览器或者是node环境,浏览器大家肯定熟悉,前端天天接触,看netWork,浏览器是基于XMLHttpRequest

image.png

想搞清楚这个问题,就要看源码了,我下载了axios的源码,大致的看了一下

image.png

和我想的一样,显示判断了XMLHttpRequest的存在,else if后面判断的是process,process是node进程的一个API,另外,看到这个检测,Object.prototype.toString.call为啥要用这个,call不是改变了this的指向了吗,他和apply有啥区别,这里为啥不用apply等等问题,一个知识点套着更多的知识点(这里不做讨论了)

addEventlistener添加事件和onclick有啥区别

先看一下Javascript高级程序设计对addEventlistener的定义

DOM2 Events 为事件处理程序的赋值和移除定义了两个方法:addEventListener()和removeEventListener()。这两个方法暴露在所有 DOM 节点上,它们接收 3 个参数:事件名、事件处理函数和一个布尔值,true 表示在捕获阶段调用事件处理程序,false(默认值)表示在冒泡阶段调用事件处理程序。

onclick大家肯定用的比较多,click这种都是冒泡,相当于自下而上的,而捕获,跟冒泡相反,是自上而下的

在一个div中点击

冒泡:div->body->html->document 捕获:document ->html -> body -> div

image.png

<body>
  <div id="box1">
    1111111
    <div  id="box2">
      2222222
      <div  id="box3">
        3333333
        <div  id="box4">
          4444444
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  let box1 = document.getElementById("box1")
  let box2 = document.getElementById("box2")
  let box3 = document.getElementById("box3")
  let box4 = document.getElementById("box4")
  box1.addEventListener("click",()=>{
    console.log("box1")
  },true)
  box2.addEventListener("click",()=>{
    console.log("box2")
  },true)
  box3.addEventListener("click",()=>{
    console.log("box3")
  },true)
  box4.addEventListener("click",()=>{
    console.log("box4")
  },true)
</script>

当我点box4的时候,控制台输出的是

image.png

自上而下的输出。

刚才说的是捕获和冒泡的区别,捕获是用过addEventlistener去实现的,当然,addEventlistener也可以实现冒泡,另外,addEventlistener和onclick还有用法上的区别。

1.addEventlistener可以给你个DOM添加多个相同的事件,执行顺序按照代码顺序去执行,onclick如果有多个,后面的会覆盖前面代码。

2.在移除上,通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()并传入与添加时同样的参数来移除。这意味着使用 addEventListener()添加的匿名函数无法移除。而onclick直接定义为null就行。

3.addEventListener为DOM2级事件绑定,onclick为DOM0级事件绑定。

大多数情况下,事件处理程序会被添加到事件流的冒泡阶段,主要原因是跨浏览器兼容性好。把事件处理程序注册到捕获阶段通常用于在事件到达其指定目标之前拦截事件。如果不需要拦截,则不要使用事件捕获。