今天學習了javascript中的事件，已經接近尾聲，可以說明天跨入jquery的學習啦，學習了一周的javascript，感覺還沒有掌握其中學習的微妙之處，javascript使用起來是比較靈活的，而且很多瀏覽器的兼容性還是不一樣的，嘿嘿，或許這就是原因的所在吧，在事件的處理上面還是很容易理解的，前面學習了那么多的語法知識以及對DOM的操作，想必在事件的學習上還是很容易接受的，就來總結一下吧。
一.this的對象的區分
<script> //實現html與js分離的原則 window.onload = function () { document.getElementsByName("btn")[0].onclick = function () { alert("我點擊的是第一個按鈕"); alert(this); //this指的是windw alert(this.value); //this指的是所因為0的按鈕 }; document.getElementsByName("btn")[1].onmouseenter = function () { alert(this.value); //指的是鼠標進入事件 }; function showMsg() { alert("my name is btn "); }; document.getElementsByName("btn")[2].onclick=showMsg; //鼠標的單擊事件 }; </script> <body> <form> <input type="button" name="btn" value="點擊" /><br /> <input type="button" name="btn" value="點擊函數執行" /><br /> <input type="button" name="btn" value="函數體賦值" /> </form> </body>
其實剛開始接觸javascript就接觸了this，那時間雖然知道當前頁面有個父類是window，但是卻不知道在直接alert（this）的this為window，一直在迷茫中也沒有明白，后來還是看了一個有關閉包的問題才對this有了了解，可以說就在這時間我才分清楚this在什么情況下指的是window，在什么情況下是當前的對象。就來看下我理解this時間的例子：
<script>
var name = "my name";
var resoult="";
var object = {
name: "my object",
getNameFunc: function () {
return function () {
return this.name;
};
}
};
alert(object.getNameFunc()());
</script>
<script>
var name = "my name";
var resoult="";
var object = {
name: "my object",
getNameFunc: function () {
var that = this;
return function () {
return that.name;
};
}
};
alert(object.getNameFunc()());
</script>
可以看下上面的兩個例子的區別，一個是直接返回name，一個是把this賦值給that，而第一個彈出的值是my name，第二個彈出的值是my object，嘿嘿，我剛開始直接看這個例子時間沒考慮很多，只是猜一猜的心態感覺第一個是object，第二個是name，恰恰相反的是，第一是name，第二個是object，這個說起來只有分析，但是你嘗試的時間結果就在你面前，你也不得不相信啦，至於為什么會是這樣的結果，還是我師傅給的解釋：javascript是動態（或者動態類型）語言，this關鍵字在執行的時候才能確定是誰。所以this永遠指向調用者，即對‘調用對象‘者的引用。第一部分通過代碼：object.getNameFunc()調用返回一個函數。這是個返回的函數，它不在是object的屬性或者方法，此時調用者是window。因此輸出是 The Window；第二部分，當執行函數object.getNameFunc()后返回的是：function（）{return that name}；此時的that=this，而this指向object，所以that指向object，無論執行多少次，都是執行對object的引用，所以彈出的是my object。這個還是最好理解的吧，嘿嘿。
二.鼠標按下和按鈕提交事件
<script> window.onload = function () { document.body.getElementsByTagName("span")[0].onmousedown = function (e) { var e = e || window.event; //在這里鼠標按下事件有三種情況，0代表鼠標左鍵按下事件，1代表鼠標滾軸按下事件，2代表右鍵按下事件 alert(e.button); }; document.getElementsByName("name")[0].onsubmit = function (e) { e.preventDefault(); //阻止默認行為的發生 }; }; </script> <body> <p style="background-color:pink">1234</p> <span style="background-color:yellow">元素</span> <input type="submit" name="name" value="提交 " id="submit" /> </body>
在寫鼠標的onmousedown事件時間，這個就是要考慮其他的情況啦，我上面的注釋寫的鼠標的左右和滾軸鍵按下的事件彈出的數字，在IE里賣弄是不一樣的，其他瀏覽器是這樣的情況，IE中左鍵是0，滾軸鍵是4，鼠標的右鍵按下事件則是2，這個是需要注意的。另外，在第二個submit提交的事件中傳的一個參數e，很確定的說學習了上面的this，在這里應該能夠反映過來e指的就是我們的window對象，可以使用preventDefault（）來阻止瀏覽器加載就要跳轉的頁面。
三.冒泡與捕獲
<script>
window.onload = function () {
document.getElementById("outdiv").onclick = function () {
alert("我是外層div");
};
document.getElementById("div").onclick = function () {
alert("我是中層div");
};
document.getElementById("innerdiv").onclick = function () {
alert("我是內層div");
};
};
</script>
<body>
<div style="background-color:yellow;height:800px" id="outdiv">
123
<div style="background-color:red;height:600px" id="div">
234
<div style="background-color:silver" id="innerdiv">
345
</div>
</div>
</div>
<a href="http://www.baidu.com" id="link">鏈接</a>
</body>
冒泡事件：其實就是在一個對象上觸發某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那么此事件就會調用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個事件會向這個對象的父級對象傳播，從里到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。上面的定義看過后不一定能夠真正的了解，還是實施操作實例吧，嘿嘿，很簡單的說：冒泡事件，即點擊內層的div時間中層的和外層的都可以觸發，點擊中層的外層的可以觸發。這是看上面的實例寫的。
四.按鍵按下事件
<script> window.onload = function () { document.getElementById("txt").onkeydown = function () { var length = this.value.length; if (length > 150) { return false; } else { document.getElementById("span").innerHTML = length + "/150"; } }; }; </script> <body> <textarea id="txt" style="background-color:silver" rows="20" cols="20"> </textarea><span id="span">0/150</span> </body>
看到按鍵按下事件可能很模=迷惑，這個事件能有什么用那?不要着急，其實像上面的事件的實現我們就可以想象我們在qq空間發表說說時間是不是有一個限制，最多的字是多少？當達到一定字的數量輸入的字即被忽略。在這里使用的就是按鍵的按下事件。
五.頁面刷新事件
<script> function fresh() { window.location.reload(); //調用location對象的reload函數 } setTimeout("fresh()",10000); </script> <body> <p>頁面正在刷新</p><span id="span"></span> </body>
頁面刷新使用的reload方法，這里方法一般用於要求不斷更新數據的情況下，不斷更新數據當然需要的不是手動的更新，而是頁面自動更新，這樣的情況主要使用於像12306的預定火車票，甚至更精確地是炒股的頁面。
六.頁面的前進與后退
<body>
<span>我是第一個標簽</span><a href="007.html">007back</a>
</body>
<script> window.onload = function () { document.getElementById("btn").onclick = function () { window.history.back(); //返回到上一頁 }; document.getElementById("back").onclick = function () { window.history.farword(); //前進到下一頁 }; } </script> <body> <input type="button" name="name" value="向前 " id="btn" /> <input type="button" name="name" value="退后 " id="back" /> </body>
<body> 最后以及節點<a href="007.html">退后</a> </body>
前幾天就學習了頁面的前進與后退使用window的history這個屬性，但是僅僅學習了后退使用的是history的back（）方法或者在IE上面也可以使用go（-1），現在學習下前進頁面則使用的是history的farword（）方法，這樣實現了頁面的前進與后退。
七.頁面在一定的時間內未發生事件則關閉
<script> window.onload = function () { document.getElementsByTagName("body")[0], onclick = function () { var bool = true; function clickBody() { bool= false; }; setInterval(function () { if (bool) { window.close(); } else { bool = true; }; },10000); }; }; </script> <body> <p>如果10秒鍾之后不操作，那么頁面自動關閉</p> </body>
這個功能的實現可能會使用在我們個人的的信息需要保密，當我們長時間未操作界面即可讓他關閉即可。有助於保護我們的個人隱私信息。
八.廣告的實現
<script> function showAdPic() { var ad = document.getElementById("ad"); ad.innerHTML = "<img src='1.jpg' width='300' height='200'>"; setTimeout(function () { ad.style.display = 'none'; },10000) } window.onload = showAdPic; </script> <body> <p>網頁內容上部</p> <p id="ad"></p> <p>網頁內容下部</p> </body>
說起來廣告頁面，我們都很討厭的，嘿嘿，這是一種最簡單的方法實現的廣告的頁面的呈現，即在這里是呈現10鍾后消失。
九.五角星實現評分的效果
<script> window.onload = function () { var isClicked; var spansnode = document.getElementsByTagName("span"); for (var i = 0; i < spansnode.length; i++) { spansnode[i].onmouseover = function () {// 鼠標進入的事件 if (isClicked) return; for (var j = 0; j < spansnode.length; j++) { spansnode[j].innerHTML = "★"; if (spansnode[j] === this) { break; } } }; spansnode[i].onmouseout = function () {// 鼠標離開事件 if (isClicked) return; for (var j = 0; j < spansnode.length; j++) { spansnode[j].innerHTML = "☆"; } }; } } </script> <body> <div> <span>☆</span> <span>☆</span> <span>☆</span> <span>☆</span> <span>☆</span> </div> </body>
上面的功能其實也是我們很熟悉的，最常見的地方就是我們在淘寶買完商品后對店家的評分，功能其實就是這樣實現的。
十.菜單的事件
<style> .meun { list-style: none; width: 400px; margin: 10px auto; } .meun li { float: left; width: 98px; border: 1px solid black; } .meun a { color: black; width: 100%; } .meun a:hover { background-color: pink; } .curr { background-color: pink; } </style> <script> window.onload = function () { var currentIndex = 1; var menunodes = document.getElementById('menu'); var itemslinode = menunodes.children; for (var i = 0; i < itemslinode.length; i++) { itemslinode[i].onmouseover = function () { this.className = 'menuname'; }; }; }; </script> <body style=" text-align:center"> <ul class="menu" id="menu"> <li><a href="#" class="a">菜單</a></li> <li><a href="#" class="a" >菜單</a></li> <li><a href="#" class="a">菜單</a></li> <li><a href="#" class="a">菜單</a></li> </ul> </body>
好啦，今天就寫到這里，可以說javascript的基本知識要告一段落啦，下面就要學習它的一個庫JQuery，熟悉了javascript不知道學習jquery是否真的很簡單，但是無論怎樣都想以一種誠懇的態度對待，相信只有這樣學習起來才不會輸在起點上面，嘿嘿，明天繼續加油！