这两天课设,也没有更博,没有学习新的知识,没有复习旧的知识,所以今天晚上有点空就想着把事件的第二部分完成,(其中还应该有鼠标滚轮事件,但是今天晚上没有看到那块,所以就先更这一点,明天补齐),鼠标滚轮事件也已经完成
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";
}); //函数调用