JavaScript之元素綁定事件
阿新 • • 發佈：2019-01-29
button break eve lis 支持 mouseout dde cas 解綁
元素綁定事件的方法
Element.addEventListener();
Element.attachEvent();相同點和不同點
相同點: 都可以為元素綁定事件 不同點: 1.方法名不一樣 2.參數個數不一樣:addEventListener三個參數,attachEvent兩個參數 3.addEventListener 谷歌,火狐,IE11支持,IE8不支持 attachEvent 谷歌火狐不支持,IE11不支持,IE8支持 4.this不同,addEventListener 中的this是當前綁定事件的對象,attachEvent中的this是window。 5.addEventListener中事件的類型(事件的名字)沒有on attachEvent中的事件的類型(事件的名字)有on。
兼容代碼:
/*element表示綁定事件的元素
type表示事件的類型
fn表示事件處理函數
*/
function addEventListener(element,type,fn) {
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}為元素解綁事件
解綁事件: 註意:用什麽方式綁定事件,就應該用對應的方式解綁事件 1.解綁事件 對象.on事件名字=事件處理函數--->綁定事件 對象.on事件名字=null; 2.解綁事件 對象.addEventListener("沒有on的事件類型",命名函數,false);---綁定事件 對象.removeEventListener("沒有on的事件類型",函數名字,false); 3.解綁事件 對象.attachEvent("on事件類型",命名函數);---綁定事件 對象.detachEvent("on事件類型",函數名字);
兼容代碼:
function removeEventListener(element,type,fnName) {
if(element.removeEventListener){
element.removeEventListener(type,fnName,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,fnName);
}else{
element["on"+type]=null;
}
}事件冒泡:
事件冒泡:多個元素嵌套,有層次關系,這些元素都註冊了相同的事件,如果裏面的元素的事件觸發了,外面的元素的該事件自動的觸發了.
比如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
#dv1 {
width: 300px;
height: 200px;
background-color: red;
}
#dv2 {
width: 250px;
height: 150px;
background-color: green;
}
#dv3 {
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<script>
</script>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script src="common.js"></script>
<script>
my$("dv1").onclick = function () {
console.log(this.id);
};
my$("dv2").onclick = function () {
console.log(this.id);
};
my$("dv3").onclick = function () {
console.log(this.id);
};
document.body.onclick = function () {
console.log("我是body");
};
//點擊最裏面的dv3會發生事件冒泡，從裏向外觸發點擊事件
</script>
</body>
</html>阻止事件冒泡:
window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持
e.stopPropagation(); 谷歌和火狐支持,事件的三個階段:
1.事件捕獲階段 :從外向內
2.事件目標階段 :最開始選擇的那個
3.事件冒泡階段 : 從裏向外為同一個元素綁定不同事件且指向同一個事件處理函數:
比如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="按鈕" id="btn"/>
<script src="common.js"></script>
<script>
my$("btn").onclick = f1;
my$("btn").onmouseover = f1;
my$("btn").onmouseout = f1;
function f1(e) {
switch (e.type) {
case "click":
alert("我是按鈕");
break;
case "mouseover":
this.style.backgroundColor = "red";
break;
case "mouseout":
this.style.backgroundColor = "green";
break;
}
}
</script>
</body>
</html>JavaScript之元素綁定事件