阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Javascript 事件机制

      问题

      Javascript 事件机制

      答案

      事件触发三阶段

      • document 往事件触发处传播,遇到注册的捕获事件会触发
      • 传播到事件触发处时触发注册的事件
      • 从事件触发处往 document 传播,遇到注册的冒泡事件会触发 事件触发⼀般来说会按照上⾯的顺序进⾏,但是也有特例,如果给⼀个⽬标节

      点同时注册冒泡和捕获事件,事件触发会按照注册的顺序执⾏

      // 以下会先打印冒泡然后是捕获
      node.addEventListener('click',(event) =>{
          console.log('冒泡')
      },false);
      node.addEventListener('click',(event) =>
          console.log('捕获 ')
      },true)
      

      注册事件

      通常我们使⽤ addEventListener 注册事件,该函数的第三个参数可以是布尔值,也可 以是对象。对于布尔值 useCapture 参数来说,该参数默认值为 false 。 useCapture 决定了注册的事件是捕获事件还是冒泡事件

      ⼀般来说,我们只希望事件只触发在⽬标上,这时候可以使⽤ stopPropagation 来阻⽌ 事件的进⼀步传播。通常我们认为 stopPropagation 是⽤来阻⽌事件冒泡的,其实该函 数也可以阻⽌捕获事件。 stopImmediatePropagation 同样也能实现阻⽌事件,但是还 能阻⽌该事件⽬标执⾏别的注册事件

      node.addEventListener('click',(event) =>{
          event.stopImmediatePropagation()
          console.log('冒泡')
      },false);
      // 点击 node 只会执⾏上⾯的函数,该函数不会执⾏
      node.addEventListener('click',(event) => {
          console.log('捕获 ')
      },true)
      

      事件代理

      如果⼀个节点中的⼦节点是动态⽣成的,那么⼦节点需要注册事件的话应该注 册在⽗节点上

      <ul id="ul">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      </ul>
      <script>
      let ul = document.querySelector('##ul')
      ul.addEventListener('click', (event) => {
      console.log(event.target);
      })
      </script>
      

      事件代理的⽅式相对于直接给⽬标注册事件来说,有以下优点

      • 节省内存
      • 不需要给⼦节点注销事件

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录