033-Web前端-JS-事件概述与绑定

事件概述与绑定

#6.17 小篇

1.事件概述   2.非IE浏览器中的【事件绑定】   3.IE浏览器中的【事件绑定】   4.解决浏览器中关于【事件绑定】兼容性问题

---

1.事件概述

1.1 事件   1.2 事件传递

(1)事件

描述：事件本质是一种交互操作，事件通常与函数配合使用，当事件发生时函数才会执行。

(2)事件传递

描述：
事件不仅能够和触发者交互，还会在特定的情况下沿着dom tree逐级传递，
和dom tree中的各个节点进行交互。而js中的这种机制被称为事件传递机制。
说明：
    （1）触发者：事件第一次在哪个节点发生，那么这个节点就是触发者
    （2）特定的情况：domTree中其他节点也绑定了这个事件
类型：

1.事件冒泡
    事件从最具体的元素开始，沿着DOM树逐级向上依次触发，直至最不具体的元素停止。

注意：如没有特殊情况，均采用事件冒泡。

<div>

    <button>点我</button>

</div>

var div= document.querySelector('div');

var but= document.querySelector('button');

but.onclick=function(){console.log("按钮触发了");  }

div.onclick=function(){console.log("div触发了");  }

document.body.onclick=function(){console.log("body触发了");  }

document.documentElement.onclick=function(){console.log("html触发了");  }

document.onclick=function(){console.log("document触发了");  }

2.事件捕获（很少用）
   事件从最不具体的元素开始，沿着DOM树逐级向下依次触发，直至达到最具体的元素停止。

//以监听为例
var div= document.querySelector('div');
var but= document.querySelector('button');
but.addEventListener("click",function(event){alert("but");},true)
div.addEventListener("click",function(event){alert("div");},true)
document.body.addEventListener("click",function(event){alert("body");},true)

---

2.非IE浏览器中的【事件绑定】

2.1 HTML事件    2.2 DOM0级事件     2.3 DOM2级事件

(1)html事件

描述：绑定操作发生在HTML代码中的事件，称为HTML事件。
语法：on+事件名称=‘函数();函数();函数();……‘
注意：
    a.HTML事件采用冒泡机制来处理事件
    b.函数执行的顺序按照绑定事件时函数的顺序为准
    c.绑定多个函数时，函数应当采用分号隔开

<div  class="div1"  >div1
    <div  class="div2"  onclick="test3()">  div2</div>
</div>

var div1=document.querySelector('.div1');
var div2=document.querySelector('.div2');

function test1(){console.log("这是第一个函数");}
function test2(){console.log("这是第二个函数");}
function test3(){console.log("这是第三个函数");}

移除方法：
     元素.setAttribute('on+事件名'，null);

function test3(){
    console.log("这是第三个函数");
    div2.setAttribute('onclick',null);
}

缺陷：
        耦合性太强了，修改一处另一处也要修改。
        当函数没有加载成功时，用户去触发事件，则会报错。

(2)DOM0事件

描述：在js脚本中，直接通过【on+事件名】方式绑定的事件称为是DOM0级事件。
语法：元素.on+事件名  = function(){需要执行的语句;}
注意：
    （1）dom0方式绑定的事件均为冒泡事件
    （2）dom0方式一个节点，指定绑定一个事件
    如果同时绑定多个触发函数，则以最后一个为准。
弊端：一次只能绑定一个触发函数。
移除：元素. on+事件名=null;(注意：是移除点击事件，不是移除绑定的函数)

//弊端

div2.onclick=function(){
    console.log("div2被点击了1次");
}
div2.onclick=function(){
    console.log("div2被点击了2次");
}

//移除

div2.onclick=function(){
    console.log("div2被点击了1次");
    div2.onclick=null;
}

(3)DOM2级事件

描述：在js脚本中，通过addEventListener函数绑定的事件称为是DOM2级事件
语法：元素.addEventListener(type,listener,useCapture)
参数：
type:事件类型。【没有on！没有on！没有on！（ontype就成了属性了）】
listener:监听函数，绑定的函数
seCapture:是否使用捕获机制。如果不写，默认值为false
          false:冒泡机制
          true：捕获机制

注意:
    a. DOM2级事件可以绑定多个函数，执行顺序按照函数书写的顺序。
    b. DOM2级事件中如果绑定函数为【匿名函数】则无法删除。能够删除的只能是外部函数。

移除：
        node.removeEventListener(type,外部函数名,useCapture)

div2.addEventListener('click',function(){console.log("这是dom2事件函数div2");},true)
div1.addEventListener('click',function(){console.log("这是dom2事件函数div1");},true)



function  fun(){
    console.log("这是dom2事件函数div2一次");
}
div2.addEventListener('click',fun,true);
div2.removeEventListener('click',fun,true);

---

3.IE浏览器中的【事件绑定】

(1)HTML事件处理程序：等同于非IE    (2)DOM0级事件：等同于非IE    (3)DOM2级事件：

(3)dom2级事件

语法：元素.attachEvent(type,listener)
参数：
          type:事件类型。【有on！有on！有on！】
          listener:监听函数，绑定的函数
注意:如果绑定多个函数，按照函数书写的倒叙执行。

function  fun(){
    console.log("这是div1一次");
    document.querySelector('.div1').detachEvent('onclick',fun);
}
document.querySelector('.div1').attachEvent('onclick',fun);

---

4.解决浏览器中关于【事件绑定】兼容性问题

绑定事件时：

如果能使用addEventListener方法绑定的，就采用本方法

否则采用attachEvent方法绑定

解绑事件时：

如果能采用addEventListener方法绑定的，就采用removeEventListener方法解绑

否则采用detachEvent方法解绑

var div = document.querySelector('div');
var superEvent = {  //对象（属性：键值）
    add: function (ele, type, func) {   //addEvent
        if (ele.addEventListener) { //ele.addEventListener属性有内容，就是true
            ele.addEventListener(type, func);
        } else {
            ele.attachEvent('on' + type, func);
        }
    },//注意逗号隔开
    remove: function (ele, type, func) {    //removeEvent
        if (ele.removeEventListener) {
            ele.removeEventListener(type, func);
        } else {
            ele.detachEvent('on' + type, func);
        }
    }
}

function show() {
    console.log("事件监听完成");
}
superEvent.add(div,'click',show);

---

5.事件对象的属性

事件对象，即【事件触发的时】用来保存【事件相关的所有信息的对象】。     

事件对象基本都是系统为我们自动生成，不必手动创建。     

以上事件都存在事件对象：     

div.addEventListener('touchstart',         function (event) {             console.log("touches began");         }     );     

(1)touches:表示当前跟踪的触摸操作的Touch对象的数组(当前屏幕上所有的触摸点列表)。   

(2)targetTouches:特定于事件目标的Touch对象的数组(当前对象上所有的触摸点列表)。     

(3)changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组（涉及当前事件的触摸点列表）。

举例：

div.addEventListener('touchmove',function (event) {     

console.log('(x,y):('+event.touches[0].pageX+','+event.touches[0].pageY+')'); });