一.事件流
1.事件流的介绍: 事件流描述的是从页面中接收事件的顺序. 事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件. 2.事件流包括两种模式：冒泡和捕获. (1)事件冒泡: 是值子元素和父元素具备同样的事件,当触发子元素的事件时,也会触发父元素的事件(由内至外).子集元素先触发，父级元素后触发. (2)事件捕获:与事件冒泡相反,父级元素先触发，子集元素后触发. 例如:
<script type="text/javascript"> window.onload=function(){ var div1=document.getElementById('div1'); var div2=document.getElementById('div2'); div1.style.width=200+'px'; div1.style.height=200+'px'; div1.style.border='1px solid red'; div2.style.width=100+'px'; div2.style.height=100+'px'; div2.style.border='1px solid yellow'; div1.onclick=function(){ div1.style.background='aqua'; } div2.onclick=function(){ div2.style.background='darkorchid'; } } </script> ............... <body> <div id="div1"> <div id="div2"></div> </div> </body>二.事件兼容 1.事件绑定: addEventListener 用于注册事件处理程序(为文档节点).IE 中为 attachEvent,我们为 什么讲addEventListener而不讲attachEvent呢?一来attachEvent比较简单,二来addEventListener才是 DOM 中的标准内容. 语法: 第一个参数是事件的类型(如 “click” 或 “mousedown”). 第二个参数是事件触发后调用的函数。 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。 注意:不要使用 “on” 前缀.例如,使用 “click” ,而不是使用 “onclick”. 你可以使用函数名，来引用外部函数 例如:
<script type="text/javascript"> window.onload=function(){ var btn1=document.getElementById('btn1'); btn1.addEventListener('click',show,false);//三个参数 function show(){ alert('注册成功,你已经点击'); } } </script> ......... <body> <input type="button" value="事件注册" id="btn1" /> </body>通过 addEventListener（添加点击事件监听器）形式的绑定事件不 会互相抵消，从而实现一个按钮控制多个事件. 例如:
<script type="text/javascript"> window.onload=function(){ var btn2=document.getElementById('btn2'); btn2.addEventListener('click',function(){ alert('第一个'); },false); btn2.addEventListener('click',function(){ alert('第二个'); },false); </script> <body> <button id="btn2">按钮 2</button> </body>2.事件的移除: 例如：
<script type="text/javascript"> window.onload=function(){ var btn1=document.getElementById('btn1'); btn1.addEventListener('click',show,false); function show(){ alert('第一个'); } btn1.removeEventListener('click',show,false);//事件的移除 } </script> .......... <body> <button id="btn1">按钮 1</button> </body>3.阻止冒泡 例如： 代码如下：
<body id="body"> <div id="box1" class="box1"> <div id="box2" class="box2"> <span id="span">This is a span.</span> </div> </div> </body>我们现在想实现这样的功能，在 div1 点击的时候，弹出 “你点击了最外层div.”,点击 div2 的时候,弹出"你点击了第二层div";点击 span 的时候,弹出"你点击了最里面span元素". 样式如下：
<style type="text/css"> .box1 { border: green 40px solid; width: 300px; height: 300px; margin: auto; } .box2 { border: yellow 40px solid; width: 220px; height: 220px; margin: auto; } span { position: relative; left: 50px; top: 50px; background-color: rgba(128, 128, 128, 0.22); } </style>JavaScript代码:
<script type="text/javascript"> window.onload=function(){ document.getElementById('box1').addEventListener('click',function(event){ alert('你点击了最外层div'); event.stopPropagation(); //阻止事件冒泡 }); document.getElementById('box2').addEventListener('click',function(event){ alert('你点击了第二层div'); event.stopPropagation(); //阻止事件冒泡 }); document.getElementById('span').addEventListener('click',function(event){ alert('你点击了最里面span元素'); event.stopPropagation(); //阻止事件冒泡 }); } </script>4.阻止默认 w3c 的方法是 e.preventDefault(),IE 则是使用 e.returnValue = false; preventDefault它是事件对象(Event)的一个方法,作用是取消 一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效 了.什么元素有默认行为呢?如链接,提交按钮<input type=” submit”>等.当Event对象的cancelable为false时,表示没有默认行为,这时即使有默认行为,调用 preventDefault 也是不会起作用的。 eg: 超链接:
<body> <a href="https://www.baidu.com" target="_blank">百度</a> </body>阻止默认
<script type="text/javascript"> window.onload=function(){ var a1=document.getElementsByTagName('a')[0]; a1.addEventListener('click',function(evevt){ if(event.preventDefault()){ event.preventDefault(); }else{ window.event.returnValue=false; } }) } </script> ............ <body> <a href="https://www.baidu.com" target="_blank">百度</a> </body>