JavaScript中事件的相容(事件的繫結addEventListener/移除removeEventListener,阻止冒泡/預設)
一.事件相容
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>