//解綁事件:
/*
* 注意:用什么方式綁定事件,就應該用對應的方式解綁事件
* 1.解綁事件
* 對象.on事件名字=事件處理函數--->綁定事件
* 對象.on事件名字=null;
* 2.解綁事件
* 對象.addEventListener("沒有on的事件類型",命名函數,false);---綁定事件
* 對象.removeEventListener("沒有on的事件類型",函數名字,false);
* 3.解綁事件
* 對象.attachEvent("on事件類型",命名函數);---綁定事件
* 對象.detachEvent("on事件類型",函數名字);
*
*
* */
頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<script >
function my$(id){
return document.getElementById(id);
}
//設置任意元素的中間的文本內容
function setInnnerText(element,text) {
if(typeof element.textContent=="undefined"){
element.innerText=text;
}else{
element.textContent=text;
}
}
</script>
<body>
<input type="button" value="創建一個p" id="btn"/>
哈哈哈
<input type="button" value="創建二個p" id="btn2"/>
<div id='dv'> </div>
</html>
綁定和解綁的兼容性代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script >
function my$(id){
return document.getElementById(id);
}
//設置任意元素的中間的文本內容
function setInnnerText(element,text) {
if(typeof element.textContent=="undefined"){
element.innerText=text;
}else{
element.textContent=text;
}
}
</script>
</head>
<body>
<input type="button" value="按鈕" id="btn1"/>
<input type="button" value="干掉第一個按鈕的事件" id="btn2"/>
<script>
//綁定事件的兼容
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;
}
}
//解綁事件的兼容
//為任意的一個元素,解綁對應的事件
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;
}
}
function f1() {
console.log("第一個");
}
function f2() {
console.log("第二個");
}
addEventListener(my$("btn1"),"click",f1);
addEventListener(my$("btn1"),"click",f2);
my$("btn2").onclick=function () {
removeEventListener(my$("btn1"),"click",f1);
};
</script>
</body>
</html>
第一種方式是常用的
my$("btn").onclick=function(){
console.log("aa");
}
my$("btn").onclick=null;
第二種方式是常用的(火狐谷歌)
/第二種方式支持谷歌和火狐,不支持ie8
function f1() {
console.log("第一個");
}
function f2() {
console.log("第二個");
}
my$("btn").addEventListener("click",f1,false);
my$("btn").addEventListener("click",f2,false);
//點擊第二個按鈕把第一個按鈕的第一個點擊事件解綁
my$("btn2").onclick=function () {
//解綁事件的時候,需要在綁定事件的時候,使用命名函數
my$("btn").removeEventListener("click",f1,false);
};
第三種方式是常用的(IE8)
//第三種支持ie8
function f3() {
console.log("第一個");
}
function f4() {
console.log("第二個");
}
my$("btn").attachEvent("onclick",f3);
my$("btn").attachEvent("onclick",f4);
my$("btn2").onclick=function () {
my$("btn").detachEvent("onclick",f3);
};