增加js事件高级应用和Ajax基础

Eished · Eished · commit db8bc1da07e8 · 2019-12-24T17:27:55.000+08:00
diff --git a/readme.md b/readme.md
@@ -4185,28 +4185,122 @@
 - 阻止默认事件
   - 普通写法：return false;
   - 例子1：屏蔽右键菜单
+    - ` document.oncontextmenu = function () { return false; }`
     - 弹出自定义右键菜单
   - 例子2：只能输入数字的输入框
+    - ` oTxt.onkeydown = function (ev) { return false; }`
     - keydown、keyup 事件区别
 
 ### 拖拽
 
 - 简单拖拽
   - 拖拽原理
-    - 距离不变
-    - 三个事件
+    - 鼠标按下位置到 div 距离不变
+    - 三个事件： onmousedown onmousemove onmouseup
 - 靠谱拖拽
-  - 原有拖拽的问题
+  - 原有拖拽的问题：移动太快鼠标会移出 div
     - 直接给 document 加事件
   - FireFox 下，空 Div 拖拽Bug
-    - 阻止默认事件
+    - 阻止默认事件：onmousedown {return false}
   - 防止拖出页面
-    - 修正位置
+    - 修正位置：在可视区内
 
 ## JS 事件高级应用
 
+### 事件绑定
+
+- IE 方式：不兼容 IE9 以上
+  - attachEvent(事件名称, 函数)，绑定事件处理函数
+  - detachEvent(事件名称, 函数)，接触绑定
+- DOM 方式：不兼容 IE7 以下
+  - addEventListener(事件名称, 函数, 捕获)
+  - removeEventListener(事件名称, 函数, 捕获)
+- 何时使用绑定
+- 绑定事件和 this
+- 绑定匿名函数，会无法删除
+
+### 高级拖拽
+
+- 复习拖拽原理
+
+  - 距离不变
+  - 三个事件
+
+- 限制范围
+
+  - 对位置进行判断
+    - 例子1：不能拖出窗口的 div
+    - 例子2：不能拖出指定窗口的 div
+  - 磁性吸附
+
+- 图片拖拽
+
+  - 阻止默认事件
+
+- 文字选中
+
+  - 阻止默认事件
+  - IE 下拖动有问题
+    - 事件捕获：`.setCapture()` 只兼容IE
+    - 取消捕获：`.releaseCapture()` 
+
+- 与 DOM 配合
+
+  - 带框的拖拽
+  - 保留原有位置的拖拽
+
+- 代码：
+
+  ```
+  
+  ```
+
+  
+
+### 自定义滚动条
+
+- 拖拽
+
+  - 只有横向拖拽
+  - 限制范围：范围的大小
+  - 计算比例：当前值/最大值
+
+- 控制其他对象
+
+  - 例子1：控制物体的大小
+  - 例子2：控制物体的透明度
+  - 例子3：控制文字滚动
+
+- 代码：
+
+  ```HTML
+  
+  ```
+
+  
+
 ## Ajax 基础
 
+### Ajax 是什么
+
+- 什么是服务器
+  - 网页浏览过程分析
+  - 如何配置自己的服务器程序
+- 什么是 Ajax
+  - 无刷新数据读取
+  - 用户注册、在线聊天室
+    - 异步、同步
+
+### 使用 Ajax
+
+- 基础：请求并显示静态 TXT 文件
+  - 字符集编码
+  - 缓存、阻止缓存
+- 动态数据：请求 JS（或 json ）文件
+  - eval 的使用
+  - DOM 创建元素
+- 局部刷新
+
 ## Ajax 中级
 
 ## JS 面对对象基础
