标签：head 单词 函数 动作 赋值 type class 支持ie 引号
事件：文档／窗口中发生的特定的交互瞬间
瀑布流，图片轮播
动作都是通过事件触发的
课程内容：
1，理解事件流
2，使用时间处理程序
3，不同的事件类型
ie4.0以后，
事件流：描述的是从页面中接收事件的顺序
ie:事件冒泡流
n：事件捕获流
事件冒泡：事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）
事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。多数浏览器也支持，但是低版本的支持不好，请放心使用事件冒泡，知道事件捕获即可。
html事件处理程序：事件直接加载在html结构里，缺点是html和js紧密耦合在一起，如果要更改的话，html和js都要改，麻烦。很多开发人员会摒弃掉。
dom0级事件处理程序：把一个函数赋值给一个事件的处理程序的属性，js比较传统的，用的最多的一种，简单，跨浏览器的优势。
<script> btn2.onclick = function showmessage(){ alert("111"); } btn2.onclick = null;//删除onclick属性 </script>
dom2级事件处理程序:2个方法，用于处理指定和删除事件处理程序的操作方法 addEventListener()和removeEventListener（），包含事件名、作为事件处理程序的函数，布尔值（布尔值false-事件冒泡，所以一般用false,true-事件捕获，不常用。)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <input type="button" value="按钮1" id="btn1" onclick="showMes()"> <input type="button" value="按钮2" id="btn2"> <input type="button" value="按钮3" id="btn3"> </div> <script> function showMes(){ alert("这是html事件处理程序"); } var btn2 = document.getElementById("btn2"); btn2.onclick = function showmessage(){ alert("这是dom0级处理程序"); } btn2.onclick = null;//删除onclick属性 var btn3 = document.getElementById("btn3"); addEventListener("click",showMes,false); addEventListener("click",function(){ alert(btn3.value); },false); addEventListener("click",function(){ alert("这是dom2级处理程序"); },false); removeEventListener("click",showMes,false);//删除事件属性 </script> </body> </html>
//dom0 和 dom2都可以添加多个事件属性，按照代码顺序执行
事件名不能加on,false兼容各种浏览器，listener单词不要写错。
测试，ie不起作用。
4、IE事件处理程序－支持ie和opera
attachEvent()添加事件
detachEvent()删除事件
这两个方法接收相同的两个参数：事件处理程序名称与事件处理函数。因为ie8和以前的版本只支持事件冒泡，默认事件冒泡。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <input type="button" value="按钮1" id="btn1" onclick="showMes()"> <input type="button" value="按钮2" id="btn2"> <input type="button" value="按钮3" id="btn3"> </div> <script> //html事件处理程序 function showMes() { alert("这是html事件处理程序"); } //dom0级事件处理程序 var btn2 = document.getElementById("btn2"); btn2.onclick = function showmessage() { alert("这是dom0级处理程序"); } btn2.onclick = null; //删除onclick属性 // //dom2级事件处理程序 // var btn3 = document.getElementById("btn3"); // addEventListener("click", showMes, false); //事件名不能加on,false兼容各种浏览器，listener单词不要写错。 // addEventListener("click", function() { // alert(btn3.value); // }, false); // addEventListener("click", function() { // alert("这是dom2级处理程序"); // }, false); // removeEventListener("click", showMes, false); //删除事件属性 // //dom0 和 dom2都可以添加多个事件属性，按照代码顺序执行 //能力检测 跨浏览器事件处理 var eventutill = { //添加句柄 addHandler:function(element,type,handler){ if(element,addEventListener){ element.addEventListener(type,handler,false); }else if(element,attachEvent){ element.attachEvent("on"+type,handler); }else{ element["on"+type]=handler;//[]作用等同于".","."不能和字符串紧接着写 } },//这里记得加逗号 //删除句柄 removeHandler:function(element,type,handler){ if(element,removeEventListener){ element.removeEventListener(type,handler,false); }else if(element,detachEvent){ element.detachEvent("on"+type,handler); }else{ element["on"+type]=null; } } } eventutill.addHandler(btn3,"click",showMes);//click记得要加引号 //eventutill.addHandler(btn3,“click”,showMes); </script> </body> </html>
标签：head 单词 函数 动作 赋值 type class 支持ie 引号
原文地址：http://www.cnblogs.com/iceflorence/p/6078652.html
