js的事件

事件入门

什么是事件

事件是由用户和浏览器进行交互的操作

三种事件模型内联模型

内联事件模型

作为html标签的一个属性存在的，但是这种模型已经不适合在大的项目中使用。onclick

脚本模型

但是注意的是：如果这段脚本是对整个DOM进行操作的话，必须是在DOM加载完才执行这个脚本，让事件处理函数（onclick）执行一个函数的时候，通过赋值的方式，直接将函数名赋值给事件处理函数即可，而不是为这个事件处理函数赋值为函数() 如果有括号的话会自己调用，而不是等待事件来触发

DOM2级模型

事件处理函数

onclick等事件

onkeydown 事件 按下键盘上的任意的按钮都可以输出111

onkeydown=function(){
console.log(111);
}

onkeypress 事件 按下键盘上的字母键或者是数字键才可以触发这个事件，按下shift ctrl键都没有用

onkeypress=function(){
console.log(111);
}

onkeyup 事件在按下键盘并释放键盘的时候才会触发这个事件

onkeyup=function(){
console.log(111);
}

onunload 事件 在页面真个卸载的时候，才触发 比如说刷新的时候

onselect 事件 选择文本输入框的内容 释放的时候会触发这个事件

cc.onselect=function(){
console.log(11);
}

onchange 事件 文本框内改变内容并且失去焦点的时候触发

form上边的事件 这些表单必须在一个form里边

submit没有form是提交不了的，而且不是在input上边触发的，而是在form上边触发的

onresize事件 window 的事件 改变窗口的大小会触发的事件

onscroll事件 window 的事件 滚动窗体的时候会触发的事件

事件对象

事件处理的三个部分

1、DOM 2、事件处理函数 3、事件处理方法

事件对象

当触发一个事件的时候就会产生一个事件对象 浏览器通过函数把这个对象作为参数传递过来，event，所以这个对象会存在非常多的兼容性（就连得到这个对象的方式）

window.onload=function(){
var box=document.getElementById("box");
box.onclick=function(){
console.log(arguments.length)    //点击的时候会传递一个事件对象  所以这里会输出1
}
}

所以下面的代码也可以

var box=document.getElementById("box");
box.onclick=function(e){
console.log(e)    //得到的就是事件对象
}

值得注意的是，IE中都不支持这种方式来得到事件对象，上面的方式是W3C获取事件对象的方式，在IE下可以通过window的属性直接来获取

下面的代码实现了获取事件对象的兼容

box.onclick=function(e){
var event=window.event||e;
alert(event)    //得到的就是事件对象
}

鼠标事件对象跨浏览器来获得用户按下是左键？中键？右键？

window.onload=function() {
var box = document.getElementById("box");
document.onmouseup=function(e){
var event=e||window.event;
alert(getButton(e));
}
}
function getButton(event){
if(event){
return event.button;
}
else if(window.event){
switch(window.event.button){
case 1: return 0;
case 4: return 1;
case 2: return 2;
}
}
}

跨浏览器获得鼠标点击位置在视窗的位置（不管你是放大了浏览器还是有了滚动条，都是看的是鼠标的点击的位置离视窗的位置），而且这个程序还可以输出有滚动条的时候，滚动条的离顶部的位置

document.onmouseup=function(e){
var event=window.event||e;
alert(document.documentElement.scrollTop||document.body.scrollTop+"px"+event.clientX+"px"+ event.clientY+"px");
}

值得注意的是：获得滚动条离最顶部的距离的时候的兼容的情况

下面这个程序是获得了鼠标点击的位置离屏幕的距离

document.onmouseup=function(e){
var event=window.event||e;
alert(event.screenX+"px"+"   "+event.screenY+"px");
}

注意：只能为alert传递一个参数

下面的函数判断是否按下修改键（shift、ctrl、alt）

window.onload=function() {
document.onclick=function(e){
alert(getKey(e));
}
}
function getKey(evt) {
var e = evt || window.event;
var keys = [];
if (e.shiftKey) keys.push('shift'); //给数组添加元素
if (e.ctrlKey) keys.push('ctrl');
if (e.altKey) keys.push('alt');
return keys;
}

注意：上面的功能实现的是在按住shift键、ctrl键、alt键的情况下，点击屏幕会输出按下的修改键

键盘事件

keydown 按下键盘

keyup 键盘起来的时候

keypress 按下字母键盘的时候

