Event事件2

1，阻止默认行为；

2，事件监听

3，事件流之事件捕获

4，事件委托

阻止默认行为

浏览器中有很多默认行为，比如当点击a标签后，会发生链接的跳转、当点击鼠标的右键时，

会显示右键菜单等。

有些时候，浏览器的默认行为会影响到我们的程序，所以我们需要阻止默认行为。

return false 就是阻止默认行为的解决方案。

阻止超链接：

　　<a href = "1.html" id = "a1">链接</a>

<script>

　　a1.onclick = function(){

　　return false; //阻止跳转　　

　　}

</script>

备注：

1.也可以用event.preventDefault()阻止；但低版本的IE有兼容问题，不推荐使用。

2.return confirm("您确定要跳转到xxx页面吗？");

阻止右键菜单：

　　<script>

　　　document.oncontextmenu = function(){

　　alert("右键被按下");

　　return false ;

}

</script>

阻止文字被选中：

　　<script>

　　document.onmousedown = function(){

　　return false;

　　}

</script>

阻止粘贴、复制、剪切；

你可以尝试在该文本域中进行文字上的粘贴，复制，剪切操作。

<input  type = "text" value = "粘贴，复制，剪切" onpaste = "return false" oncopy = "return false" oncut = "return false"/>

阻止表单提交，重置：

<form onsubmit = "return false" onreset = "return false"></form>

事件监听：
要想让JavaScript对用户的操作做出响应，首先要对dom元素绑定事件处理函数。
所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。
在JavaScript中，有三种绑定事件的方法：
1：在dom元素中直接绑定；
2：在JavaScript代码中绑定；
3：使用事件监听绑定函数；
在DOM元素中直接绑定；
示例：<input type="button" name="" onclick="fn()">
<script type="text/javascript">
function fn(){
alert("");
}
</script>
在JavaScript代码中绑定
示例：<<input type="button" name="" value="" id="btn">
<script type="text/javascript">
btn.onclick = function(){
alert("");
}
</script>
使用事件监听绑定函数
示例：<<input type="button" name="" value="" id="btn">
<script type="text/javascript">
btn.addEventListener("click",function(){
alert("");
})
</script>

事件监听：w3c规范：
语法：element.addEventListener(event,function,true);
参数
event:必须，指事件名称如：click，keyup，mousemove等;
function:必须，指事件触发时，执行的函数；
useCapture：可选，true指捕获阶段，false指冒泡阶段。默认时候为false，冒泡阶段。
DOM2级事件规定的事件流的三个阶段：捕获，目标，冒泡;
1.捕获阶段，当我们在DOM树的某个节点发生了一些操作(例如单击、鼠标移动上去),就会有一个事件发射过去，这个事件从window发出，不断经过下级节点直到触发的目标节点，在到达目标节点之前的过程称为捕获阶段(capture Phase)。(所有经过的节点，都会触发这个事件，捕获阶段的任务就是建立这个事件传递路线，以便后面冒泡阶段顺着这条路线返回window。)
2，目标阶段：当事件不断的传递直到目标节点的时候，最终在目标节点上触发这个事件，就是目标阶段。
3，冒泡阶段：事件冒泡即事件开始时，由具体的元素接收(也就是事件发生所在的节点)，然后逐级传播到较为不具体的节点。
当浏览器发展到第四代时（IE4和Netscape Communicator 4），浏览器团队遇到一个很有意思的问题：

想象下在一张纸上有一组同心圆，如果你把手指放在圆心上，那么你的手指指向的不是一个圆，而是一组圆。两家公司的开发团队在看待浏览器事件方面还是一致的。如果你单击了某个按钮，那么同时你也单击了按钮的容器元素，甚至整个页面。

事件流描述的是从页面中接受事件的顺序。但有意思的是，IE和Netscape开发团队居然提出了两个截然相反的事件流概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。

<div id="div1" onclick="alert('div1')">
<div id="div2" onclick="alert('div2')"></div2>
</div>

当点击div2时，IE先执行div2，后执行div1；而Netscape先执行div1，后执行div2。

用js绑定和事件监听绑定的区别和特点：
1，js绑定的事件会覆盖，但是使用事件监听不会被覆盖。
2，js绑定的事件不会覆盖事件监听的事件。
3，事件监听可以改变函数的执行顺序(可以选择冒泡还是捕获)。
4，js绑定的事件return false可以阻止默认行为；而事件监听中return false无效。
注意：使用IE事件监听时，函数的this指向的是window对象。而w3c事件监听，函数内this指向的函数所属的对象。
w3c提供的删除事件处理函数的方法：
obj.removeElementListener(event,fn,false);//删除时需要看fn函数绑定在冒泡阶段还是捕获阶段。
无法同时删除多个事件。
函数的执行顺序：
某一个元素同时具有冒泡和捕获阶段函数时，在非目标阶段时，先执行捕获函数再执行冒泡函数。如果是目标阶段的函数，要看书写的顺序，依次执行。
onclick绑定的函数在冒泡阶段触发；如果同时在addEventListener绑定的冒泡阶段的函数，看书写顺序执行。
IE6、7、8不支持addEventListener所以要用到attachEvent。
IE提供的事件监听;
obj.attachEvent("onclick",fn);
对一个元素绑定多个事件的执行顺序；
高版本IE:从前到后；// 从IE11开始，不支持这种写法。
IE6/7/8：从后到前；
IE提供的删除事件：
obj.detachEvent("onclick",fn);
事件监听的封装：
建立一个函数，解决w3c标准和IE标准的事件监听的兼容。
移除事件的监听的封装：
建立一个函数，解决w3c标准和IE标准的事件监听的兼容。
事件委托也叫事件代理
事件委托就是利用事件冒泡的原理，把事件加到父元素或根元素上，触发执行效果。
优点是可以大量节省内存占用，减少事件注册。
event.target||event.srcElement 获取目标元素
注：target是w3c规范，但IE6,7,8不支持，仅支持srcElement；