這兩天課設，也沒有更博，沒有學習新的知識，沒有複習舊的知識，所以今天晚上有點空就想著把事件的第二部分完成，(其中還應該有滑鼠滾輪事件，但是今天晚上沒有看到那塊，所以就先更這一點，明天補齊)，滑鼠滾輪事件也已經完成

1. 事件函式的取消

//事件函式的取消
    function fn1() {    //先寫一個簡單的函式
        alert(22222);
    }
    document.onclick = fn1;   //把fn1這個函式賦給這個事件

    //第一種事件繫結形式的取消
    document.onclick = null;
    //第二種事件函式的取消   ie下的事件取消：obj.detachEvent(事件名稱，事件函式);
 

    document.removeEventListener("click",fn1,false);    //false:冒泡；true:捕獲

2.事件的預設行為

解釋：當一個事件發生時，瀏覽器預設會做的事情

如：點選右鍵會有個選單等（oncontextmenu，右鍵–環境選單顯示出來時觸發）

阻止預設行為：

1、當前這個行為是什麼事件觸發

2、在這個事件處理函式中使用return false

3.鍵盤事件

onkeydown：當鍵盤按鍵按下時觸發

onkeyup：當鍵盤按鍵擡起時觸發

event.keyCode：數字型別,鍵盤按下時，每個鍵都有一個自己對應的數值

鍵盤按鍵值event下還有ctrlKey，shiftKey，altKey布林值

當一個事件發生時，如果ctrl或shift或alt是按下狀態，返回true，否則返回false

//鍵盤事件：onkeydown--鍵盤按下時觸發；onkeyup--鍵盤擡起時觸發
    //判斷當前按鍵的鍵值
    document.onkeydown = function (ev) {
        ev = ev || event;
        alert(ev.keyCode);
        //下面三個彈出的是布林值，如果按下的鍵是那個，則返回true，否則返回false
 

        //alert(ev.ctrlKey);
        //alert(ev.shiftKey);
        //alert(ev.altKey);
    };

需要注意的是:

按鍵事件在按下不擡起時會連續觸發

但是連續觸發前會有一個停頓，因此在做按住連續觸發並且不想要停頓效果時，需要自己寫連續方法（用計時器的方法）

練習：鍵盤事件：做一個輸入框和一個ul，按下回車時輸入框內容變成留言

<!--鍵盤事件：做一個輸入框和一個ul，按下回車時輸入框內容變成留言-->
<input type="text" placeholder="" id="text">
<ul id="text_ul">

</ul>

    //鍵盤事件：做一個輸入框和一個ul，按下回車時輸入框內容變成留言
    var oText = document.querySelector("#text");
    var oUl = document.querySelector("#text_ul");
    document.onkeydown = function (ev) {
        ev = ev || event;
        if(ev.keyCode === 13){
            var oLi = document.createElement("li");//建立li元素
            oLi.innerHTML = oText.value;
            oUl.appendChild(oLi);
            oText.value = "";
        }
    }

4.滑鼠滾輪事件

ie/chrome：onmousewheel

firefox : DOMMouseScroll //必須用addEventListener，而且要判斷一下是否有addEventListener，否則ie會出問題

上下滾輪的屬性：

ie/chrome：event.wheelDelta //上：120 下：-120

firefox：ev.detail //上：-3 下：3

如果有滾動條會觸發滾動的預設行為，阻止預設行為，但是return false只能阻止on事件所觸發的預設行為，不能阻止addEventListener繫結的事件，這種需要通過event下面的ev.preventDefault()來阻止（同樣需要判斷存在）

注意：attachEvent用的卻是return false

#div3{
            width: 300px;
            height:300px;
            background-color: slategray;
        }


//<!--滑鼠滾輪事件：滾動滑鼠滾輪，改變元素的高度-->
<div id="div3"></div>


//    滑鼠滾輪事件：滾動滑鼠滾輪，改變元素的高度

    var oDiv3 = document.querySelector("#div3");
    function mouseWheel(obj,fnUp,fnDown){
        var b = true;
        if(navigator.userAgent.indexOf("Firefox") >= 0){   //相容火狐瀏覽器
            obj.addEventListener("DOMMouseScroll",function(ev){
                b = ev.detail<0 ? true : false;   //true上滾，false下滾；ev.detail < 0是上滾
                b ? fnup() : fndown();  //fnup(),fndown()是呼叫的兩個函式，說明滾輪在上滾或下滾時發生的事情
                ev.preventDefault();   //false指不捕獲，即冒泡
            },false);
        }else{
            obj.onmousewheel = function () {
                b = event.wheelDelta > 0 ? true : false;
                b ? fnUp() : fnDown();    //true上滾，false下滾
                return false;   //阻止瀏覽器的預設行為
            }
        }
    }
    mouseWheel(oDiv3,function () {
        oDiv3.style.height = oDiv3.offsetHeight - 6 + "px";
    },function () {
        oDiv3.style.height = oDiv3.offsetHeight + 6 + "px";
    });  //函式呼叫