- // 解绑事件:
- /*
- * 注意: 用什么方式绑定事件, 就应该用对应的方式解绑事件
- * 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);
- };
来源: http://www.bubuko.com/infodetail-2699122.html