javascript
第四部分：JS事件
本部分將介紹JS中的事件，由于各種瀏覽器的事件不同，所以有分歧，故事件在不同瀏覽器中有不同的形式，本部分主要研究IE和火狐之下的事件差異。
1.事件的分類
（1）鼠標事件
???????? ①onclick事件：是指鼠標單擊時觸發的事件
???????? ②ondbclick事件：是指鼠標雙擊時觸發的事件
???????? ③onmousemove事件：是指鼠標浮在控件上面時觸發的事件，和onmouseover的主要區別在于：onmouseover事件只要鼠標一直浮在控件上面就一直觸發這個事件
???????? ④onmousedown事件：是指按下鼠標時觸發的事件 不論鼠標是否松開
???????? ⑤onmouseout事件：是指鼠標移出控件時所觸發的事件
???????? ⑥onmouseover事件：是指當鼠標第一次進入控件上面時觸發的事件，就只觸發這一次，除非再一次進入
???????? ⑦onmouseup事件：是指當鼠標點擊之后松開鼠標時觸發的事件
（2）鍵盤事件
???????? ①onkeydown事件：是指鍵盤按下就出發的事件（不論你松不松開鍵盤），當這時為文本框賦值時，文本框里還沒有值就出發了
???????? ②onkeypress事件：和onkeydown事件一樣
???????? ③onkeyup事件：是指按下鍵盤松開鍵盤之后觸發的事件
（3）接口事件
???????? ①blur：使失去焦點
???????? ②reset：使表單重置
???????? ③submit：使表單提交
2.事件的取消
（1）return false方式
（2）如果是IE瀏覽器，window.event.returnValue=false;
（3）如果是火狐瀏覽器：e.preventDefault();
?
例如:??????????? document.getElementById("txtTest").onkeydown = function (e) {
??????????????? ????????????????if (window.event) {
??????????????????????????????????? window.event.returnValue = false;
??????????????????????????????? }
??????????????????????????????? else {
??????????????????????????????????? e.preventDefault();
???????????????????? ???????????}
????????????? }
或者直接用return false;
3.事件的注冊
???????? 如果要是一個控件想要綁定多個事件，每個都要綁定的話，很費事，所以JS給我們提供了一種方法，來為一個控件綁定多個事件。
（1）在IE下：element.attachEvent(“on+事件名", function () {……});
（2）在火狐下：element.addEventListener(“事件名”,function(){……},”bool值”),最后一個bool值是指：? false是設置冒泡由里到外，true是由外到里
?
例如：???????? if (window.attachEvent) {//判斷是否支持attachEvent
??????????????? document.getElementById("testDiv").attachEvent("onmousemove", function () { alert(123); });
??????????? }
??????????? else {
??????????????? document.getElementById("testDiv").addEventListener("mousemove", function () { alert(123); },false);
??????????? }
4.事件的冒泡和取消
（1）在IE下：window.event. cancelBubble()=true;
（2）在火狐下：e. stopPropagation();
例如：
<html>
<head>
??? <title></title>
??? <script type="text/javascript">
??????? window.onload = function () {
??????????? document.getElementById("outerDiv").onclick = function () {
??????????????? alert("你點擊了outerDiv");
??????????? }
??????????? document.getElementById("innerDiv").onclick = function (e) {
??????????????? alert("你點擊了innerDiv")
??????????????? if (window.event) {
??????????????????? window.event.cancelBubble = true;
??????????????? }
??????????????? else {
??????????????????? e.stopPropagation();
??????????????? }
??????????? }
?? ?????}
??? </script>
</head>
<body>
??? <div id="outerDiv" style="width: 200px; height: 200px; background: green;">
??????? <div id="innerDiv" style="width: 100px; height: 100px; background: red;">
??????? </div>
??? </div>
</body>
</html>
注意：冒泡時：當你點擊里面的div，外面div的點擊事件也被觸發，所以有時需要取消冒泡！
5. IE與火狐之間的區別總結
ff代表火狐瀏覽器。
（1）事件源
IE中：window.event.srcElement
ff中：e.target
（2）綁定事件
IE中：element.attachEvent(on+"事件名",function(e){……})
ff中：element.addEventListener(事件名(沒有on),function(){},bool值)?? //false是設置冒泡 有里到外，true是由外到里
（3）取消事件
IE中：? window.event.returnValue = false;
ff中：e.preventDefault();
（4）取消冒泡
IE中：window.event.cancelBubble=true;
ff中：e.stopPropagation();
（5）得到文本
IE中:element.innerText
ff中：element.textContent;
（6）取得鍵值
IE中： window.event.keyCode;
ff中： e.which;
?
轉載于:https://www.cnblogs.com/jiajiayouba/archive/2011/11/27/2265214.html
總結
- 上一篇： Linux环境用Sendmail架设Ma
- 下一篇： JS中URL编码解码