json 拖拽

1、梳理知识点

1、事件对象   e || event 

2、事件对象的属性  

   鼠标事件对象 ： 坐标属性 ：  clientX  clientY  pageX  pageY   offsetX  offsetY

   键盘事件对象 ： 获取按键值 keyCode  

3、事件流 事件冒泡 和 事件 捕获 

4、阻止冒泡 ： e.stopPropagation()   e.cancelBubble = true   

5、事件监听 addEventListener( "click",function(){},true )

 

2、阻止浏览器的默认行为  

浏览器的默认行为: 

    图片默认被拖拽   

    选中的文字默认被拖拽

    右键单击浏览器出现菜单

    submit按钮默认跳转

    超链接标签 默认跳转

阻止浏览器的默认行为 ：    

        e.preventDefault?e.preventDefault():e.returnValue=false;  或者   return false;

 

3、事件委托（事件代理）

委托 ： 让别人做

事件委托 ： 将某个事件委托给另一个元素( 委托给父级元素  这里的父级可以是直接父元素 也可以是爷爷 曾爷爷... )

 

事件委托好处：

    1、为某些元素的父级元素添加事件，提高程序的执行效率

    2、动态创建的元素 添加事件时，可以将事件添加在动态创建的函数体外面 

委托实现 ： 

    父级元素.onclick = function(){ ... }

    父级元素.addEventListener("事件",function(){ ... })

 

获取事件源兼容：

  target = e.target || e.srcElement;  

不是所有的事件都可以实现委托，不能实现冒泡的事件就不能实现委托

 

4、json 对象

什么是json(javascript object notation) ：  javascript 的对象表示法

    json是一种轻量级的数据交换格式，用于跨平台的数据交换 

    跨平台 ： 客户端和服务器之间的数据交换

作用 ：存储数据 

json定义 ： 

 var json = {

        键 : 值,

        键 : 值,

        .....

    }

 说明 ： json中的键 用双引号括起来  值可以是任意类型的数据  

    严格的json值不会出现function (){...}   严格的json键用双引号括起来

 获取json数据 ：

    json.键  或  json["键"]

 json对象的遍历 ： 使用 for ...in 

            

5、拖拽

需要事件 ： onmousedown  onmousemove  onmouseup

拖拽思路 ：

鼠标按下 onmousedown ： 记录鼠标按下时的内部偏移量

    var disx = e.offsetX;

    var disy = e.offsetY;

鼠标移动 onmousemove ： 设置被拖拽元素的left 和 top值  

    left = e.pageX - disx;

    top = e.pageY - disy;

鼠标抬起 onmouseup ： 取消移动事件

    对象.onmousemove = null

 

获取window窗口的宽度 ： window.innerWidth   高度 ： window.innerHeight