1. 事件：所谓事件，就是用户在窗口上对各种组件的操作
例如：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload=function(){ 8 var Obtn=document.querySelector("#btn"); 9 Obtn.onclick=function(){ 10 alert('点击事件发生了'); 11 }; 12 } 13 </script> 14 </head> 15 <body> 16 <div class="box"> 17 <input type="button" id="btn" value="点我"> 18 </div> 19 </body> 20 </html>
运行结果：
2. 事件绑定：就是当某个对象的事件发生时（或者操作某个组件时），由此而关联产生的现象或者方法。简单的说，就是为某个对象的某个事件绑定相关的事件处理程序
例如：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload=function(){ 8 var Obtn=document.querySelector("#btn"); 9 Obtn.onclick=function(){ 10 alert('我是onclick事件关联绑定的alert事件方法'); 11 }; 12 } 13 </script> 14 </head> 15 <body> 16 <div class="box"> 17 <input type="button" id="btn" value="点我"> 18 </div> 19 </body> 20 </html>
运行结果：
3.事件绑定的方法：
3.1 在DOM元素中之间绑定，即行间事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 function aluoha(){ 8 alert('good job,huanying2015!'); 9 } 10 </script> 11 </head> 12 <body> 13 <div class="box"> 14 <input type="button" id="btn" value="点我" onclick="aluoha();"> 15 </div> 16 </body> 17 </html>
运行结果：
3.2 在JavaScript代码中绑定事件
此种绑定事件的方法，可以是JavaScript代码和HTML标签分离，文档及结构清晰，便于开发和管理，这是一种分块的思维方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload=function(){ 8 var Obtn = document.querySelector('#btn'); 9 Obtn.onclick=function(){ 10 alert('good job,huanying2015!'); 11 } 12 } 13 </script> 14 </head> 15 <body> 16 <div class="box"> 17 <input type="button" id="btn" value="点我" > 18 </div> 19 </body> 20 </html>
运行结果：
3.3 使用事件监听来绑定事件
使用addEventListener（非ie浏览器）或者 attachEvent（ie浏览器） 来绑定监听函数：
非IE浏览器监听事件：
语法格式：element.addEventListener(event,function,useCapture) ;
element：监听对象；
addEventListener：事件监听函数
event：事件
function：触发事件时，执行的函数
useCapture：可选，定义了function 在触发阶段执行还是冒泡阶段执行。值为true, 在触发阶段执行，值为false,在冒泡阶段执行，默认为false;
（备注：经过测试，发现ie9,ie10,ie11也支持addEventListener；ie8及以下就不支持了）
补充说明：事件监听分为三个阶段进行：捕获阶段--->目标阶段--->冒泡阶段，可以用以下的关系图来理解：
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload=function(){ 8 var Obtn = document.querySelector('#btn'); 9 Obtn.addEventListener('click',function(){ 10 alert("本次使用了addEventListener 来监听绑定alert函数"); 11 },false); 12 } 13 </script> 14 </head> 15 <body> 16 <div class="box"> 17 <input type="button" id="btn" value="点我" > 18 </div> 19 </body> 20 </html>
运行结果：
IE浏览器的监听事件：
语法格式：element.attachEvent(event,function)
element：监听对象
attachEvent：事件监听函数
event：事件（备注：ie浏览器的事件，需要在事件前加上on 。例如click，IE监听事件需要加上on ，变成 onclick）
function：触发事件时，执行的函数
（注意：IE有点坑，IE11不支持这种写法，反而支持addEventListener 的写法）
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload=function(){ 8 // var Obtn = document.querySelector('#btn'); // 因为IE8以下不支持document.querySelector()获取元素 9 var Obtn = document.getElementById('btn'); 10 console.log(Obtn); 11 Obtn.attachEvent('onclick',hello123); 12 13 function hello123(){ 14 alert("本次使用了attachEvent 来监听绑定alert函数"); 15 }; 16 } 17 </script> 18 </head> 19 <body> 20 <div class="box"> 21 <input type="button" id="btn" value="点我" > 22 </div> 23 </body> 24 </html>
运行结果：
