-
<!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;}
</style>
<script>
? ? ? window.onload=function(){
? ? ? ?var login_btn = document.getElementById('login'),
? ? ? ? login_box = document.getElementById('login_box'),
? ? ? ? close = document.getElementById('close');
? ? // 封裝添加事件監(jiān)聽(tīng)程序
? ? function addEvent(ele, type, hander) {
? ? ? ? // 執(zhí)行代碼??
? ? ? ? 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() {
? ? ? ? // 執(zhí)行代碼
? ? ? ? login_box.style.display = 'block';
? ? }
? ? // 隱藏登錄層函數(shù)
? ? function hideLogin() {
? ? ? ? // 執(zhí)行代碼
? ? ? ? login_box.style.display = 'none';
? ? }
? ? //點(diǎn)擊登錄按鈕顯示登錄層
? ? addEvent(login_btn, 'click', showLogin);
? ? // 執(zhí)行代碼
? ? //點(diǎn)擊關(guān)閉按鈕隱藏登錄層
? ? addEvent(close, 'click', hideLogin);
?}
</script>
</head>
<body>
<div class="head">親，您好！<input type="button" value="登 錄" id="login"></div>
<div id="login_box">
<p>用戶(hù)登錄</p><span id="close"></span>
</div>
</body>
</html>
查看全部 -
實(shí)現(xiàn)點(diǎn)擊頁(yè)面中的登錄按鈕，顯示登錄層
查看全部 -
IE中 阻止事件冒泡和阻止事件默認(rèn)行為都是 屬性，不是方法
查看全部 -
通過(guò)class來(lái)獲取元素
查看全部 -
preventDefault()方法阻止事件的默認(rèn)行為 eg ,<a></a>的默認(rèn)跳轉(zhuǎn)
查看全部 -
event.type //得到添加的事件類(lèi)型
默認(rèn) 事件向上冒泡 ，點(diǎn)擊按鈕觸發(fā)事件，會(huì)接著觸發(fā) 按鈕外層 綁定的事件
event.stopPropagation()//阻止事件冒泡
查看全部 -
跨瀏覽器解決方法：封裝在一個(gè)對(duì)象EventUtil 內(nèi)
變量和字符串不能用 .? 連接
在js中，連接一個(gè)屬性時(shí)，所有用 . 的地方都可以用【】連接
element.onclick等價(jià)于 element['onclick']
查看全部 -
IE事件處理程序
attachEvent（事件，事件觸發(fā)的函數(shù)）//添加事件，事件+on
detachEvent（'onclick',showMes）//刪除事件
ctrl shift / 注釋
查看全部 -
this關(guān)鍵字可以 引用被觸發(fā)的元素
DOM 0級(jí)，2級(jí)? 可以在一個(gè)按鈕上添加多個(gè)事件處理程序。
查看全部 -
DOM?2級(jí)事件 btn3.addEventListener('事件?eg：click'，調(diào)用的函數(shù)，布爾值); //addEventListener方法給這個(gè)元素添加事件監(jiān)聽(tīng)程序?? 事件都要去掉on 布爾值?false?兼容各種瀏覽器通過(guò)addEventListener添加的事件只能通過(guò)removeEventListener 方法刪除事件?參數(shù)與添加時(shí)相同
查看全部 -
btn2.onclick=null;//清空onclick屬性
查看全部 -
contrl shift f 整理代碼格式
查看全部 -
?可用于平時(shí)調(diào)試
document.title = "測(cè)試"
console.log("測(cè)試")
查看全部 -
IE 和其他瀏覽器是有區(qū)別的
查看全部 -
事件對(duì)象（event）：在觸發(fā) DOM 上的事件時(shí)都會(huì)產(chǎn)生一個(gè)對(duì)象
DOM 中的事件對(duì)象
type 屬性：用于獲取事件類(lèi)型
target 屬性：用于獲取事件目標(biāo)
stopPropagation() 方法，阻止時(shí)間冒泡
preventDefault() 方法，阻止事件的默認(rèn)行為；比如讓鏈接不再跳轉(zhuǎn)
查看全部
舉報(bào)