2024年Web前端最新前端提高篇(九十六)：jQuery事件高级使用及事件委托，2024最新华为Web前端校招面试题

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

• 2

• 1.1 on(事件, 处理函数)

  // 点击li，输出该li的文本内容：

  /*

  $(‘li’).click(function(){

  console.log( $(this).text());

  })

  */

  //上面的点击事件，效果相当于：

  $(‘li’).on(‘click’, function(){

  console.log( $(this).text());

  })

  1.2 on(事件, 执行子元素，事件处理函数)

  当我添加一个按钮，点击按钮时，添加li，按钮的功能写在绑定点击事件的后面，就像这样：

  

  效果：

  新add的li没有被绑定上点击事件，

  原因：因为文档从上到下解析，给原来的3个li绑定点击事件的代码先运行了，后面才动态新增的li

  所以，就要用到事件委托，将事件委托给父元素，当子元素的事件被触发时，由于没有处理程序，会冒泡给父元素，让父元素来处理

  //用事件委托

  $(‘ul’).on(‘click’, ‘li’, function(){

  console.log( $(this).text());

  })

  这样，即使button动态生成li的代码在后面，点击动态新增的li时，也能输出li对应的文本了

  

  有关动态生成的元素的事件绑定，均需考虑委托

  1.3 on(事件, 执行子元素，数据，事件处理函数)

  还可以传递额外的数据给函数

  //用事件委托

  $(‘ul’).on(‘click’, ‘li’, {name:‘ccy’}, function(e){

  console.log( $(this).text());

  console.log(e.data); //事件中的data对象存储着传递进去的数据

  })

  事件中的对象：

  

  2. off()：解绑事件

  ---

  2.1 off(事件)

  //解除button上的click事件

  $(‘button’).off(‘click’)

  2.2 off(事件，处理函数名)

  当同一个事件有多个处理函数，想要解绑其中一个时使用

  注意写的时处理函数的名称，不是再写一次匿名函数

  如：

  

  这样是不能解绑的，第二个click事件的处理函数和解绑里写的函数是两个函数，不能起到解绑的作用

  要像这样，才能解绑打印888的处理函数：

  $(‘button’).on(‘click’, function(){

  $(‘ul’).append(‘

• ’ + $(‘li’).length + ‘
• ’)

  })

  /* 第二个点击事件的处理函数 */

  function test(){

  console.log(888);

  }

  $(‘button’).on(‘click’, test)

  $(‘button’).off(‘click’,test)

  3. one()：只执行一次事件

  ---

  绑定的事件只执行一次

  当用户有需要某个功能时，才展示相应的html结构，不需要时不展示，可以设计成点击之后有一个弹窗的效果，节省性能并提高网页的加载速度；当展示之后，关闭这个小弹窗，用户可能又一次需要这个功能，又点击一次，所以展示之后，不把弹窗html结构删除，也节省了重复加载同一个资源的性能

  用one()和事件委托on结合实现

  4. trigger()触发事件

  ---

  触发被选元素的指定事件类型

  4. 1 执行元素.trigger(事件)

  当一个元素上绑定了很复杂的事件，另一个元素也想绑定同样的效果，如p标签绑定了一个事件，点击改变标签内的文本；来了一个button标签，也想要点击之后，改变p标签的文本，就可以使用trigger实现

  click me

  click me

  Vue 编码基础

  2.1.1. 组件规范

  2.1.2. 模板中使用简单的表达式

  2.1.3 指令都使用缩写形式

  2.1.4 标签顺序保持一致

  2.1.5 必须为 v-for 设置键值 key

  2.1.6 v-show 与 v-if 选择

  2.1.7 script 标签内部结构顺序

  2.1.8 Vue Router 规范

  Vue 项目目录规范

  2.2.1 基础

  2.2.2 使用 Vue-cli 脚手架

  2.2.3 目录说明

  2.2.4注释说明

  2.2.5 其他

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】