按下键盘并返回键码keycode （键码可以返回任意键的编码，而且字母不区分大小写）

document.onkeydown=function(e){
var event=e||window.event;
alert(event.keyCode)
}

但是使用了onkeypress来返回键码，在火狐浏览器中不支持(按下键盘的时候返回的是0)，在谷歌浏览器和IE中虽然支持但是区分大小写

document.onkeypress=function(e){
var event=e||window.event;
alert(event.keyCode)
}

火狐和谷歌浏览器都支持的事件对象都支持charCode，和keyPress搭配来得到字符编码,注意IE的事件对象没有这个属性

document.onkeypress=function(e){
var event=e||window.event;
alert(event.charCode)
}

跨浏览器获得按下键盘的编码

window.onload=function() {
document.onkeypress=function(e){
alert(getCharCode(e))
}
}
function getCharCode(e){
var event=e||window.event;
if(typeof event.charCode=="number"){
return event.charCode;
}
else{
return event.keyCode;
}
}

w3c和IE的事件

得到事件的目标

，（鼠标点在哪里，就可以得到哪里的dom对象）

跨浏览器获得事件的目标

window.onload=function() {
document.onclick=function(e){
alert(getTarget(e).tagName);
}
}
function getTarget(e){
var event=e||window.event;
if(event.target){
return event.target;
}
else{
return event.srcElement
}
}

事件流

事件流有两种模式：冒泡和捕获



html代码

<div style="background: red;width: 100px;height: 100px" id="box">
<button > 点击</button>
</div>

js代码

window.onload=function() {
document.onclick=function(){
alert("documnet");
}
document.documentElement.onclick=function(){
alert("html");
}
document.body.onclick=function(){
alert("body");
}
document.getElementById("box").onclick=function(){
alert("box");
}
document.getElementsByTagName("button")[0].onclick=function(){
alert("input");
}

}

在任何的浏览器点击按钮的时候依次会输出 input box body html document

取消冒泡模式

document.getElementsByTagName("button")[0].onclick=function(e){
alert("input");
e.stopPropagation();  //IE不支持
}

只是取消了点击按钮的冒泡

跨浏览器阻止事件冒泡

function stopBubble(e){
var event=e||window.event;
(typeof event.stopPropagation=="function")? event.stopPropagation(): event.cancelBubble=true;
}

事件绑定

传统事件绑定

如果一个页面有两个或者多个js脚本文件，导致会有多个window.onload这两个事件，这就会导致第一个window.onload会被覆盖，解决的方法：在使用window.onload的时候，首先要检测是否存在window.onload是否是一个函数

下面就是解决覆盖的问题

window.onload=function () {
alert("dd");
}
if(typeof window.onload=="function"){
var saved=null;
saved=window.onload;
}window.onload=function () {
if(saved)saved();
alert("cc");
}

事件切换器

<style>
.red{
background: red;
width:200px;
height: 200px;
}
.blue{
background: blue;
width:200px;
height: 200px;
}
</style>
<body>
<div id="test" class="blue"></div>
</body>

js代码

window.onload=function () {
var test=document.getElementById("test");
console.log(test)
test.onclick=toBlue;
}
function toRed(){
this.className='red';
this.onclick=toBlue;
}
function toBlue(){
this.className='blue';
this.onclick=toRed;
}

注意，通过匿名函数执行一个函数，那么这个函数里面的this就会代表window，但是匿名函数这个this中还是属于当前对象的

test.onclick=function(){
alert(this);   //div
toBlue();
};
function toBlue(){
alert(this);   //会弹出window
this.className='blue';
this.onclick=toRed;
}

所以下面的这个代码也实现了事件的切换

test.onclick=function(){
toBlue.call(this);
};
function toRed(){
this.className='red';
this.onclick=toBlue;
}
function toBlue(){
this.className='blue';
this.onclick=toRed;
}

所以传统事件的绑定有许多的缺点，所以我们要自定义函数来实现事件的绑定

有一点值得注意window.onload相当于window[“onload”]

//obj  相当于window
//type   相当于onload
//fn    相当于function
function addEvent(obj,type,fn){
removeEvent(obj,type);   //一道切的移除事件的函数
var saved=null;
if(typeof obj['on'+type]=='function'){
saved=obj['on'+type];
}
obj['on'+type]=function(){
if(saved){
saved();
}
//用它来做事件切换器   注意this
fn.call(this);
}
}
function removeEvent(obj,type){
if(typeof obj['on'+type]=='function') {
obj['on'+type]=null;
}
}

