第一模块:
课程名称:DOM事件探秘
章节:2-1~2-4
讲师名称:Amy
第二模块:
HTML事件的缺点:
HTML和JS代码紧密的藕合在一起。
使用事件处理程序:
HTML事件处理程序
DOM0级事件处理程序:把一个函数赋值给一个事件的处理程序属性用的比较多的方法
addEventListener(),removeEventListner()。接收三个参数:要处理的事件名,作为事件处理程序的函数,boolean值
attachEvent(),detachEvent()。接收两个参数:事件名,事件处理程序的函数
第三模块:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <div id='box'> <input type='botton' value='按钮' id='btn' onclick='showMessage()' /> <input type='botton' value='按钮2' id='btn2' /> <input type='botton' value='按钮3' id='btn3' /> </div> <script> function showMes(){ alert('hello world'); } var btn2=document.getElementById('btn2'); var btn3=document.getElementById('btn3'); btn2.onclick=function(){ alert('这是通过DOM0级添加的事件!'); } btn2.onclick=null; // DOM2级事件 btn3.addEventListener('click',showMes,false); btn3.addEventListener('click',function(){ alert(this.value); },false); // IE添加事件处理程序 btn3.attachEvent('onclick',showMes); btn3.detachEvent('onclick',showMes); // 跨浏览器事件处理程序:封装方法 var eventUtil={ addHandle:function(element,type,handle){ if(element.addEventListener){ element.addEventListener(type,handle,false); }else if(element.attachEvent){ element.attachEvent('on'+type,handle); }else{ element['on'+type]=handle; } } } </script> </body> </html>
第四模块: