事件:事件行为本身,事件行为触发

每一个元素本身都天生具备一个事件行为,我们点击的时候,就会出发他的onclick事件,如果没有给事件绑定方法的话,只是没有做任何事情,但是行为是发生的;

事件绑定的形式可以是:oDiv.onclick=function(){ alert(“事件绑定成功”)};

给某一个元素增加事件绑定,都有那些方法?

DOM0级事件:给元素的私有属性上天生自带的事件行为绑定方法:

on[click、mouseover、mouseout、mouseenter、mouseleave、mousemove、mousedown、mouseup、mousewheel、keyup、keydown、focus、blur、change..]

在EventTarget这个类上定义了元素的另外一种绑定事件的方法,我们把他称之为DOM2级事件绑定;

在标准浏览器中绑定/移除事件的方法;

addEventListener();//绑定
removeEventListener();//移除

oDiv.addEventListener()等于oDiv.__proto__.__proto__.__proto__.__proto__.__proto__.addEventListener;

因为DOM耳机事件绑定相当于零级事件绑定是性能消耗很大的,因为他需要一级级的往上找,知道找到EventTarget这个类上才结束的;

DOM耳机事件绑定存在的优势;

1)、提供了一些DOM0级中没有的事件(DOM开头的),例如:DOMcontentLoaded(jQuery中的$(document).ready()就是用这个事件实现的)

  • jQuery中的$(document).ready实现的原理;
  • 1、采用DOM2级事件绑定;
  • 2、在标准浏览器中的是DOMContentLoaded事件绑定的,在IE浏览器中用的是onreadystatechange事件绑定的,并且把事件绑定在document;

2)、DOM0级绑定事件,只能给同一个元素的同一个事件类型绑定一次方法,绑定第二次就把第一次的给覆盖了,例如。window.onload在一个网页中只能使用一次,DOM2级事件避免这个问题,可以给同一个元素的同一个事件类型绑定多个不同的方法(多个不同的方法称之为事件队列)

oDiv.addEventListener("click",function(){
alert("咔嚓一声,我就弹出了这个窗口")
},false);
oDiv.addEventListener("click",function(){
alert("你以为这就完事了??我特么还可以再弹一次,有时候装逼就是这么简单!")
},false);

3)、DOM二级事件中能更好的控制和使用事件的传播机制;

事件绑定的方法:

1、在标准浏览器中绑定;

参数(parameter):eventType(事件类型不加on)、function(绑定的函数)、事件传播的类型(捕获、冒泡)、

  • addEventListener():绑定事件
  • removeEventListener():移除事件绑定,三个参数要和绑定的时候一模一样才可以的
  • var oDiv = document.getElementById("div1");
    var n = 0;

    oDiv.addEventListener("click", fn1, false);
    function fn1() {
    n++;
    if (n >= 4) {
    oDiv.removeEventListener("click", fn1, false);
    }
    console.log(n);
    }

2、在IE678浏览器中;

参数(parameter):eventType(事件类型,加on)、function(绑定函数);

  • attachEvent():绑定事件
  • datachEvent():移除事件绑定,两个参数要和绑定的时候一模一样的才可以;

var oDiv = document.getElementById("div1");
var n = 0;

oDiv.attachEvent("onclick", fn1);
function fn1() {
n++;
if (n >= 4) {
oDiv.detachEvent("onclick",fn1);
}
console.log(n);
}

`

自己挖的坑,自己要埋上;绑定事件的时候就要想到我们要移除事件呢,所以我们要给绑定的事件起一个名字!

“““`