2020/4/26 拖拽与事件委托

最新推荐文章于 2024-09-25 18:15:20 发布

指尖钢琴家

最新推荐文章于 2024-09-25 18:15:20 发布

阅读量150

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq1547511739/article/details/105763899

版权

拖拽（拖拽三剑客）

mousedown(鼠标按下)
记录鼠标按下位置和被拖拽物体的相对距离
var offsetX = e.clientX - node.offsetLeft
var offsetY = e.clientY - node.offsetTop
mousemove(鼠标按下移动)
一致保持相对距离
node.style.left = e.clientX - offsetX + “px”
node.style.top = e.clientX - offsetX + “px”
mouseup(取消拖拽)

事件委托
A委托B去买饭
A发布任务，委托方（收益方）
B执行任务，代理方

事件委托实现步骤

找到当前节点的父节点或者祖先节点
将事件添加到你找到的这个父节点或祖先节点上
找到触发对象，判断触发对象是否是想要的触发对象，进行后续操作

<script type="text/javascript">
   window.onload = function(){
    var oul = document.getElementById("ul1")
    //找到父节点
    oul.onclick = function(ev){
    // 将事件添加到父节点上
     var e = ev || window.event
     //找到触发对象，判断触发对象是否是想要的触发对象，进行后续操作
     var target = e.target || window.event.srcElement;
     if(target.nodeName.toLowerCase() == "li"){
      target.style.backgroundColor="red";
     }
    }
 </script>

<body>
  <ul id="ul1">
   <li>11111</li>
   <li>22222</li>
   <li>33333</li>
   <li>44444</li>
   <li>55555</li>
  </ul>
 </body>