JS事件:
声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event;
所以在下面用到 event 的地方都用 oEvent 代替
1)doucument的本质:是整个文档的根节点,所有的html都包含在document里面,
不过我们平时都是省略document
document.childNodes[0].tagName-->!
document.childNodes[1].tagName-->html
2)事件对象:即event对象
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件相关的信息
如:获取鼠标的位置,获取键盘按键
如:不同浏览器下的事件对象:
IE/Chrom: event
FF/IE9+/Chrom: 传参ev
跨浏览器的事件对象兼容性写法:var oEvent==ev||event;
document.oncilck=function(ev){
var oEvent==ev||event;
if(oEvent){
alert(oEvent.clientX);
}
}
3)事件类型:
1.window上面的事件:
--window.onload:当页面完全加载完后就会触发onload事件
--window.onunload:与onload事件相对应,当文档被完全卸载后触发
--window.onresize:当浏览器窗口大小被改变期间被重复触发
--window.onscroll:在文档被滚动期间重复触发
2.焦点事件:
--element.onblur:元素失去焦点时触发
--element.onfocus:元素获得焦点时触发
3.鼠标事件:
--elelment.onclick:当用户点击某个对象时触发
--element.ondblclick:当用户双击某个对象时触发
--elelment.onmousedown:鼠标按键被按下时触发
--element.onmouseup:鼠标按键被松开时触发
--element.onmousemove:当鼠标移动时触发
--element.onmouseover:鼠标移到某元素之上时触发
--element.onmouseout:鼠标从某元素上面移开时触发
4.鼠标事件的属性:
1.--oEvent.button=0|1|2: 当事件被触发时哪个鼠标按键被点击
非IE下:
0 表示鼠标左键被点击
1 表示鼠标中键被点击
2 表示鼠标右键被点击
IE下：
1 表示鼠标左键被点击
4 表示鼠标中键被点击
2 表示鼠标右键被点击
2.--oEvent.clientX,oEvent.clientY:获取鼠标在可视区的相对位置,
即参照点在浏览器的左上角,会随着滚动条的滚动而变化,在没有滚动条时,
直接oEvent.clientX,oEvent.clientY即可获取鼠标位置,当有滚动条时,则不能直接使用
所以获取鼠标的绝对位置可以封装成一个函数:(页面有无滚动条时都可以用)
function getMousePosition(ev){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
}
例子2:让一个div跟随鼠标运动:
document.onmousemove=function(ev){
var oEvent==ev||event;
var pos=getMousePosition(oEvent);
if(oEvent){
oDiv.style.top=pos.y+'px';
oDiv.style.left=pos.x+'px';
}
}
例子2:一串div跟随鼠标移动
(html是很多宽和高都很小的div)
window.onload=function(ev){
var oDiv=document.getElementsByTagName('div');
var oEvent=ev||event;
var pos=getMousePosition(oEvent);
for(var i=oDiv.length-1;i>0;i--){ //让后一个div跟着前一个运动
oDiv[i].style.left=oDiv[i-1].offsetLeft+'px';
oDiv[i].style.top=oDiv[i-1].offsetTop+'px';
}
//让第0个div跟着鼠标运动
oDiv[0].style.top=pos.x+'px';
oDiv[0].style.left=pos.y+'px';
}
3.--oEvent.page.X, oEvent.pageY: 获取的是鼠标的绝对位置,参照点是浏览器的左上角,
与上面的getMousePosition函数的作用一样,但是IE8及以下不兼容,所以一般不使用,
获取鼠标的绝对位置还是使用getMousePosition函数
4.--oEvent.screenX, oEvent.screenY: 获取的是屏幕坐标的位置,参照点是屏幕的左上角,而不是浏览器左上角
总结:
1.screenX, clientX, pageX三者的区别:
--screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角
--clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动
--pageX：参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动(不兼容,所以还是使用clientX方法获取鼠标位置)
2.只要用到event.clientX,event.clientY,obj.clientWidth,obj.clientHeight都要用到scrollTop/scrollLeft
5.键盘事件:
--element.onkeydown:某个键盘按键被按下触发
--element.onkeyup:某个键盘按键被松开时触发
6.键盘事件的属性:
1.修改键:是指Shift,Ctrl,Alt,Meta(Windows中指win键,苹果机中指Cmd键)
这些修改键经常用来修改鼠标事件的行为,所以DOM为此规定了四个属性,
表示这些修改键的状态,更别为:shiftKey,ctrlKey,altKey,metaKey
这些属性返回的都是布尔值,当相应的键被按下时,返回true,否则返回false
使用表示:
--oEvent.shiftKey
--oEvent.ctrlKey
--oEvent.altKey
--oEvent.metaKey
ctrl+enter提交留言:
windown.onload=function(ev){
var oEvent=ev||event;
var otxt=document.getElementById('txt');
txt.onkeydown=function(){
if(oEvent.keyCode==13 && oEvent.ctrlKey){
otxtArea.value+=otxt.value;
otxt.value='';
}
}
}
2.keyCode属性:
--oEvent.keyCode可以获取鼠标的键码,也可以根据键码,判断用户按下的是哪一个按键
--在键盘控制或者是鼠标控制运动的过程中,必须要给绝对定位,才能运动
document.onkeydown=function(ev){
var oEvent=ev||event;
if(oEvent.keyCode==37){
oDiv.style.left=oDiv.offsetLeft-10+'px';
}else if(oEvent.keyCode==39){
oDiv.style.left=oDiv.offsetLeft+10+'px';
}
}
7.文本事件:
1.element.onchange: 当输入域的内容改变时触发
一般适用于文本域(text field),以及 textarea 和 select 元素
<input type="text" value="Hello world!" onchange="this.value='abccdef';" />
或者: oTxt.onchange=function(){
this.value='abccdef';
}
2.element.onselect:文本被选中时触发
<input type="text" value="Hello world!" onselect="alert('selected text')" />
8.其他事件:
--element.onabort:图像的加载被中断时触发
--element.onerror:在加载文档或图像时发生错误时触发
--element.onreset:重置按钮被点击时触发
--element.onsubmit:确认按钮被点击时触发
--element.oncontextmenu:自定义右键菜单事件,有返回值
9.补充:
--什么是浏览器的默认行为:浏览器自己本身就有的一些事件,
如在页面中我们点击右键,会出来一个浏览器自己的右键菜单; 我们在文本框中输入内容也是一种默认行为
--阻止默认行为:return false;-->会阻止浏览器所有的默认行为
示例1:只能输入数字的文本框
var oTxt=document.getElementById('txt');
oTxt.onkeydown=function(ev){
var oEvent=ev||event;
if(oEvent.keyCode!=8 && (oEvent.keyCode<48||oEvent.keyCode>57)){
return false;
}
}
有时候我们需要阻止默认行为,自己定义一个右键菜单出来:
例子2:右键弹出自己自定义的菜单(自己定义oDiv的样式)
document.oncontextmenu=function(ev){
var oEvent=ev||event;
return false; //阻止浏览器默认的浏览器右键菜单
oDiv.style.display='black';
oDiv.style.left=oEvent.clientX; //没有滚动条的情况
oDiv.style.top=oEvent.clientY;
}
document.onclick=function(){
oDiv.style.display='none'; //单击页面其他位置,自定义菜单消失
}
4)多事件绑定: attachEvent/attachEventLister
当页面中有两个window.onload时,页面会只执行第二个
有时我们希望两个相同的函数都能执行,这里需要事件绑定
1)事件绑定:(不兼容需要两个结合做兼容if..else..)
IE8以下用: attachEvent('事件名',fn);
FF,Chrome,IE9-10用: attachEventLister('事件名',fn,false);
同一对象绑定两个相同事件,两个事件都会执行
if(oBtn.attachEvent){
oBtn.attachEvent('onclick',function(){
alert('a');
});
oBtn.attachEvent('onclick',function(){
alert('b');
});
}else{
oBtn.attachEventLister('click',function(){
alert('a');
},false);
oBtn.attachEventLister('click',function(){
alert('b');
},false);
}
多事件绑定封装成一个兼容函数:
function myAddEvent(obj,ev,fn){
if(obj.attachEvent){
obj.attachEvent('on'+ev,fn);
}else{
obj.attachEventLister(ev,fn,false);
}
}
myAddEvent(oBtn,'click',function(){
alert(a);
});
myAddEvent(oBtn,'click',function(){
alert(b);
});
2)解除绑定:
IE:detachEvent('事件名',fn);
FF,Chrome,IE9-10:removeEventLister('事件名',fn,false);