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 : 左边框的宽度