浏览器的默认行为以及阻止浏览器的默认行为（兼容）
javascript中的默认行为是指javascript中事件本身具有的属性，如<a>标签可以跳转，文本框 可输入文字、字母、图片路径等，右键浏览器会出现菜单等行为便被称为浏览器的默认行为。
- return false; 退出执行, 所有触发事件和动作都不会被执行.
- 可以用来替代 preventDefault()（取消默认事件）
- ev.preventDefault(); 标准浏览器阻止默认事件,DOM事件使用此方法取消默认事件。
- ev.returnValue = false;
<script type="text/javascript">
var oA=document.getElementsByTagName('a')[0];
oA.onclick=function(ev){
return false;//阻止浏览器的默认行为
var ev=ev||window.event;
ev.preventDefault();//标准
ev.returnValue=false;
}
</script>
非标准浏览器（IE8）阻止默认事件
事件监听器（事件绑定）
target.addEventListener("click", fun, false); --标准浏览器
target.attachEvent("onclick",fun); --IE浏览器（执行顺序按照绑定的反序）
removeEventListener()/detachEvent() 移除事件绑定的参数和添加事件绑定是一致的。注意匿名函数的问题。
- 可以绑定多个函数在一个对象上。
- 执行顺序按照绑定的顺序来（IE反向）。
- 第三个参数是否使用捕捉(反向冒泡)，默认false，为冒泡。
- 标准浏览器和非标准浏览器事件绑定的区别。
DOM 0级和 DOM 2级的区别： - 0级
- onclick/onmousedown 普通事件
- DOM 0级事件取消： 将结果设为空 (null)
- 一个对象上面只能绑定同一个事件(事件处理函数)
- 2级
- 一个元素对象上面可以绑定多个事件处理函数。
- 标准浏览器：addEventListener('事件类型',函数,是否捕获);
- 1.事件类型：click,mouseover,mousedown,keyup
- 2.处理的函数
- 3.是否捕获:true:捕获 false:冒泡
- 区别：
- 普通事件绑定一个事件，事件绑定多个事件
- 普通事件取消赋值为null,事件绑定removeEventListener,detachEvent
- 注意事件类型。事件绑定不带on
事件捕获
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
Netscape团队提出的另一种事件流叫做事件捕获,即事件开始时由最不具体的节点应该 早接收 到事件，而最具体的节点应该最后接收到事件。
事件委托机制
利用冒泡机制，将子元素事件委托给父元素执行。
<body>
<input type="text" /> <br />
<button>创建li</button>
<ul id="ul1">
<li>aaaaaaaaaaaaaaaa</li>
<p>pppppppppppppppppp</p>
<li>bbbbbbbbbbbbbbbb</li>
<p>pppppppppppppppppp</p>
<li>cccccccccccccccc</li>
</ul>
<script type="text/javascript">
var oInput=document.getElementsByTagName('input')[0];
var oBtn=document.getElementsByTagName('button')[0];
var oUl=document.getElementById('ul1');
事件处理函数能够做到的事情，事件绑定肯定可以完成，反之不行。
oBtn.onclick=function(){
var cli=document.createElement('li');
cli.innerHTML=oInput.value;
oUl.appendChild(cli);
};
选择所有的li，添加点击事件，输出li里面的文本
var aLi=document.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].onclick=function(){
alert(this.innerHTML);
}
}
事件委托：利用冒泡的原理，将子元素的事件委托父元素来完成。
ev.target:当前点击的元素对象。
ev.srcElement:当前点击的元素对象。//ie
ev.type:事件类型，onclick
oUl.onclick=function(ev){
var ev=ev||window.event;
alert(ev.target);
var ele=ev.target||ev.srcElement;//当前点击的元素对象
alert(ele.nodeName);//节点的元素名称，全部大写的名称
if(ele.nodeName=='LI'){
alert(ele.innerHTML);
}
}
document.onclick=function(ev){
console.log(ev);
}
</script>
</body>
拖拽效果（onmousedown/onmousemove/onmouseup）
拖拽的过程中，短线的位置是不变的，鼠标的位置是随着move时候发生变化，通过可变的move 和不可变的短线求盒子的位置
应用
1．鼠标拖拽轨迹
2．弹出窗口拖拽（百度的登录框）
3．扩展案例：拖拽轨迹回放
综合应用
1．九宫格拖拽交换位置
网友评论