1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #box{ 12 width: 200px; 13 height: 200px; 14 background-color: pink; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="box"></div> 20 <button id="btn">按钮</button> 21 22 <script type="text/javascript"> 23 24 window.onload = function () { 25 //获取box元素 26 var box = document.getElementById('box'); 27 //后去button元素 28 var btn = document.getElementById('btn'); 29 30 31 //使用兼容模式，绑定事件 32 function addEvent(node,eventType,callback) { 33 // 判断当前是高级浏览器还是低级浏览器 34 if(node.addEventListener){ 35 // 高级浏览器 36 node.addEventListener(eventType,callback); 37 // console.log(callback); 38 // console.log(callback()); 39 }else { 40 // 低级浏览器 41 node.attachEvent('on'+eventType,callback); 42 } 43 } 44 45 //定义事件函数 46 function fn() { 47 console.log('今天天气好热！！！'); 48 } 49 50 // 添加dom2事件 使用兼容模式 51 addEvent(box,'click',fn); 52 53 54 //使用兼容模式，解绑事件 55 function removeEvent(node,eventType,callback){ 56 //判断是低级还是高级浏览器 57 if(node.removeEventListener){ 58 //高级浏览器 59 node.removeEventListener(eventType,callback); 60 }else{ 61 //低级浏览器 62 node.detachEvent('on'+eventType,callback); 63 } 64 } 65 66 67 //点击button,对box的点击事件解绑， 68 btn.onclick = function(){ 69 removeEvent(box,'click',fn); 70 } 71 72 73 } 74 75 76 </script> 77 </body> 78 </html>
只绑定，回调函数不用写在全局中
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <style type="text/css"> 8 .box{ 9 width: 100px; 10 height: 100px; 11 background-color: red; 12 } 13 </style> 14 15 <script type="text/javascript"> 16 17 window.onload= function(){ 18 var box=document.querySelector(".box"); 19 // addEventListener() 20 // * - 通过这个方法也可以为元素绑定响应函数.事件监听 21 // * - 参数： 22 // * 1.事件的字符串，不要on 23 // * 2.回调函数，当事件触发时该函数会被调用 24 // * 3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false 25 26 box.addEventListener("click", function(){ 27 alert("第一次打架") 28 }, false); 29 30 box.addEventListener("click", function(){ 31 alert("第二次打架") 32 }, false); 33 34 box.addEventListener("click", function(){ 35 alert("第三次打架") 36 }, false) 37 38 39 } 40 </script> 41 </head> 42 <body> 43 <div class="box"></div> 44 </body> 45 </html>