使用新的绑定事件的方式实现事件切换器

addEvent(window,'load',function () {
var test=document.getElementById("test");
addEvent(test,'click',toBlue)
})
function toRed(){
this.className='red';
addEvent(this,'click',toBlue);
}
function toBlue(){
this.className='blue';
addEvent(this,'click',toRed);
}

W3C事件绑定机制

DOM2级定义了两个事件的处理方法 添加事件 删除事件

也就是addEventListener()和removeEventListener()但是这两个方法只能在支持W3C的事件模型的浏览器上运行

传递的参数 对象．addEventListener（＇事件＇，事件处理函数，捕获（true）还是冒泡false）

window.addEventListener('load',function () {
alert(11);
},false)
window.addEventListener('load',function () {
alert(22);
},false)

1、DM2级事件模型的绑定事件解决了覆盖的问题（一次会弹出11 22）

window.addEventListener('load',init,false)
window.addEventListener('load',init,false)
window.addEventListener('load',init,false)
function init() {
alert(1);
}

2、相同的函数多次绑定到同一个函数的时候，会自动的屏蔽（会之弹出一次1,自动屏蔽）

window.addEventListener('load',function () {
var test=document.getElementById("test");
test.addEventListener('click',toBlue,false);
},false)
function toRed() {
this.className="red";
this.removeEventListener('click',toRed,false);   //必须要有这一步，否则没有办法进行事件的切换
this.addEventListener('click',toBlue,false);
}
function toBlue() {
this.className="blue";
this.removeEventListener('click',toBlue,false); //必须要有这一步，否则没有办法进行事件的切换
this.addEventListener('click',toRed,false);
}

3、可以传递this，实现事件的切换器，直接在toRed使用this

test.addEventListener('click',function () {
alert(11);
},false);
test.addEventListener('click',toBlue,false);

4、添加一个额外的方法，会不会被覆盖或者只执行了一次，实现了点击的时候既可以弹出11也可以变色

综上所述，W3C的addEventListener和removeEventListener完美的解决了事件的绑定，但是IE8及其以下的版本都不支持DOM2级的这个事件模型，而是采用了自己的事件。

冒泡和捕获（设置true和false）

test.addEventListener('click',function () {
alert("div");
},true);
document.addEventListener('click',function () {
alert("document")
},true);

设置为了捕获，点击div的时候，先弹出document再弹出div

IE事件处理函数

注意以下的测试必须在IE8及以下完成：

attachEvent(‘on+事件名称’,’事件处理函数’)

detachEvent(‘事件名称’,’事件处理函数’)

因为IE8以下中的事件

1、不支持捕获，

2、IE事件不能屏蔽重复的函数

3、IE中的this指向的是widow而不是DOM对象（不可以传递this）

4、传统的IE事件模型上，IE是无法接收到event对象，但是使用了attachEvent()却可以

但是也解决了

1、覆盖问题

window.attachEvent('onload',function () {
alert(1);
})
window.attachEvent('onload',function () {
alert(2);
})

但是会先弹出2 在弹出1

让IE和W3C兼容这个事件切换器

1、跨浏览器添加事件

function addEvent(obj,type,fn) {
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+type,fn)
}
}

2、夸浏览器移除事件

function removeEvent(obj,type,fn) {
if(obj.removeEventListener){
obj.removeEventListener(type,fn);
}else if(obj.detachEvent){
obj.detachEvent('on'+type,fn)
}
}

3、跨浏览器获取目标对象

function getTarget(e) {
if(e.target){
return e.target;
}
else if(window.event.srcElement){
return window.event.srcElement
}
}

事件对象的其他补充

W3C的relatedTarget这个属性可以在mouseover和mouseout事件中获取从哪里移入和从哪里移出

<span id="pox">
<div id="box"></div>
</span>

js代码

addEvent(window,'load',function () {
var box=document.getElementById("box");
addEvent(box,'mouseover',function (evt) {
alert(evt.relatedTarget)  //得到移入box的最近的对象   会弹出span
})
})

跨浏览器阻止事件的默认行为

//跨浏览器阻止事件的默认行为
function predefault(evt) {
var event=evt||window.event;
if(event.preventDefault)
{
event.preventDefault();
}
else{
event.returnValue=false;
}
}