文章目录


事件的委派

事件的委派：指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
      window.onload = function () {
        var u1 = document.getElementById('u1')
        var btn01 = document.getElementById('btn01')
        btn01.onclick = function () {
          var li = document.createElement('li') // 创建一个li
          li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>"
          u1.appendChild(li) // 将li添加到ul中
        }
        var allA = document.getElementsByTagName('a') // 获取所有的a
        u1.onclick = function (envent) {
          event = event || window.event
          if (envent.target.className == 'link') {
            alert('我是ul的单击响应函数')
          }
        }
      }
    </script>
  </head>
  <body>
    <button id="btn01">添加超链接</button>
    <ul id="u1" style="background-color: #bfa">
      <li>
        <p>我是p元素</p>
      </li>
      <li><a href="javascript:;" class="link">超链接一</a></li>
      <li><a href="javascript:;" class="link">超链接二</a></li>
      <li><a href="javascript:;" class="link">超链接三</a></li>
    </ul>
  </body>
</html>

事件的绑定

“对象.事件 = 函数”的形式绑定响应函数，不能绑定多个，如果绑定了多个，后面的会覆盖前面的

addEventListener()：为元素绑定响应函数,多个绑定的函数按顺序执行

事件的传播

传播阶段


捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件。
目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。


拖拽

拖拽的流程：


当鼠标在被拖拽元素上按下时，开始拖拽：onmousedown。
当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove。
当鼠标松开时，被拖拽元素固定在当前位置：onmouseup。