5 /**
6 * 事件
7 */
8 /**事件流
9 * 1、事件冒泡 IE事件流叫事件冒泡 event bubbling 即由具体到不具体
10 * 2、事件捕获 从最不具体到具体 Safari chrome opera Firefox都支持事件捕获
11 * 3、DOM事件流 包含三个阶段：
12 * （1）事件捕获阶段
13 * （2）处于目标阶段
14 * （3）事件冒泡阶段*/
15
16 /**
17 * 事件处理程序或者事件监听器
18 * 事件定义：事件就是用户或者浏览器自身执行的某种动作 如click load。。。
19 * 1、HTML事件处理程序 就是在HTML元素中调用JavaScript
20 * 使用缺点：（两个）
21 * HTML与JavaScript代码紧密耦合，如果要更换事件处理程序，就要改动两个地方 HTML代码和JavaScript代码
22 * (自己发现的bug：当用HTML事件时 用原生的
23 * window.onload = function(){
24 * var handleFunc = function(){alert("这是HTML事件！");}
25 * }加载完在执行时会报错),所以尽量不要使用HTML事件流
26 * 比如：eventUtils.html:10 Uncaught ReferenceError: handleFunc is not defined)
27 * 2、DOM0级事件处理程序 就是将一个函数赋值给一个事件处理程序属性
28 * 使用前提首先必须取得一个要操作的对象引用
29 * 使用优点：（两个）
30 * 简单 具有跨浏览器的优势
31 * 注意点：
32 * 制定事件事件处理程序时，在这一段运行以前不会制定事件处理程序，因此如果这些代码在页面中位于
33 * 按钮后面，就有可能在一段事件内怎么单击都没有反应。
34 * 使用DOM0级方法指定的事件处理程序被认为是元素的方法，在这时候的事件处理程序时在元素的作用域
35 * 中运行，也就是说程序中的this引用当前元素
36 * 这种方式添加事件处理会在事件流的冒泡阶段处理。
37 * 取消DOM0级事件方法：
38 * 将事件程序属性值设计为null
39 * 如：btn.onclick = null;单击按钮将不会有任何动作发生
40 *
41 * (自己发现的bug:
42 * window.onload = function(){
43 var handleFunc = function(msg){
44 alert(msg);
45 }
46
47 //DOM0事件
48 var btn = document.getElementById("btn0");
49 btn.onclick = handleFunc("这是DOM0级事件！");//当使用这个调用函数时，文档加载的过程中就会
50 执行一次handleFunc函数，再次点击事件时没有函
51 数没有响应，也不会报错。所以使用DOM0级事件时
52 并要调用函数时尽量把要调用的函数写在事件中如：
53 btn.onclick = function(){alert("这是DOM0级事件！");}
54 };
55 * )
56 * 3、DOM2级事件处理程序 定义了两个事件 addEventListener()和removeEventListener()方法
57 * 优点：所有的DOM节点都包含两个方法并且都接受3个参数即 要处理的事件名 作为事件处理城西的函数 一个布尔值
58 * 可以添加多个事件处理程序
59 * 最后一个布尔值 若是true表示捕获阶段调用事件处理程序
60 * 若是false表示冒泡阶段调用事件处理程序，一般情况下都是把事件程序调价到事件流的冒泡阶段，
61 * 这样可以最大限度兼容各种浏览器
62 * 注意点：当使用removeEventListener()删除事件处理程序时，函数的三个参数都要一样，否则不能删除事件处理程序。
63 * 因为removeEventListener()和addEventListener()的第二个函数要是各自自己写的话这两个函数就是不同的函数
64 * 所以一般使用方式为：
65 * addEventListener(event,handle,false);
66 * removeEventListener(event,handle,false);把handle函数抽出来单独写。
67 * */
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>事件</title>
6 <script type="text/javascript" src="eventUtils.js"></script>
7 </head>
8 <body>
9 <div id="event">
10 <input type="button" value="html事件" onclick="handleFunc('这是HTML事件！')" /><!--HTML事件--> <!--handleFunc执行时会报错 -->
11 <!-- eventUtils.html:10 Uncaught ReferenceError: handleFunc is not defined-->
12 <input type="button" value="DOM0事件" id="btn0" />
13 <input type="button" value="DOM2事件" id="btn2" />
14 </div>
15 <script type="text/javascript">
16 window.onload = function(){
17 var handleFunc = function(msg){
18 alert(msg);
19 }
20 var handleDOM2 = function(){
21 alert("dom2级事件！");
22 }
23
24 //DOM0事件
25 var btn = document.getElementById("btn0");
26 //btn.onclick = handleFunc("这是DOM0级事件！");//不要这样调用，否则会出错并且文档加载中会自动执行一次handleFunc函数
27 btn.onclick = function(){
28 handleFunc("这是DOM0级事件！");
29 }
30
31 //DOM2级事件
32 var btn2 = document.getElementById("btn2");
33 btn2.addEventListener("click", handleDOM2, false);
34 btn2.removeEventListener("click", handleDOM2, false);
35 }
36 </script>
37 </body>
38 </html>
