一、事件对象event
- 事件对象:当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数,在事件中封装了当前事件相关的一切信息,比如:鼠标的坐标、键盘哪个按键被按下、鼠标滚轮滚动的方向。
- 鼠标移动的练习:
window.onload=function(){
//当鼠标在areaDiv中移动时,在showMsg中来显示坐标
var areaDiv=document.getElementById("areaDiv");
var showMsg=document.getElementById("showMsg");
//onmousemove:该事件将会在鼠标元素中移动时被触发
areaDiv.onmousemove=function(event){
//解决浏览器兼容的问题
if(!event){
event=window.event;
}
//event=event||window.event;
//clientX可以获取鼠标指针的水平坐标
//clientY可以获取鼠标指针的垂直坐标
var x=event.clientX;
var y=event.clientY;
//在showMsg中显示鼠标的坐标
showMsg.innerHTML="x="+x+",y="+y;
}
}
- 在IE8中,响应函数被触发时,浏览器不会传递事件对象,在IE8及以下的浏览器中,是将事件对象作为window对象的属性保存的。
二、使div可以跟随鼠标移动
1.首先在样式表中设置div的样式时,一定要开启绝对定位
2. clientX和clientY用于获取鼠标在当前的可见窗口的坐标,div的偏移量是相当于整个页面的。
3. pageX和pageY可以获取鼠标相当于当前整个页面的坐标,但是这两个属性在IE8中不支持,所以如果需要兼容IE8,则不要使用该方式
4.将页面滚动条滚动的距离加给div的偏移量,这样div就会一直随鼠标移动
var st=document.documentElement.scrollTop;
var sl=document.documentElement.scrollLeft;
box1.style.top=top+st+"px";
box1.style.Left=Left+sl+"px";
三、事件的冒泡 Bubble
- 事件的冒泡:所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发。
- 如果不希望事件冒泡可以通过事件对象来取消冒泡。
//可以将事件对象中的cancelBubble设置为true,即可取消冒泡。
event.cancelBubble=true;
四、事件的委派
- 如果希望一次绑定事件,即可应用到多个的元素上,即使元素是后添加的,我们可以尝试将其绑定给元素的共同祖先元素。
//为ul绑定一个单击响应函数
ul.onclick=function(event){
//target: event中的target表示的是触发事件的对象
//如果触发事件的对象是我们期望的元素,则执行,否则就不执行
if(event.target.className=="link"){
alert("我是ul的单击响应函数");
}
}
- 事件的委派:将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件。
- 事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高事件的性能。
五、事件的绑定
-
使用 对象.事件=函数 的形式绑定响应函数,它只能同时为一个元素一个事件绑定一个响应函数,不能绑定多个,如果绑定了多个,则后边会覆盖前边。
-
addEventListener(): 通过这个方法也可以为元素绑定响应函数
参数:
①事件的字符串,不要on
②回调函数,当事件触发时该函数会被调用
③是否在捕获阶段触发事件,需要一个布尔值,一般都传false
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,这样当事件被触发时,响应函数将会按照函数绑定的顺序执行。
这个方法不支持IE8及以下的浏览器,IE8支持attachEvent() -
attachEvent(): 在IE8中可以使用attachEvent()来绑定事件
参数:
①事件的字符串,要on
②回调函数,当事件触发时该函数会被调用
这个方法也可以同时为一个事件绑定多个处理函数,不同的是它后绑定的先执行,执行顺序和addEventListener()相反。 -
定义一个函数,用来为指定元素绑定响应函数:
参数:
①obj 要绑定事件的对象
②eventStr 事件的字符串(不要on)
③callback 回调函数
addEventListener()中的this,是绑定事件的对象
attachEvent()中的this,是window
需要统一两个方法的this
function bind(obj,eventStr,callback){
if(obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,false);
}else{
//IE8及以下
obj.attachEvent("on"+eventStr,function(){
//在匿名函数中调用回调函数
//this是谁由调用方式决定
callback.call(obj);
});
}
}
bind(btn01,"click",function(){
alert(1);
})
六、事件的传播
IE8及以下浏览器中没有捕获阶段。
七、拖拽练习
window.onload=function(){
/*
拖拽box1元素
拖拽的流程:
1.当鼠标在被拖拽元素上按下时,可以开始进行拖拽 onmousedown
2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
3.当鼠标松开时,被拖拽元素固定在当前位置 onmouseup
*/
//获取box1
var box1=document.getElementById("box1");
//1.当鼠标在被拖拽元素上按下时,可以开始进行拖拽 onmousedown
box1.onmousedown=function(event){
//2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
event=event || window.event;
//div的左偏移量 鼠标.clentX -元素.offsetLeft
var ol=event.clientX - box1.offsetLeft;
//div的上偏移量 鼠标.clentY -元素.offsetTop
var ot=event.clientY - box1.offsetTop;
document.onmousemove=function(event){
//解决兼容问题
event=event || window.event;
//获取到鼠标的坐标
var left=event.clientX - ol;
var top=event.clientY - ot;
//设置div的偏移量
var st=document.documentElement.scrollTop;
var sl=document.documentElement.scrollLeft;
box1.style.top=top+st+"px";
box1.style.left=left+sl+"px";
};
//3.当鼠标松开时,被拖拽元素固定在当前位置 onmouseup
document.onmouseup=function(){
//取消document.onmousemove事件
document.onmousemove=null;
//取消document.onmouseup事件
document.onmouseup=null;
};
/* 当我们拖拽一个网页中的内容时,浏览器会默认去搜索
引擎中搜索内容,此时会导致拖拽功能的异常,这个是浏览器提供的默认行为
如果不希望发生这个行为,则可以通过return false来取消默认行为*/
return false;
};
}
八、滚轮练习
window.onload=function(){
/* 当鼠标向下滚动时候,box1变长,向上滚动时,box1变短 */
var box1=document.getElementById("box1");
//为box1绑定一个鼠标滚轮滚动的事件
//onmousewheel鼠标滚轮滚动的事件,会在滚轮滚动时触发,但是火狐不支持该属性
/*
在火狐中需要使用DOMMouseScroll 来绑定滚动事件
注意该事件需要通过addEventListener()函数来绑定
*/
box1.onmousewheel=function(event){
//event=event || window.event;
//判断鼠标滚轮滚动的方向
//event.wheelDelta可以获取鼠标滚轮滚动的方向
//向上滚120,向下滚-120,wheelDelta这个不看大小,只看正负
//alert(event.wheelDelta);
//火狐不支持wheelDelta
//alert(event.detail);
if(event.wheelDelta>0 || event.detail<0){
//向上滚,box1变短
box1.style.height=box1.clientHeight-10+"px";
}else{
//向下滚,box1边长
box1.style.height=box1.clientHeight+10+"px";
}
/*
当滚轮滚动时,如果浏览器有滚动条,滚动条会随之滚动,
这是浏览器的默认行为,如果不希望发生,则可以取消默认行为
*/
/*
使用addEventListener()方法绑定响应函数的,取消默认方式不能使用 return false
需要使用event取消默认行为,event.preventDefault()
但是IE8不支持event.preventDefault(),直接调用会报错
*/
event.preventDefault() && event.preventDefault();
return false;
}
bind(box1,"DOMMouseScroll",box1.onmousewheel);
function bind(obj,eventStr,callback){
if(obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,false);
}else{
//IE8及以下
obj.attachEvent("on"+eventStr,function(){
//在匿名函数中调用回调函数
//this是谁由调用方式决定
callback.call(obj);
});
}
}
}
八、键盘事件
1.onkeydown :按键被按下
对于onkeydown来说,一直按着某个键不松手,则事件会一直触发
当onkeydown连续触发时第一次和第二次会间隔一下,后面就很快,这种设计是为了防止误操作。
2.onkeyup :按键被松开
3.键盘事件一般都会绑定给一些可以获取到焦点的对象或者document
4.可以通过keyCode来获取按键的编码,可以通过它来判断哪个键被按下
if(event.keyCode===89){
console.log("y被按下了");
}
5.除了keyCode,事件对象还提供了几个属性
①altKey
②ctrlKey
③shiftKey
这三个用来判断alt、ctrl、shift是否被按下,如果按下则返回true,否则返回false