js中的事件（下）

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

　　右键单击浏览器，会弹出一个菜单

　　拖拽文字

　　超链接 空链接--刷新   

　　submit按钮 刷新页面

　　阻止浏览器的默认行为 ：

　　　　e.preventDefault ? e.preventDefault() : e.returnValue=false;

 

2、事件绑定  -- 如何为某个元素添加某个事件

　　1）<input type='button' onclick = 'fn()'>

　　2）obj.onclick = function(){

　　　　}

　　3）通过  addEventListener()   绑定事件   ----  事件监听 

　　　　用法 ：obj.addEventListener("事件去掉on",function(){})   

　　　　　　第一个参数  事件  

　　　　　　第二个参数  事件处理程序

　　　　　　第三个参数  布尔值  默认  false   控制事件冒泡还是事件捕获    true -- 事件捕获

　　事件监听的好处 ：  可以为同一个对象添加多个同样的事件 

                 可以根据事件监听的方法确定到底是事件的冒泡还是事件捕获 

 

　　了解  ： ie的事件监听：  attachEvent()   不能实现捕获

　　　　obj.attachEvent("onclick",function(){

 

　　　　})

3、事件冒泡和事件捕获的执行顺序（扩展）

　　如果一个元素 既有事件冒泡，又有事件捕获，先捕获 后冒泡

4、js事件委托

　　事件委托 ： 又叫事件代理 ，将事件添加到某些元素的父元素或者祖先元素元素上  委托父级或祖先元素完成事件操作

　　事件委托机制 ：js事件委托，其实是使用了冒泡的原理，从点击的元素开始，会向父元素传播事件

 

　　这样做的好处

　　　　1）对于大量要处理的元素，不必为每个元素都绑定事件，只需要在他们的父元素上绑定一次即可，提高性能。

　　　　2）可以处理动态插入dom中的元素，直接绑定的方式是不行的

　　获取事件源：

   　　 target = e.target || e.srcElement

 

5、json对象 

　　json作用 : 存储数据    跨平台的数据存储格式   轻量级存储数据 --- 存储数据量小

　　相对于普通的js{对象}来说，

　　　　区别1：属性名字需要用双号号包含,

　　　　区别2: 属性值如果是字符串那么也使用双引号。

　　json数据的存和取  

　　　　定义json ： 

　　　　　　var json = { "键":"值","键":"值",.... } 

　　　　json值的获取 ： 

   　　　　 json对象.键 

  　　　　  json对象["键"]

　　json的遍历 ： json没有length属性，不能用for循环遍历   只能用for...in  遍历

 

　　json中的值可以是数组

   　　　　 var json = {

    　　　　   "url" : ["1.jpg","2.jpg"],

     　　　　   "con" : ["图片一","图片二"]

 　　　　   }

   　　 for..in 中嵌套for

 

　　数组中存放json ： 

 　　　　  [{"uname":"uname","pwd":111},{"uname":22,"pwd":22},{"uname":33,"pwd":999}]

  　　　　 for 循环中嵌套for .. in

6、拖拽

　　拖拽思路 ： 

  　　  涉及的事件 --- onmousedown   onmousemove   onmouseup

　　1）要想实现拖拽效果，首先要有鼠标按下事件  

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

　　　　　　var disx = e.offsetX  ||  e.layerX

　　　　　　var disy = e.offsetY  ||  e.layerY

　　2）鼠标移动  

　　　　设置被拖拽物体的left和top值

　　　　　　left = e.pageX - disx

　　　　　　top = e.pageY - disy

　　3）鼠标抬起 

　　　　取消鼠标移动事件

　　　　　　document.onmousemove = null  /  ""

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

7、scorll家族属性

　　scrollTop ： 获取页面垂直方向滚走的距离

　　scrollLeft ：  获取页面水平方向滚走的距离

　　一般scrollTop 与 滚动条事件连用

　　　　window.onscroll = function(){

   　　 获取页面滚走的距离：

   　　　　 document.body.scrollTop || document.documentElement.scrollTop

　　　　}

8、盒子模型

　　offsetWidth : clientWidth + 左右border

　　offsetHeight : clientHeight + 上下border

　　offsetTop : 元素的外边框距离offsetParent的内边框的垂直偏移量

　　offsetLeft : 元素的外边框距离offsetParent的内边框的水平偏移量

　　offsetParent : dom元素的offsetParent的值是谁，取决于它的祖先元素是否有定位属性(absolute,relative,fixed)。

        如果有这个定位属性那么直接offsetParent就获取这个。否则没有定位属性，那么继续上上一级祖先元素去查找。如果查找到body的所有祖先元素都没有定位属性。直接把body获取到。

　　扩展 

　　　　clientWidth : 内容+左右padding

　　　　clientHeight : 内容+上下padding

　　　　clientTop : 上边框的宽度

　　　　clientLeft : 左边框的宽度