第一模块:
课程名称: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>第四模块:


随时随地看视频