day12 事件监听/事件委托/拖拽/JSON对象

5. 事件绑定的三种方式

(1) 通过HTML元素进行绑定

点击
var fun = function(){

}

(2) 通过JS获取HTML元素进行绑定

var oBtn = document.querySelector('button');
oBtn.onclick = function(){
    
} 

(3) 通过事件监听

语法：

元素.addEventListener(‘去掉on的事件’,回调函数,[是否捕获]);

• 可选参数是否捕获，默认是false 冒泡
• addEventListener() 主流高版本浏览器

• 当冒泡与捕获同时存在时:先捕获后冒泡

      document.addEventListener('click',function(){
          alert('document冒泡');
      })     
      
      window.addEventListener('click', function(){
          alert('window冒泡');
      })
      document.addEventListener('click',function(){
          alert('document捕获');
      },true)     
      
      window.addEventListener('click', function(){
          alert('window捕获');
      },true)
  //结果：window捕获-》document捕获=》document冒泡=》window冒泡

事件监听的好处：

（1）可以为一个元素，多次绑定相同的事件(类似于代码的合并)

    document.addEventListener("click",function(){
        alert(1);
    });
    
    document.addEventListener("click",function(){
        alert(2);
    });
//结果: 1->2

(2) 程序员可以使用事件监听的方式 确定触发的过程是冒泡还是捕获

    document.addEventListener("click",function(){
        alert("document");
    },true);
    
    window.addEventListener("click",function(){
        alert("window");
    },true);
//结果: window->document

事件监听兼容:

IE的事件监听：元素.attachEvent("带on的事件",回调函数）

• 没有第三个参数
• 参数不省略on
• 默认冒泡

设计兼容函数(考虑函数的功能，参数，返回值)

6. 事件委托

委托：让别人去做

事件委托：某个事件让其他元素来完成

例如：页面上有1000个li，为每一个li添加单击事件。

解决办法：使用委托只需要在li父级上加一次事件就可以。

//委托的实现方法：
父级元素.事件 = function(){
    //获取事件源  当前的操作元素
    var target = e.srcElement||e.target;
    console.log(target.tagName);//'LI'
}

事件委托的好处

1) 通过父元素实现子元素的事件响应，从而大大提高效率

2) 可以为新添加的元素，提前绑定事件

7. 拖拽(考点)

拖拽思路： onmousedown onmousemove onmouseup

(1).首先为需要拖拽的对象添加一个onmousedown事件

记录：鼠标点击某个对象时的内部偏移量

e.offsetX e.offsetY

(2).鼠标在文档上移动

要想让操作的元素动起来，该元素必须有定位

移动的过程，实际上改变，元素的left和top

(3).停止移动，需要触发onmouseup鼠标抬起时，取消移动

document.onmousemove = null;

拖拽的边界问题？？：

8. JSON对象

• json: 轻量级存储工具，是一种跨平台的数据交互格式
• 作用： 存储数据

• json对象定义:

  var obj = {"key1":value1,..."keyN":valueN};

说明:严格的json对象 键必须用双引号引起来； json的值可以是任意类型的

• json 操作 赋值和取值

  • 取值：json.键
  • 遍历取值 for in

• JSON对象->JSON字符串 :必须是严格模式的字符串和对象

  • JSON.stringify(json对象)

  var json = {"name":"老王","age":"18"};
  var str = JSON.stringify(json);
  console.log(str,typeof str);//string

• JSON字符串-> JSON对象

  • JSON.parse(json字符串)

  var str1 = '{"name":"老王","age":"18"}';
  var json1 = JSON.parse(str1);
  console.log(json1,typeof json1);