1.HTML事件处理程序:
JS事件放在HTML里面。
<!DOCTYPE html>
<html>
<head>
<title>HTML事件处理程序</title>
</head>
<body>
<div>
<input type="button" value="按钮" οnclick="show">
</div>
<script type="text/javascript">
function show(){
alert('hello world')
}
</script>
</body>
</html>
2.DOM0级事件处理程序:
<!DOCTYPE html>
<html>
<head>
<title>DOM0级事件处理程序</title>
</head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn">
</div>
<script type="text/javascript">
var btn=document.getElementById('btn');
btn.οnclick=function(){
alert('hello world')
}
btn.οnclick=null;//取消onclick事件
</script>
</body>
</html>
3.DOM2级事件处理程序
<!DOCTYPE html>
<html>
<head>
<title>DOM2级</title>
</head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn">
</div>
<script type="text/javascript">
//DOM2级事件定义了两个方法
//用于处理指定和删除事件程序的操作
//addEventListener()和removeEventListener()
//接收三个参数:要处理的时间名、事件处理程序、布尔值(true:捕获阶段、false:冒泡阶段)
//一个按钮上可以添加多个事件
var btn=document.getElementById('btn');
btn.addEventListener('click',function(){
alert('hello world');
},false);
//删除事件的参数必须和添加事件的一样,
btn.removeEventListener('click',function(){
alert('hello world');
},false);
</script>
</body>
</html>
4.IE事件处理程序
<!DOCTYPE html>
<html>
<head>
<title>IE事件处理程序</title>
</head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn">
</div>
<script type="text/javascript">
//attachEvent()添加事件
//detachEvent()删除事件
//接收相同的两个参数:事件名称、事件程序
var btn=document.getElementById('btn');
btn.attachEvent('onclick',function(){
alert('hello')
});
btn.detachEvent('onclick',function(){
alert('hello')
})
</script>
</body>
</html>
5.跨浏览器事件处理程序
<!DOCTYPE html>
<html>
<head>
<title>跨浏览器事件处理</title>
</head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn">
</div>
<script type="text/javascript">
function show(){
alert('hello');
}
var eventUtil={
//添加事件
addHandler:function(element,type,handler){
if(element.addEventListener){
addEventListener(type,handler,false);
}else if(element.attachEvent){
attachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
}
//删除事件
removeHandler:function(element,type,handler){
if(element.removeEventListener){
removeEventListener(type,handler,false);
}else if(element.attachEvent){
detachEvent('on'+type,handler);
}else{
element['on'+type]=null;
}
}
}
eventUtil.addHandler(btn,'click',show);
eventUtil.removeHandler(btn,'click',show);
</script>
</body>
</html>
6.DOM事件对象
<!DOCTYPE html>
<html>
<head>
<title>DOM事件对象</title>
</head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn">
<a href="http://www.baidu.com" id='go'>跳转</a>
</div>
<script type="text/javascript">
//1.DOM的事件对象
//(1)type属性 用于获取时间类型
//(2)target属性 用户获取事件目标
//(3)stopPropagation()阻止事件冒泡
//(4)preventDefault()阻止默认行为
var btn=document.getElementById('btn');
var box=document.getElementById('box');
var go=document.getElementById('go');
btn.οnclick=function(e){
alert('btn')
e.stopPropagation();
};
box.οnclick=function(){
alert('box')
};
go.οnclick=function(e){
e.stopPropagation();
e.preventDefault();
}
</script>
</body>
</html>
7.IE事件对象
<!DOCTYPE html>
<html>
<head>
<title>IE事件对象</title>
</head>
<body>
<div id="box">
<a href="" id="go">跳转</a>
</div>
<script type="text/javascript">
//1.IE的事件对象
//(1)type属性 用于获取时间类型
//(2)srcElement属性 用户获取事件目标
//(3)cancelBubble属性:true:阻止事件冒泡
//(4)returnValue属性:flase:阻止默认行为
window.οnlοad=function(){
var go=document.getElementById('go');
var box=document.getElementById('box');
eventUtil.addHandler(box,'click',function(){
alert('111')
})
}
var eventUtil={
//添加事件
addHandler:function(element,type,handler){
if(element.addEventListener){
addEventListener(type,handler,false);
}else if(element.attachEvent){
attachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
},
//删除事件
removeHandler:function(element,type,handler){
if(element.removeEventListener){
removeEventListener(type,handler,false);
}else if(element.attachEvent){
detachEvent('on'+type,handler);
}else{
element['on'+type]=null;
}
},
getEvent:function(event){
return event?event:window.event;
},
getType:function(event){
return event.type;
},
getTarget:function(){
return event.target||event.srcElement
},
preventDefault:function(event){
if(event.preventDefault{
event.preventDefault()
}else{
event.returnValue=false;
}
},
stopPropagation:function(){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble:false;
}
}
}
</script>
</body>
</html>