//解绑事件:
/*
* 注意:用什么方式绑定事件,就应该用对应的方式解绑事件
* 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);
};