前端(十三):JS事件委派、事件绑定、事件传播、滚轮事件、...

绝代码农

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

<!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。

[JavaScript] 前端(十三):JS事件委派、事件绑定、事件传播、滚轮事件、...

相关帖子

《第一行代码：Android篇》学习笔记（十三）

iOS全埋点解决方案-数据存储

Android 子线程 UI 操作真的不可以？

小身材有大作用——光模块寿命分析（二）

“整洁架构”和商家前端的重构之路

如何查看Linux系统版本？常用命令有哪些？

种草 Vue3 中几个好玩的插件和配置

appcrash事件怎么解决 win10appcrash事件解决方法

JavaScript怎样实现点击出现图片效果

利用html+js触发弹窗事件

绝代码农 LV4