1.阻止默认行为（preventDefault）
阻止默认行为方法：
btn.onclick=function (){
return false;
}
2.绑定事件
（我们写页面一定要样式(css)跟行为（js）分开写）
（1）节点.事件=事件处理程序
行内事件属性调用函数
（2） 事件监听(三个参数)
addEventListener(事件，回调函数事件处理程序，true/false)
true：是捕获
false：是冒泡（默认值）
回调函数：封装名称“callBack”;
语法案例：
document.addEventListener("click"（这里不需要加on）,function（）{函数执行体}，true)；
什么是事件冒泡？
执行过程是事件的由内到外执行；
什么是事件捕获？
捕获的过程是由外到内执行；
true，捕获。false，冒泡。默认false。
封装好以后的调用方法
对象（ele）. addEventListener（事件（eve）没有on的 ， 回调函数 (callBack)）；
举例：
addEvent($id("send"),"click"，function(){
执行函数代码
})
事件冒泡：
什么是“事件冒泡”呢？假设这里有一杯水，水被用某种神奇的方式分成不同颜色的几层。这时，从最底层冒出了一个气泡，气泡会一层一层地上升，直到最顶层。而你不管在水的哪一层观察都可以看到并捕捉到这个气泡。好了，把“水”改成“DOM”，把“气泡”改成“事件”。这就是“事件冒泡”。
气泡带上了某种信息，会告诉其经过的每一层自己是在哪一层产生的。JavaScript的事件确实会带着这个属性。当程序捕获一个事件的时候，它会知道这个事件来自于页面上哪个元素。 事件委托也就是利用这个原理。
3.事件监听与传统事件绑定区别
（1） 传统事件绑定不能有多个，后面的会覆盖前面的。
事件监听可以同时绑定多个同一个事件，先后触发。
（2）传统事件绑定只有冒泡
事件监听除了执行冒泡还能执行捕获。
（同一元素既有捕获监听又有冒泡监听，那么执行顺序是先捕获后执行冒泡）
（3）捕获和冒泡现象发生的前提条件
父子元素都绑定了 同一个事件。
4.事件委托
（事件委托优点：因为绑定事件次数少所以代码效率高，引用类型也少，对内存空间影响少）
a.减少了事件绑定浏览器重绘的次数，调高了程序的执行效率
b.减少了事件处理程序
c.可以解决动态添加的元素节点无法绑定事件的问题
(1).把当前元素事件，委托给父级执行（并不一定是直接父元素）。
利用e.target（目标）属性来实现委托
会根据事件的触发对象来决定对象是谁
e.target.nodeName可以跟句节点来获取节点元素名
例子：
防止识别错误所以转换成小写 ==“元素名”
e.target.nodeName.toLowerCase( )=="li"
(2).兼容性问题
兼容IE8及以下兼容问题
var target =e.target|| e.srcElement;
5.json
是一种数据格式：用来与后台进行数据交互
这种数据格式可以用什么方式存在：（json格式比较严格）
a.可以用数组的方式存在
[{"键":"值"}，]
b.以对象的方式存在
{
"键":"值",
"键":"值"
}
6.拖拽
三个动作
a.鼠标按下
onmousedown
b.鼠标移动
onmousemove
c.鼠标抬起
onmouseup
例子：
var box=document.getElementById("box");
box.onmousedown=function(e){
var e=e||event
var x=e.offsetX;
var y=e.offsetY;
document.onmousemove=function(e){
var e =e||event
var l=e.pageX-x;
var t=e.pageY-y;
box.style.left=l+"px";
box.style.top=t+"px";
return false;
document.onmouseup=function(e){
document.onmousemove=null;
}
}
}
7.完美拖拽（边界处理）
需要减去元素的宽高，才能保证元素部分边界不会出可是窗口
var left = document.documentElement.clientWidth - 100;
var top = document.documentElement.clientHeight - 100;
(1)第一种写法
if (l < 0) {
l = 0;
} else if (l > left) {
l = left;
}
if (t < 0) {
t = 0;
} else if (t > top) {
t = top;
}
(2)第二种写法
两种判断情况都写在三目运算中
l=l<0?0:(l>left?left:l);
t=t<0?0:(t>top?top:t);
8.scroll家族
onscroll滚动事件
scrollTop；
x: document.body.scrollLeft + document.documentElement.scrollLeft;
scrollLeft;
y: document.body.scrollTop + document.documentElement.scrollTop;
9.offset家族
x: window.pageXOffset,
y: window.pageYOffset,
pageXOffset 和 pageYOffse
属性返回文档在窗口左上角水平和垂直方向滚动的像素，这些属性是只读的。
offsetWidth;包含边框样式和内边距
获取 内容 + padding + 边框
clientWidth;包含内边距
内容 + padding 都可以获取元素非行内样式值 值类型Number
boxoffsetTop：
a.距离窗口可视区到顶部的距离，如果有父元素，则包含父元素的顶部的边框和内边距
b.如果有父元素有定位，根据你父元素最近的
网友评论