一.事件流
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>