【金秋打卡】第十四天 事件處理程序
標(biāo)簽：
JavaScript
第一模块：
课程名称：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>第四模块：
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶(hù)
支付方式
打開(kāi)微信掃一掃，即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得
100積分直接送
付費(fèi)專(zhuān)欄免費(fèi)學(xué)
大額優(yōu)惠券免費(fèi)領(lǐng)