<!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>