js高级程序设计第14章（小结）

1.事件委托

事件委托是解决事件处理程序过多的一种方法。它利用事件冒泡，管理目标元素的最高层元素的事件处理程序，刻意对某一类事件做到统一管理。

它的优势在于下面：

• 只需添加一个事件处理程序，引用的DOM节点操作更少，所花费的时间也更少

• 在为使用事件委托时，可能需要创建很多个函数，每一个函数都是一个对象，会占用内存，使用事件委托就可以减少内存的占用，提升整体的的性能

• 可以随时为也爱你页面添加事件处理程序，不需要等待DOMContentLoaded或者load事件加载完成，只要元素呈现在页面上，就可以添加

  <ul id="myLink">
    <li id="li1">li1</li>
    <li id="li2">li2</li>
    <li id="li3">li3</li>
  </ul>
  

  // 利用时间的冒泡特性,直接为其父元素添加事件
  const myLink = document.querySelector("#myLink");
  myLink.onclick = (e) => {
    console.log(e.target.value);
  }
  

  注意：上面打印输出不能使用currentTarget属性，因为该属性是指向当前处理事件程序的元素即ul元素。而target属性指向的是目标元素，即li元素。

  额外补充：在浏览器写在页面之前移除所有事件处理程序，因为卸载页面时并不会自动移除事件处理程序，需要手动移除（如：btn.onclick=null）。

2.提交表单和重置表单

提交表单的几种方式：

• 通用提交按钮: <input type="submit" value="提交" />

• 自定义提交按钮: <button type="submit">提交</button>

• 图像按钮: <input type="image" src="a.png" />

• 不需要按钮，直接提交：通过获取form表单调用submit()，这里要注意在该调用方法时，不会触发submit事件，还要保证在提交之前对表单进行校验。

  注意：在提交表单时，可能会出现多次提交，如第一次提交后没反应，继续点击提交按钮，这样服务器会受到重复的请求，尤其在购物结算中存在一定的风险。这里解决的方法有两个：1.在第一次提交按钮之后禁用提交按钮。2.利用onsubmit事件处理程序取消后续的提交操作。

  在表单提交时，一般需要阻止表单的默认提交的行为，可以使用event.preventDefault()事件。

重置表单的几种方式

• 通用重置按钮：<input type="reset" value="重置" />
• 自定义重置按钮: <button type="reset">重置</button>
• 不需要按钮，直接重置：通过调用form表单的reset()方法即可

3.取得表单的字段

取得表单字段的方法：通过form的elements方法，然后通过下标索引或者属性(通过属性取得的是NodeList列表)可以取得表单中包含的字段。

<form method="post">
  <ul>
    <li><input name="sex" type="radio" value="male" />男</li>
    <li><input name="sex" type="radio" value="female" />女</li>
  </ul>
</form>

const form = document.forms[0];
console.log(form.elements.length); // 2
const firstField = form.elements[0];
const newFirstField = form.elements["sex"][0];
console.log(firstField === newFirstField); // true

当然也可以通过每个字段的id或者属性取得，但是相对上面的方法，在需要进行遍历时，使用form表单的elements属性会更加方便。

后面还会陆续学习表单相关的细节知识，一起探讨。