事件
事件的綁定方式
1.事件可以在行內(nèi)綁定
<button onclick="alert(123)">按鈕1</button>
<button onclick="fn()">按鈕2</button>
<script>
function fn(){
alert(456)
}
</script>
2.用on加事件名來綁定徘禁，但是缺點(diǎn)是不能重復(fù)綁定疾渴，否則后面的綁定事件會覆蓋前面的
<body>
<button id="btn">按鈕</button>
</body>
<script>
btn.onclick=function(){
console.log("第一次單擊");
}
btn.onclick=function(){
console.log("第二次單擊");
}
</script>
3.利用事件偵聽器綁定事件addEventListener(type,handle,false);
- type參數(shù)是用寫需要綁定的事件類型
- handle參數(shù)用來處理事件函數(shù)
- 是否在捕獲階段執(zhí)行千贯，true是在捕獲階段執(zhí)行，false則是在冒泡階段執(zhí)行
用這種方法綁定事件可以對同一對象重復(fù)綁定：
<body>
<button id="btn">按鈕</button>
</body>
<script>
document.getElementById("btn").addEventListener("click",handle,false);
function handle(){
console.log("第一次點(diǎn)擊");
}
document.getElementById("btn").addEventListener("click",handle1,false);
function handle1(){
console.log("第二次點(diǎn)擊");
}
</script>
4.低版本的IE中用attachEvent()來代替搞坝，特點(diǎn)是順序注冊事件搔谴，執(zhí)行時是倒敘執(zhí)行。
事件對象
瀏覽器為事件提供的一個對象桩撮，用來記錄各種具體的信息敦第。
btn.onclick = function(){
console.log(window.event);
}
另一種寫法：
btn.onclick=function(e){
console.log(e);
}
阻止事件冒泡
事件對象中有一個方法來阻止事件冒泡，這個方法是：stopPropagation
<body>
<style>
#big{
width: 200px;
height: 200px;
border:1px solid #000;
}
#middle{
width: 150px;
height: 150px;
background: #abcdef;
}
#small{
width: 100px;
height: 100px;
background: red;
}
</style>
<div id="big">
大盒子的內(nèi)容
<div id="middle">
中盒子的內(nèi)容
<div id="small">
小盒子的內(nèi)容
</div>
</div>
</div>
</body>
<script type="text/javascript">
big.onclick=function(){
console.log(this.innerText);
console.log("大盒子的內(nèi)容完畢");
}
middle.onclick=function(){
console.log(this.innerText);
console.log("中盒子的內(nèi)容完畢");
}
small.onclick=function(e){
var ev = e || window.event;
ev.stopPropagation();
console.log(this.innerText);
console.log("小盒子的內(nèi)容完畢");
}
</script>
也有另一種寫法：
ev.cancelBubble=true; # IE低版本瀏覽器
事件類型
e.type //事件類型
鼠標(biāo)按鍵信息
e.button //鼠標(biāo)按鍵信息
它有三個返回值：
- 在事件中點(diǎn)擊鼠標(biāo)左鍵店量，則它的返回值是 0
- 在事件中點(diǎn)擊鼠標(biāo)中鍵芜果，則它的返回值是 1
- 在事件中點(diǎn)擊鼠標(biāo)右鍵，則它的返回值是 2
按鍵鍵碼
e.keyCode // 鍵盤的鍵碼
按鍵碼：
- 回車鍵的按鍵碼是13
- 空格鍵是32
- 數(shù)字和字母是它對應(yīng)的阿斯克碼值
組合鍵的判斷：
-
altKey: alt 鍵按下得到true 融师，否則得到false -
shiftKey：shift 鍵按下得到 true右钾，否則得到 false -
ctrlKey：ctrl 鍵按下得到 true，否則得到 false
document.onkeyup = function (e) {
e = e || window.event
keyCode = e.keyCode || e.which
if (e.shiftKey && keyCode === 97) {
console.log('你同時按下了 shift 和 a')
}
}
使用說明：火狐firefox2.0和低版本IE中keyCode不兼容，可以使用e.which來獲取
鼠標(biāo)坐標(biāo)點(diǎn)
offsetX和offsetY
從元素內(nèi)部開始計算坐標(biāo)
clientX和clientY
相對于瀏覽器的坐標(biāo)
pageX和pageY
相對于頁面的坐標(biāo)舀射，會隨著滾動條的滾動而加大
默認(rèn)行為
具有默認(rèn)行為的常見的兩個標(biāo)簽
鏈接<a href="/index.php">點(diǎn)我</a> <!--往屬性href指定的地址跳轉(zhuǎn) -->
提交按鈕<input type=”submit”> <!--往form表單屬性action指定的地址跳轉(zhuǎn)-->
阻止默認(rèn)行為的方法：
給鏈接設(shè)置地址為
javascript:;或javascript:void(0)在事件的最后添加
return false-
通過事件對象方法
e.preventDefault阻止窘茁，示例：function stopDefault(event) { var e = event || window.event; if (e.preventDefault){ e.preventDefault(); // w3c標(biāo)準(zhǔn)瀏覽器 }else{ e.returnValue = false; // IE瀏覽器 } }
事件委托
事件委托也叫事件代理（看站誰的角度），使用事件委托技術(shù)能避免對每個子節(jié)點(diǎn)添加事件監(jiān)聽,相反把事件監(jiān)聽委托給父元素即可脆烟，這樣可提高綁定事件的性能山林。
<ul>
<li>首頁</li>
<li>公司介紹</li>
<li>產(chǎn)品中心</li>
</ul>
<button id="btn">添加新元素</button>
<script>
var oUl = document.getElementsByTagName("ul")[0];
btn.onclick = function(){
var oNewLi = document.createElement("li");
oNewLi.innerText = "新聞中心";
oUl.appendChild(oNewLi)
}
oUl.onclick = function(e){
var ev = e || window.event;
// 獲取到單擊的目標(biāo)元素dom對象
var target = ev.target || ev.srcElement;
// 判斷是否是li標(biāo)簽
if(target.nodeName == "li"){
// 完成業(yè)務(wù)邏輯
alert(target.innerText);
}
}
</script>
