-
使用事件處理程序有：
HTML事件處理程序；
DOM0級(jí)事件處理程序：可以添加多個(gè)事件處理程序
DOM2級(jí)事件處理程序：2級(jí)事件定義了兩個(gè)方法addEventListener()和removeEventListener()，有三個(gè)參數(shù)：要處理的事件名（不加on）、事件處理程序的函數(shù)、布爾值（true表示捕獲false表示冒泡）；可以添加多個(gè)事件處理程序，按順序執(zhí)行多個(gè)，刪除要指定添加時(shí)相同的參數(shù)
查看全部 -
type屬性? 用于獲取事件類型
target屬性 用于獲取事件的目標(biāo)
stopPropagation()方法? 用于阻止事件的冒泡
preventDefault()方法 阻止事件的默認(rèn)行為
查看全部 -
<!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');
? ? //封裝一個(gè)添加事件監(jiān)聽程序
? ? 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;
? ? ? ? ? }
? ? ? }
? ? // 顯示登錄層函數(shù)??
? ? function showlogin(){
? ? ? ? ? login_box.style.display="block";
? ? ? }
? ? // 隱藏登錄層函數(shù)??
? ? 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><!--封裝一個(gè)DOM0,DOM2,IE事件-->
<script src="script.js"></script><!--封裝一個(gè)DOM,IE的event事件對(duì)象-->
<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">跳轉(zhuǎn)</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("我是整個(gè)父盒子");
});
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;
? ? ? ? ? ? ? },
? ? ? ? ? ? ? //獲取事件目標(biāo)
? ? ? ? ? ? ? getElement:function(event){
? ? ? ? ? ? ? ? return event.target || event.srcElement;
? ? ? ? ? ? ? },
? ? ? ? ? ? ? //阻止事件的默認(rèn)行為
? ? ? ? ? ? ? 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">跳轉(zhuǎn)</a>
? ? </div>
? ? <script type="text/javascript">
? ? //HTML事件，將觸發(fā)事件放在HTML里面。可以直接寫，也可以封裝。
? ? ? ? ? ? ?function showMes(event){
? ? alert(event.target.nodeName);
? ? event.stopPropagation();
? ? }
? ? function showBox(){
? ? alert("這是放按鈕的盒子");
? ? }
? ? function stopGoto(){
? ? event.stopPropagation();//先阻止冒泡行為：stopPropagation
? ? event.preventDefault();//阻止事件的默認(rèn)行為，即阻止跳轉(zhuǎn)行為：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里觸發(fā)事件，便于修改；當(dāng)觸發(fā)的事件=null為刪除該事件。
? ? /*btn2.onclick=function(){
? ? alert("這是通過DOM0級(jí)添加的事件");
? ? }
? ? btn2.onclick=null;*///null不加引號(hào)。刪除事件后，點(diǎn)擊按鈕將不再跳出彈框。
? ? //DOM2事件，處理事件addEventListener("其包括三個(gè)參數(shù)，觸發(fā)、函數(shù)、false"),刪除事件removeEventLiatener("同樣包含三個(gè)參數(shù)")。
? ? ? ? //注意：DOM2的觸發(fā)事件不加“on”，且此方法不支持IE瀏覽器。
? ? ? ? /*btn3.addEventListener("click",showMes,false);
? ? ? ? btn3.removeEventListener("click",showMes,false);*/
? ? //IE事件
? ? ? ? ?//IE8以及更早瀏覽器只支持事件冒泡
? ? ? ? ?//添加事件attachEvent("其包含兩個(gè)參數(shù)，觸發(fā)、函數(shù)（觸發(fā)需要加‘on’）")，刪除事件detachEvent("統(tǒng)一包含兩個(gè)參數(shù)")。
? ? ? ? ? ?//btn4.attachEvent("onclick",showMes);
? ? ? ? ? ?//btn4.detachEvent("onclick",showMes);
? ? ? ? //封裝一個(gè)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的內(nèi)容，然后彈出showBox，這就是事件冒泡，逐級(jí)往上往外觸發(fā)。
? ? ? ? ? ? //eventutil.removehandler(btn3,'click',showMes);
? ? ? ? //組織事件冒泡
? ? </script>
</body>
</html>
查看全部 -
function showMes(event){
? ? alert(event.target.nodeName);
? ? }
查看全部 -
<script type="text/javascript">
? ? //HTML事件，將觸發(fā)事件放在HTML里面?？梢灾苯訉?，也可以封裝。
? ? ? ? ? ? function showMes(event){
? ? alert(event.type);
? ? }
</script>
查看全部
舉報(bào)