事件
事件对象
当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数
在事件对象中封装了当前事件相关的一切信息,比如,鼠标的坐标,键盘哪个键被按下…
onmousemove
该事件将会在鼠标在元素中移动是触发
clientX可以获取鼠标指针的水平坐标
clientY可以获取鼠标指针的垂直坐标
在IE8中,响应函数被触发时,浏览器不会传递事件对象
->
在IE8及以下的浏览器中,是将事件对象最为window对象的属性保存的
div跟随鼠标移动
pageX和pageY不兼容IE8
事件的冒泡(Bubble)
所谓的冒泡是指事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会触发
在开发中大部分冒泡是有用的,如果不需要可以通过事件对象
来取消冒泡
事件的委派
为每一个超链接绑定单击函数,比较麻烦而且,新添加的超链接绑定不上
->
希望只绑定一次就可以应用到所有元素,即使后添加
可以尝试将其绑定给元素的共同祖先元素
事件的委派
指将事件统一绑定给元素的共同祖先元素,这样后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理
事件委派,是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序性能
target
事件的绑定
使用对象.事件 = 函数 的形式绑定响应函数,它只能同时为一个元素的一个事件绑定一个响应函数,如果绑定多个会被覆盖,只执行最后一个
addEventListener()
通过这个方法也可以为元素绑定响应函数
->参数:
- 事件的字符串,不要on(onclick->click)
- 回调函数,当事件触发时该函数会被调用
- 是否在捕获阶段触发事件,需要一个布尔值,一般是false
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数
,这样当事件被触发时,响应函数将会按照函数的绑定顺序执行
attachEvent()
在IE8中可以使用attachEvent()来绑定事件
->参数:
- 事件的字符串,要on
- 回调函数
这个方法也可以同时为一个事件绑定多个处理函数,不同的是它是后绑定先执行(倒着反应,3-2-1),执行顺序和上面的相反
定义一个指定函数为元素绑定响应函数
addEventListener()中的this,是绑定时间的对象
attachEvent()中的this,是window
需要统一两个方法this
this由调用方式决定
(匿名函数中调用回调函数)
参数:
- obj 要绑定的事件对象
- eventStr 事件的字符串(不要on)
- callback 回调函数
function bind(obj,eventStr,callback){
if(obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,false);}
else{
//IE8及以下兼容的方式
obj.attachEvent("on" + eventStr,function(){
//在匿名函数中调用回调函数callback
callback.call(obj);
}
事件的传播
关于事件的传播,网景公司和微软公司有不同的理解:
微软认为事件应该是由内向外,也就是当事件触发时当前元素上的事件,然后再向前元素的祖先元素上传播,也就是说事件应该在冒泡阶段执行
网景认为,事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件,然后向内传播给后代元素
W3C综合了两个公司的方案,将事件传播分成了三个阶段:
- 捕获阶段
在捕获阶段时从最外层的祖先元素,向目标元素进行事件捕获,但是默认此时不会触发事件 - 目标阶段
事件捕获到目标元素,捕获结束开始在目标元素上触发事件 - 冒泡阶段
事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件
如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true
一般情况下不会希望,所以一般都是false
IE8及以下的浏览器中没有捕获阶段
事件练习
拖拽(一)
流程:
- 当鼠标在被拖拽元素上按下时,开始拖拽
onmousedown
- 当鼠标移动时被拖拽元素跟随鼠标移动
onmousemove
- 当鼠标松开时,被拖拽元素被固定在当前位置
onmouseup
windown.onload = function(){
//获取box1
var box1 = document.getElementById("box1");
//为box1绑定一个鼠标按下事件
//当鼠标在被拖拽元素上按下时,开始拖拽onmousedown
box1.onmousedown = function(){
//当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
//为document绑定一个onmousemove事件
document.onmousemove = function(){
//当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
//获取鼠标坐标
var left = event,clientX;
var right = event.clientY;
//修改box1的位置
box1.style.left = left+"px";
box1.style.top = top+"px";
};
//为元素绑定一个鼠标松开事件
box1.onmouseup = function(){
//当鼠标松开,被拖拽元素固定在当前位置 onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
document.onmouseup = null;
}
}
拖拽(二)
鼠标相对位置不能改变
windown.onload = function(){
var box1 = document.getElementById("box1");
box1.onmousedown = function(){
event = event|| window.event;
//div偏移量 鼠标.clientX - 元素.offsetLeft
//div偏移量 鼠标.clientY - 元素.offsetTop
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;
document.onmousemove = function(){
event = event|| window.event;
var left = event.clientX-ol;
var right = event.clientY-ot;
box1.style.left = left+"px";
box1.style.top = top+"px";
};
box1.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
}
拖拽(三)
windown.onload = function(){
var box1 = document.getElementById("box1");
box1.onmousedown = function(){
event = event|| window.event;
//div偏移量 鼠标.clientX - 元素.offsetLeft
//div偏移量 鼠标.clientY - 元素.offsetTop
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;
document.onmousemove = function(){
event = event|| window.event;
var left = event.clientX-ol;
var right = event.clientY-ot;
box1.style.left = left+"px";
box1.style.top = top+"px";
};
box1.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
对IE8不起作用
鼠标滚轮事件
onmousewheel
鼠标滚轮滚动事件,会在滚动时触发
(firefox不承认【现在承认了】,需要使用DOMMouseScroll
来绑定滚动事件
注意该事件需要通过addEventListener()函数
来绑定)
键盘事件
onkeydown
按键被按下
如果按着一直不松手,事件会一直触发
当onkeydown连续触发,第一次和第二次之间会间隔稍微长一点,其他会非常快(为了防止误操作的发生)
onkeyup
按键被松开
键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
keyCode
获取按键编码
可以判断哪个按键被按下
alkey
ctrkey
shiftkey
这三个用来判断alt shift ctrl 是否被按下
如果按下返回true,反之false
BOM
浏览器对象模型
BOM可以使我们通过JS来操作浏览器
在BOM中为我们提供了一组对象,用来完成对浏览器的操作
BOM对象
- Window
代表的是整个浏览器的窗口,同时window也是网页中的全局对象
- Navigator
代表当前浏览器的信息,通过该对象可以识别不同的浏览器
- Location
代表当前浏览器的地址信息,通过location可以获取地址栏信息,或者操作浏览器跳转页面
- History
代表了浏览器历史记录,可以通过该对象来操作浏览器的历史记录,由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页,而且该操作只在当次访问有效
- Screen
代表用户屏幕信息,通过该对象可以获取到用户的显示器的相关信息
这些BOM对象在浏览器中都是作为window对象的属性保存的
可以通过window对象来使用,也可以直接使用
Navigator
代表当前浏览器的信息,通过该对象可以识别不同的浏览器
由于历史原因,Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
一般我们只会使用userAgent
来判断浏览器信息,userAgent是一个字符串,这个字符串中包含游用来描述浏览器信息的内容,不同的浏览器会有不同的userAgent
History
对象可以用来操作浏览器向前或者向后
length
属性,可以获取到当成访问的链接数量
alert(history.length);
back()
可以用来退回到上一个页面,作用和浏览器的回退按钮一样
history.back();
forward()
可以跳转到下一个页面,和浏览器前进按钮一样的
history.forward();
go()
可以跳转到指定页面
它需要一个整数作为参数
- 1: 表示向前跳转一个页面
- 2:表示向前跳转两个页面
- -1表示向后跳转一个页面
history.go(1);
Location
该对象中封装了浏览器的地址栏信息
如果将location属性修改为一个完整路径或相对路径,则页面会自动跳转到该路径,并且会生成相应的历史路径
assign
用来跳转到其他界面,作用和直接修改location
reload()
用于重新加载当前页面,作用和刷新按钮一样
如果在方法中传递一个true,作为参数,则会强制清空缓存刷新页面
location.reload(true);
replace()
可以使用一个新的页面替换当前页面,调用完毕也会跳转页面
不会生成历史记录,不能使用回退按钮回退