-
JavaScript 和 HTML 之間的交互都是通過事件來實現的。
查看全部 -
事件是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。
查看全部 -
//阻止事件冒泡
<a href="event.html" id="go">跳轉</a>
function stopGoto(event){
????event.stopPropagation();
????event.preventDefault();
}
var go=document.getElementById('go');
eventUtil.addHandler(go,'click',stopGoto);
查看全部 -
function?showMes(){ ????alert(event.target.nodeName); ????event.stopPropagation(); ????//stopPropagation()方法?用于阻止事件冒泡 }查看全部 -
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>Document</title>
<style>
*{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:url(close.png) no-repeat;position:absolute;right:4px;top:6px;border:1px solid #ccc;}
</style>
<script>
? ? ? window.onload=function(){
? ? ? ?var login_btn=document.getElementById('login'),
? ? ? ?? ? login_box=document.getElementById('login_box'),
? ? ? ?? ? close=document.getElementById('close');
? ? ? ?// 封裝添加事件監聽程序
? ? ? ? function addEvent(ele,type,hander){
? ? ? ? ? ?// 執行代碼
? ? ? ? ? ?if(ele.addEventListener){
? ? ? ? ? ? ? ele.addEventListener(type,hander,false);
? ? ? ? ? ?}else if(ele.attchEvent){
? ? ? ? ? ? ? ?ele.attchEvent('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>
查看全部 -
第四章節聽不懂，需要重新學習和多練習
重點：注意需要阻止冒泡和不需要阻止冒泡的情況
查看全部 -
回家重新練習查看全部
-
?
本節主要內容查看全部 -
if(event.stopPropagation)千萬不能寫成?if(event.stopPropagation（）)
此處是以屬性的形式進行判斷。
查看全部 -
此處的event是非IE瀏覽器的事件對象
具體指？
return event？event:window.event;
三元運算符 ？作用是判斷？前的語句是否為真,為真則執行中間的語句,否則執行后面的語句
查看全部 -
?3-1DOM中的事件對象
需要重學，基本上沒看懂。
查看全部 -
跨瀏覽器解決——》添加句柄：
這里為什么添加句柄？
句柄一般什么時候使用
句柄是什么？
句柄的格式一般如何？
調用的格式？
查看全部 -
<!doctype?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>下拉菜單</title> ????<style?type="text/css"> ????????.sjx{ ????????????position:?absolute; ????????????left:160px; ????????????top:9px; ????????????width:0; ????????????border-top:8px?solid?#a9c0b4; ????????????border-left:8px?solid?white; ????????????border-right:8px?solid?white; ????????????cursor:?pointer; ????????} ????????body,ul,li{?margin:0;?padding:0;?font-size:13px;} ????????ul,li{list-style:none;} ????????ul{display:none;} ????????#divselect{width:186px;?margin:80px?auto;?position:relative;?z-index:10000;} ????????#divselect?cite{width:150px;?height:24px;line-height:24px;?display:block;?color:#807a62;?cursor:pointer;font-style:normal; ????????????padding-left:4px;?padding-right:30px;?border:1px?solid?#333333;} ????????#divselect?ul{width:184px;border:1px?solid?#333333;?background-color:#ffffff;?position:absolute;?z-index:20000;?margin-top:-1px;?display:none;} ????????#divselect?ul?li{height:24px;?line-height:24px;} ????????#divselect?ul?li?a{display:block;?height:24px;?color:#333333;?text-decoration:none;?padding-left:10px;?padding-right:10px;} ????</style> ????<script?type="text/javascript"> ????????window.onload=function(){ ????????????var?box=document.getElementById('divselect'), ????????????????sjx=document.getElementById('sjx'), ????????????????menu=box.getElementsByTagName('ul')[0], ????????????????lis=box.getElementsByTagName('a'), ????????????????cite=box.getElementsByTagName('cite')[0]; ????????????????index=-1; ????????????//?點擊三角時 ?sjx.onclick=function(event){ ????????????????//?執行腳本 ?event=event||window.event; ????????????????event.stopPropagation(); ????????????????menu.style.display='block'; ????????????} ????????????//?滑過滑過、離開、點擊每個選項時 ?for(var?i=0,l=lis.length;i<l;i++){ ????????????????lis[i].onmouseover?=?function?()?{ ????????????????????this.style.background?=?'#a9c0b4'; ????????????????} ????????????????lis[i].onmouseout?=?function?()?{ ????????????????????this.style.background?=?'#FFF'; ????????????????} ????????????????lis[i].onclick=function(){ ??????????????????cite.innerHTML=this.innerHTML; ????????????????} ????????????} ????????????//?鍵盤事件 ?var?index=-1; ????????????document.onkeyup=function(event){ ????????????????for(var?i=0,l=lis.length;i<l;i++){ ????????????????????lis[i].style.background?=?'#FFF'; ????????????????} ????????????????//向下 ?if(event.keyCode==40){ ????????????????????index++; ???????????????????if(index>=0&&index<=4){ ???????????????????lis[index].style.background?=?'#a9c0b4'; ???????????????????} ???????????????????else{ ???????????????????????index=4; ???????????????????????lis[index].style.background?=?'#FFF'; ???????????????????} ???????????????} ???????????????//向上 ?else?if(event.keyCode==38){ ????????????????????index--; ???????????????????if(index>=0&&index<=4)?{ ???????????????????????lis[index].style.background?=?'#a9c0b4'; ???????????????????} ???????????????????else{ ???????????????????????index=0; ???????????????????????lis[index].style.background?=?'#a9c0b4'; ???????????????????} ????????????????} ???????????????//回車 ?else?if(event.keyCode==13){ ???????????????????cite.innerHTML=lis[index].innerHTML; ????????????????} ????????????????console.log(index); ????????????} ????????????//?點擊頁面空白處時 ?document.onclick=function(){ ????????????????//?執行腳本 ?menu.style.display='none'; ????????????} ????????} ????</script> </head> <body> <div?id="divselect"> ????<cite>請選擇分類</cite><div?class="sjx"id="sjx"></div> ????<ul> ????????<li?id="li"><a?href="javascript:;"?selectid="1">ASP開發</a></li> ????????<li><a?href="javascript:;"?selectid="2">NET開發</a></li> ????????<li><a?href="javascript:;"?selectid="3">PHP開發</a></li> ????????<li><a?href="javascript:;"?selectid="4">Javascript開發</a></li> ????????<li><a?href="javascript:;"?selectid="5">Java特效</a></li> ????</ul> </div> </body> </html>查看全部 -
ie 中的事件對象
?1 type屬性用于獲取事件類型
2 srcElement屬性 用于獲取事件的目標
3 cancelBubble屬性 用于阻止事件冒泡 設置為true表示阻止冒泡 設置為false表示不阻止冒泡
4 returnValue 屬性 用于阻止事件的默認行為? 設置為false 表示阻止事件的默認行為
查看全部 -
事件對象
什么是事件對象？在觸發DOM上的事件時都會產生一個對象 事件對象event
1 DOM中的事件對象
? ?（1） type屬性，用戶 獲取事件類型
? ? （2） target屬性 用于獲取事件目標
? ? （3 ）stopPropagation() 方法 用于阻止事件冒泡
? ? （4 ）preventDefault（）阻止事件的默認行為
hubbles 屬性? canselable 屬性
查看全部
舉報