JavaScript 基础学习-事件委托&拖拽原理☆☆☆ 今天的内容(事件委托) 重点!! ☆☆☆ 用自己的理解, 用白

这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战

☆☆☆ 今天的内容(事件委托) 重点!! ☆☆☆

可作为初学者的学习路线, 可参考一下, 学习进度也不是特别赶! 持续更新中

结合自己的理解, 用白话文简单又全面概括 JavaScript 学习过程中的基础知识点, 方便加深理解!

开始今天的学习吧! '打牢地基才能筑高楼'! 加油! 认真对待!!

1、梳理知识点

事件：
事件对象： event || evt
阻止事件冒泡： e.stopPropagation? e.stopPropagation() : e.cancelBubble = true
阻止浏览器的默认行为: e.preventDefault ? e.preventDefault() : e.returnValue = false return false;
鼠标事件对象坐标：
- pageY 距离文档窗口
- clientY 距离可视窗口
- offsetX offsetY
键盘事件按键值：keyCode ctrlKey e.keyCode== 13 && e.ctrlKey
事件流：
- 事件冒泡子--父
- 事件捕获父--子
事件监听： addEventListener

obj.addEventListener('click', function () {}, true)

2、事件委托（重点）

2.1 定义

委托：让别人去做
事件委托：将某个事件委托给其他元素执行

2.2 委托好处：

为多个同样的元素添加同一个事件时，可以通过委托的方式将这个事件添加到这些元素的父级元素上，目的提高程序的执行效率
动态创建的元素可以通过委托的方式在创建元素的函数体外部添加事件

使用事件委托时，必须要获取事件源：事件对象.target || 事件对象.srcElement (兼容写法)

2.3 委托实现机制：

利用事件冒泡或捕获机制
不是所有的事件都能够实现事件委托 onload onfocus onblur

2.4 委托实现方式:

  第一种 ：  父级元素.事件 = function（）{}
  第二种 ：  父级元素.addEventListener("",function(){  })

3、`json`

什么是 json？ JavaScript 的对象表示法 JavaScript object notation
json 对象作业：存储数据交换数据
json 是一种轻量级的数据存储格式主要用于 web 客户端和服务器之间的数据交换
json 对象定义：
- var json = { }
- json 数据由 键值对 格式组成
- 严格的 json 键必须用 双引号 括起来
- 严格的 json 值不可以是 function(){}

var json = {
  sname: 'jack',
  age: 17,
}

json 数据读取操作：
- json 对象.键或 json["键"]
遍历 json 对象必须用 for in

4、拖拽思路

第一步：首先为拖拽的元素添加鼠标按下事件 onmousedown

记录鼠标按下时距离拖拽物体的内部偏移量

disx = e.offsetX
disy = e.offset

第二步：要想让拖拽的物体动起来，需要添加鼠标移动事件 onmousemove(为文档添加移动事件)

鼠标移动时，需要改变拖拽物体的 left 和 top 值（拖拽物体一定要定位）

left = e.pageX - disx
top = e.pageY - disy

第三步：要想停止拖拽需要添加鼠标抬起事件 onmouseup

停止移动：将 onmousemove 设置为 null

document.onmousemove = null

5、scroll 家族属性

scrollLeft ：获取页面水平方向滚走的距离
scrollTop ：获取页面垂直方向滚走的距离
获取方式 (兼容)：

    document.documentElement.scrollTop || document.body.scrollTop  在onscroll事件中获取

设置页面滚走距离：

document.documentElement.scrollTop = document.body.scrollTop = 值

预告: 加油, 追梦人

【预告】: 接下来学习正则以及开始接触实际工作中部分需求的实现啦

学习就是一个不断进行的过程, 坚持下去, 定有收获!

日积月累, 巩固基础, 早进大厂!

坚持很不容易, 坚持下来更不容易, 你真棒!

Calm Down & Carry On!

JavaScript 基础学习-事件委托&拖拽原理

1、梳理知识点

2、事件委托（重点）

2.1 定义

2.2 委托好处 ：

2.3 委托实现机制 ：

2.4 委托实现方式:

3、json

4、拖拽 思路

第一步：首先为拖拽的元素添加鼠标按下事件 onmousedown

第二步 ： 要想让拖拽的物体动起来，需要添加鼠标移动事件 onmousemove(为文档添加移动事件)

第三步 ： 要想停止拖拽 需要添加鼠标抬起事件 onmouseup