【金秋打卡】第十四天 事件处理程序
标签：
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>第四模块：
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