-
使用事件处理程序有：
HTML事件处理程序；
DOM0级事件处理程序：可以添加多个事件处理程序
DOM2级事件处理程序：2级事件定义了两个方法addEventListener()和removeEventListener()，有三个参数：要处理的事件名（不加on）、事件处理程序的函数、布尔值（true表示捕获false表示冒泡）；可以添加多个事件处理程序，按顺序执行多个，删除要指定添加时相同的参数
查看全部 -
type属性 用于获取事件类型
target属性 用于获取事件的目标
stopPropagation()方法 用于阻止事件的冒泡
preventDefault()方法 阻止事件的默认行为
查看全部 -
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
.head{font-size:12px;padding:6px 0 0 10px;}
#login_box{width:300px;height:150px;background:#eee;border:1px solid #ccc;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-75px;display:none;}
#login_box p{height:20px;border-bottom:1px solid #ccc;font-size: 12px;padding:6px 0 0 5px;font-weight:bold;}
#close{width:14px;height:14px;background:#ddd;position:absolute;right:5px;top:6px;}
</style>
<script type="text/javascript">
window.onload=function(){
var d=document,
login_btn=d.getElementById('login'),
login_box=d.getElementById('login_box'),
close=d.getElementById('close');
//封装一个添加事件监听程序
function addEvent(ele,type,hander){
if(ele.addEventListener){
ele.addEventListener(type,hander,false);
}else if(ele.attachEvent){
ele.attachEvent('on'+type,hander);
}else{
ele['on'+type]=hander;
}
}
// 显示登录层函数
function showlogin(){
login_box.style.display="block";
}
// 隐藏登录层函数
function hidelogin(){
login_box.style.display="none";
}
addEvent(login_btn,'click',showlogin);
addEvent(close,'click',hidelogin);
}
</script>
</head>
<body>
<div class="head">亲，您好！<input type="button" value="登录" id="login"></div>
<div id="login_box">
<p>用户登录</p><span id="close"></span>
</div>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="event.js"></script><!--封装一个DOM0,DOM2,IE事件-->
<script src="script.js"></script><!--封装一个DOM,IE的event事件对象-->
<body>
<div id="box">
<input type="button" value="HTML事件" id="btn" onclick="showMes()">
<input type="button" value="DOM0事件" id="btn2">
<input type="button" value="DOM2事件" id="btn3">
<input type="button" value="IE事件" id="btn4">
<a href="26.html" id="go">跳转</a>
</div>
<script type="text/javascript">
</script>
</body>
</html>
查看全部 -
window.onload=function(){
var go=document.getElementById("go"),
box=document.getElementById("box");
eventutil.addhandler(box,'click',function(){
alert("我是整个父盒子");
});
eventutil.addhandler(go,'click',function(e){
e=eventutil.getEvent(e);
//e=e || window.event;
alert(eventutil.getElement(e).nodeName);
eventutil.preventDefault(e);
eventutil.stopPropagation(e);
});
}
查看全部 -
var eventutil={
//添加句柄
addhandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
},
//删除句柄
removehandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
},
//获取事件
getEvent:function(event){
return event?event:window.event;
},
//获取类型（虽然类型不存在IE非IE）
getType:function(event){
return event.type;
},
//获取事件目标
getElement:function(event){
return event.target || event.srcElement;
},
//阻止事件的默认行为
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnvalue=false;
}
},
//阻止冒泡事件
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
查看全部 -
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="box">
<!-- <input type="button" value="HTML事件" id="btn" onclick="showMes()"> -->
<input type="button" value="DOM0事件" id="btn2">
<input type="button" value="DOM2事件" id="btn3">
<input type="button" value="IE事件" id="btn4">
<a href="26.html" id="go">跳转</a>
</div>
<script type="text/javascript">
//HTML事件，将触发事件放在HTML里面。可以直接写，也可以封装。
function showMes(event){
alert(event.target.nodeName);
event.stopPropagation();
}
function showBox(){
alert("这是放按钮的盒子");
}
function stopGoto(){
event.stopPropagation();//先阻止冒泡行为：stopPropagation
event.preventDefault();//阻止事件的默认行为，即阻止跳转行为：preventDefault
}
var d=document;
var box=d.getElementById("box"),
go=d.getElementById("go"),
btn2=d.getElementById("btn2"),
btn3=d.getElementById("btn3"),
btn4=d.getElementById("btn4") ;
//DOM0事件，在js里触发事件，便于修改；当触发的事件=null为删除该事件。
/*btn2.onclick=function(){
alert("这是通过DOM0级添加的事件");
}
btn2.onclick=null;*///null不加引号。删除事件后，点击按钮将不再跳出弹框。
//DOM2事件，处理事件addEventListener("其包括三个参数，触发、函数、false"),删除事件removeEventLiatener("同样包含三个参数")。
//注意：DOM2的触发事件不加“on”，且此方法不支持IE浏览器。
/*btn3.addEventListener("click",showMes,false);
btn3.removeEventListener("click",showMes,false);*/
//IE事件
//IE8以及更早浏览器只支持事件冒泡
//添加事件attachEvent("其包含两个参数，触发、函数（触发需要加‘on’）")，删除事件detachEvent("统一包含两个参数")。
//btn4.attachEvent("onclick",showMes);
//btn4.detachEvent("onclick",showMes);
//封装一个DOM0,DOM2,IE事件，谁行谁用上。
var eventutil={
addhandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
},
removehandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
}
}
eventutil.addhandler(btn3,'click',showMes);
eventutil.addhandler(box,'click',showBox);
eventutil.addhandler(go,'click',stopGoto);//先出来showMes的内容，然后弹出showBox，这就是事件冒泡，逐级往上往外触发。
//eventutil.removehandler(btn3,'click',showMes);
//组织事件冒泡
</script>
</body>
</html>
查看全部 -
function showMes(event){
alert(event.target.nodeName);
}
查看全部 -
<script type="text/javascript">
//HTML事件，将触发事件放在HTML里面。可以直接写，也可以封装。
function showMes(event){
alert(event.type);
}
</script>
查看全部
举报