javascript中常用事件

一 获取事件对象

document.onmouseover=function(){
console.log("a")}
由于火狐的兼容性问题，所以通过传参来解决兼容性问题
document.onclick=function(a){
var ev=a||window.event;
console.log(ev)
}

二获取鼠标当前位置clientX\clientY

event.clientX 在可视区中,鼠标点击的x坐标 
event.clientY 在可视区中,鼠标点击的y坐标 

三 鼠标按下(onmousedown)和抬起(onmouseup)事件

demo  :使用鼠标拖拽一个div 

var box=document.getElementById('box');
document.onmousedown=function(e){
// 解决火狐兼容性问题
var evs=e||window.event; 
var divx=evs.clientX-box.offsetLeft;
var divy=evs.clientY-box.offsetTop;     
 document.onmousemove=function(b){
 // var evs=b||window.event; // 解决火狐兼容性问题
 var evb=b||window.event; 
 var divxb=evb.clientX-divx;
 var divyb=evb.clientY-divy; 
 box.style.left=divxb+"px";
 box.style.top=divyb+"px";
 console.log(divxb)
 }

 document.onmouseup=function(a){
 var eva=a||window.event; // 解决火狐兼容性问题
 document.onmousemove="null";
  }
  }

四 鼠标双击事件:ondblclick

五 组织默认事件的2中方法：

1 return false 由于会阻止其他，所以一般放在最后执行

2 preventDefault 对IE6-IE8不兼容

六 键盘事件 keydown keyup

keydown携带的一个参数是:keyCode,这个参数里的是每个按键的编码,我们可以通 过编码来判断用户按的是哪个按键

demo  使用键盘的上下左右键控制div移动 
<script type="text/javascript">
var box=document.getElementById('box');
var l=0;
var t=0;
var s=0;
document.onkeydown=function(a){
var ev=a||window.event;
 if (ev.keyCode==37){
 l-=10;
 box.style.left=l+"px";
 }
 else if(ev.keyCode==39){
 l+=10;
 box.style.left=l+"px";
 }
else if(ev.keyCode==38){
t-=10;
box.style.top=t+"px";
}

else if(ev.keyCode==40){
t+=10;
box.style.top=t+"px";
}

else if(ev.keyCode==13){
s+=10;
box.style.top=s+"px";
box.style.left=s+"px";
}
}

一些特殊的按键

ctrlKey 返回boolean值,按下时为true 

shiftKey 返回boolean值,按下时为true 

altKey 返回boolean值,按下时为true 

按下以上的按键,并不会返回键盘编码,而是布尔值。我们经常在论坛中发帖,可以 按着control+回车键,就能直接发送蚊子了,我们就可以捕捉这两个按键返回的值来做 对应的处理。

window.onload = function () {
var oText1 = document.getElementById('text1');
var oText2 = document.getElementById('text2');
var oBtn = document.getElementById('btn');
// oBtn.onclick = function () { 
// oText1.value += oText2.value + '\n'; // 
oText2.value = ''; 
}; 
// control+enter , 
oText2.onkeydown = function (ev) {
var oEvent = ev || event;
// control 
if (oEvent.keyCode == 13 && oEvent.ctrlKey) { 
// oText1.value += oText2.value + '\n';
// 
oText2.value = '';
}; 
} }  

七 输入框焦点事件:onfocus 焦点聚集 blur 焦点失去

八 事件冒泡

子标签发生事件后,向父级发送该事件,一直追溯到document。如:点击一个嵌套在 body中的button,则该button的onclick事件也会传递给body、document中,触发他们 的onclick里触发的函数。
事件冒泡只发生在相同事件上。可通过cancelBubble=true取消相同事件冒泡

九 事件绑定

1.非IE浏览器

target. addEventListener(type, listener, useCapture)

target: 文档节点、document、window 或 XMLHttpRequest。

type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。 

listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 

useCapture :是否使用捕捉,一般用 false 。

2.IE浏览器

target.attachEvent(type,listener)

target :文档节点、document、window 或 XMLHttpRequest。 

type :字符串,事件名称,含“on”,比 如“onclick”、“onmouseover”、“onkeydown”等。

listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 

3 有了绑定事件,自然有移除事件,根据是否是IE浏览器有两种写法:

非IE浏览器 :

target.removeEventListener(type,listener,useCapture);

IE浏览器:

target.detachEvent(type, listener);

4 通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除，如下面的例子所示:

var btn = document.getElementById("myBtn");

btn.addEventListener("click", function () {
alert(this.id);
}, false);
btn.removeEventListener("click", function () { //无效！
alert(this.id);
}, false);

在这个例子中，我使用addEventListener()添加一个事件处理程序。虽然调用removeEventListener(0是看似使用了相同的参数，但实际上，第二个参数与传入addEventListener()中的那一个完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传入addEventListener()中的相同，如下面的例子所示：

var btn = document.getElementById("myBtn");
var handler = function () {
alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); //有效！

重写后的这个例子没有问题，是因为在addEventListener()和removeEventListener()中用来相同的函数。

5两者使用的原理:可对执行的优先级不一样,实例讲解如下:

IE:

ele.attachEvent("onclick",method1);

ele.attachEvent("onclick",method2);

ele.attachEvent("onclick",method3);

执行顺序为method3->method2->method1 

非IE:

ele.addEventListener("click",method1,false);

ele.addEventListener("click",method2,false);

ele.addEventListener("click",method3,false);

执行顺序为method1->method2->method3

6 为解决兼容性问题，利用判断

var func = function(){}; 
//例： addEvent(window,"load",func) 
function addEvent(elem, type, fn) {
if (elem.attachEvent) { elem.attachEvent('on' + type, fn); return;
 }
  if (elem.addEventListener) { elem.addEventListener(type, fn, false);
   }
  }
  //例： removeEvent(window,"load",func) 
function removeEvent(elem, type, fn) {
 if (elem.detachEvent) { elem.detachEvent('on' + type, fn); return;
 }
  if (elem.removeEventListener) { elem.removeEventListener(type, fn, false); }
   }