-
<!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');
? ? // 封裝添加事件監聽程序
? ? 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>
查看全部 -
實現點擊頁面中的登錄按鈕，顯示登錄層
查看全部 -
IE中 阻止事件冒泡和阻止事件默認行為都是 屬性，不是方法
查看全部 -
通過class來獲取元素
查看全部 -
preventDefault()方法阻止事件的默認行為 eg ,<a></a>的默認跳轉
查看全部 -
event.type //得到添加的事件類型
默認 事件向上冒泡 ，點擊按鈕觸發事件，會接著觸發 按鈕外層 綁定的事件
event.stopPropagation()//阻止事件冒泡
查看全部 -
跨瀏覽器解決方法：封裝在一個對象EventUtil 內
變量和字符串不能用 .? 連接
在js中，連接一個屬性時，所有用 . 的地方都可以用【】連接
element.onclick等價于 element['onclick']
查看全部 -
IE事件處理程序
attachEvent（事件，事件觸發的函數）//添加事件，事件+on
detachEvent（'onclick',showMes）//刪除事件
ctrl shift / 注釋
查看全部 -
this關鍵字可以 引用被觸發的元素
DOM 0級，2級? 可以在一個按鈕上添加多個事件處理程序。
查看全部 -
DOM?2級事件 btn3.addEventListener('事件?eg：click'，調用的函數，布爾值); //addEventListener方法給這個元素添加事件監聽程序?? 事件都要去掉on 布爾值?false?兼容各種瀏覽器通過addEventListener添加的事件只能通過removeEventListener 方法刪除事件?參數與添加時相同
查看全部 -
btn2.onclick=null;//清空onclick屬性
查看全部 -
contrl shift f 整理代碼格式
查看全部 -
?可用于平時調試
document.title = "測試"
console.log("測試")
查看全部 -
IE 和其他瀏覽器是有區別的
查看全部 -
事件對象（event）：在觸發 DOM 上的事件時都會產生一個對象
DOM 中的事件對象
type 屬性：用于獲取事件類型
target 屬性：用于獲取事件目標
stopPropagation() 方法，阻止時間冒泡
preventDefault() 方法，阻止事件的默認行為；比如讓鏈接不再跳轉
查看全部
舉報