JS的事件(2)--事件函数的取消/事件默认行为/键盘事件/鼠标滚轮事件

这两天课设，也没有更博，没有学习新的知识，没有复习旧的知识，所以今天晚上有点空就想着把事件的第二部分完成，(其中还应该有鼠标滚轮事件，但是今天晚上没有看到那块，所以就先更这一点，明天补齐)，鼠标滚轮事件也已经完成

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";
    });  //函数调用