js事件绑定

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>

运行结果：

posted on 2017-11-29 13:16 huanying2015 阅读(368) 评论(0) 编辑收藏举报