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;
    }
}