web 语义化

  • 正确的标签做正确的事情
  • 页面内容结构化
  • 无CSS样子时也容易阅读,便于阅读维护和理解
  • 便于浏览器、搜索引擎解析。 利于爬虫标记、利于SEO

html语义化标签包括 body, article, nav, aside, section, header, footer, hgroup, 还有 h1-h6 address等。

快速理解web语义化

DOM 事件流

先捕获再冒泡

  • addEventListener的第三个参数默认为false,为 true 时在捕获时触发。element.addEventListener(event, function, useCapture)
  • e.stopPropagation():既可以阻止事件冒泡,也可以阻止事件捕获,也可以阻止处于目标阶段。兼容 ie 写法 window.event.cancelBubble = true;
  • e.preventDefault():取消默认事件

事件委托

优点:

  1. 减少事件注册,节省内存
  2. 减少了dom节点更新的操作,处理逻辑只需在委托元素上进行。如:新添加的li不用绑定事件,删除li时,不需要进行元素与处理函数的解绑。

缺点:

  1. 事件委托基于冒泡,对于onfoucs和onblur等事件不支持
  2. 层级过多,冒泡过程中,可能会被某层 event.stopPropagation 等阻止掉(建议就近委托)

results matching ""

    No results matching ""