[JavaScript初级面试]8. WEB API - 事件

题目

  • 编写一个通用的事件监听函数
  • 描述事件冒泡的流程
  • 无限下拉的图片列表,如何监听每个图片的点击

事件绑定

document.getElementById(‘btn‘).addEventListener(‘click‘, event => {
  console.log(‘clicked‘)
})

// event.target 触发事件的元素
// event.preventDefault() 阻止默认行为

事件冒泡

基于DOM树形结构;
事件顺着出发元素向上冒泡;
应用场景:时间代理

// event.stopPropagation() 阻止冒泡,只在当前事件触发节点响应

事件代理

<div id = "div3">
  <a href="#">a1</a>
  <a href="#">a2</a>
  <a href="#">a3</a>
  <a href="#">a4</a>
  <button>加载更多...</button>
</div>
// 点击加载更多,可以产生更多链接;点击每个链接触发不同的动作
const div = document.getElementById(‘div3‘)
// 统一把子元素的点击事件代理到父元素上,减少代码量
// 减少浏览器内存占用,不用每个a标签上绑定事件
// 不可以滥用,瀑布流比较适用
div.addEventListener(‘click‘, event => {
  event.preventDefault()
  const target = event.target
  if(target.nodeNamme === ‘A‘) // 如果是A标签,排除按钮button触发的click事件
  // if(target.matches(selector)判断选择器是不是当前的触发元素
    alert(target.innerHTML)
})

[JavaScript初级面试]8. WEB API - 事件

上一篇:SpringBoot使用Servlet


下一篇:JavaScript 字符串(上)