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>