一.事件兼容
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.事件的移除:
eg:
<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.阻止冒泡:
eg:
代码:
<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)的一个方法,作用是取消 一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效 了.什么元素有默认行为呢?如链接<a>,提交按钮<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>