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