<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS2</title> <style type="text/css"> #d1{ height: 100px; width: 100px; background-color: red; ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS2</title>
<style type="text/css">
#d1{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;
transition-delay: 0s;
transition-duration: 6s;
transition-timing-function: linear;
transition-property:all;
}
</style>
</head>
<body>
<div style="border: solid 5px blue;">
<div style="height: 50px;"></div>
<div id="aa"></div>
</div>
<textarea id="t"></textarea>
<button id="btn">點一下</button>
<div id="dd"></div>
<div id="d1"></div>
<script type="text/javascript">
//距離問題
var a = document.getElementById('aa');
console.dir(a);
//clientHeight = 內邊距 + height(實際尺寸) 不含滾動軸的寬度
//offsetHeight = 內邊距 + height + 邊框寬度
//scrollHeight = 如果滾動條出現，則是可滾動的極限高度。如果沒有滾動條，高度和clientHeight一樣
a.clientHeight;
a.clientWidth;
a.offsetWidth;
a.offsetHeight;
a.offsetTop;
a.clientTop
a.scrollTop;
a.scrollWidth;
a.scrollHeight;
//滑鼠的距離
//滑鼠點擊事件發生的時候"點擊點"距離瀏覽器左上角的距離
//如果有滾動距離，該距離不含滾動距離，知識相對看到的區域左上角的位置
var i = document.getElementById('dd');
i.onclick = function (xxx) {
event.clientX;
event.clientY;
event.pageX;
event.pageY;
event.target;
event.toElement;
}
//按鍵事件及按鍵判斷
document.onkeydown = function(){
var d1 = document.getElementById('d1');
if (event.key == 'd') {
d1.style.left = d1.offsetLeft + 100 + 'px';
}
if (event.key == 'a') {
d1.style.left = d1.offsetLeft - 100 + 'px';
}
if (event.key == 's') {
d1.style.top = d1.offsetTop + 100 + 'px';
}
if (event.key == 'w') {
d1.style.top = d1.offsetTop - 100 + 'px';
}
}
//JS有兩種流:捕獲流和冒泡流
//捕獲流:最外層最先接收的事件，然後逐級向下傳播，知道傳到具體的元素對象上
//冒泡流:最內層(最具體的元素)最先接收到事件，然後逐級向上傳播，知道最外層
//HTML事件就是事件以及事件的處理程式和html混寫在一起
//DOM 0級事件
d1.onclick = f1;
//清楚DOM 0級事件
d1.onclick = null;
//DOM 2級事件
//可以為一個對象添加多個相同的事件處理程式，執行順序按照代碼先後順序執行
//參數1:事件類型(不帶on)
//參數2:事件的處理程式
//參數3:表示添加事件的時機，為true時表示在捕獲階段添加事件，false表示在冒泡階段添加事件
d1.addEventListener('click',f1,true);
d1.addEventListener('click',f2,true);
//移出DOM 2級事件處理程式(參數和綁定時的一致)
d1.removeEleventListener('click',f1,true);
//IE事件模型
//添加事件(只在冒泡階段添加)，該方法也可以為一個對象添加多個相同事件
//參數1:事件類型(帶on)
//參數2:事件的處理程式
d1.attachEvent('onclick',f1);
d1.attachEvent('onclick',f2);
//移除事件
d1.detachEvent('onclick',f1);
//相容性處理
//思路:考慮多種瀏覽器的具體情況，然後統一封裝，方便後期維護
//event事件
var d1 = document.getElementById('d1');
d1.onclick = function(e){
//event對象只有在事件發生的時候才會產生
//事件對象其實會預設傳入到事件處理程式中
alert(e)
//獲取事件的時候，使用這樣的操作進行相容的獲取對象方法
}
//防止事件冒泡
e.stopPropagation();
//IE
window.event.cancelBubble = true;
//委托綁定
//利用事件的冒泡特性，將本來該綁定到具體的元素的事件委托給其上級對象進行綁定
var u = document.getElementById('u');
u.addEventListener('click',function(){
console.log(event.target.innerHTML);
console.log(this);
})
//Window對象
window.innerHeight;
window.innerWidth;
window.open();
window.print();
window.close();
window.confirm();
window.prompt();
window.scrollTo(100,500);
window.name;
window.self;
window.parent;
window.document.(...);
</script>
</body>
</html>
