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;