欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS中的DOM操作(四)

程序员文章站 2022-06-26 09:56:39
js中的dom操作(四) tips 1. 绑定事件的区别 2.为元素解绑事件 3.事件冒泡 代码 1.为元素绑定事件和解绑事件的兼容代码 2.为同一个元素绑定多个不同的事件,指向相同的事件处理函数...

js中的dom操作(四)

tips

1. 绑定事件的区别

2.为元素解绑事件

3.事件冒泡

代码

1.为元素绑定事件和解绑事件的兼容代码

2.为同一个元素绑定多个不同的事件,指向相同的事件处理函数

tips

1. 绑定事件的区别

addeventlistener(); attachevent() 相同点: 都可以为元素绑定事件 不同点: 1.方法名不一样

2.参数个数不一样addeventlistener三个参数,attachevent两个参数

3.addeventlistener 谷歌,火狐,ie11支持,ie8不支持

attachevent 谷歌火狐不支持,ie11不支持,ie8支持

4.this不同,addeventlistener 中的this是当前绑定事件的对象

attachevent中的this是window

5.addeventlistener中事件的类型(事件的名字)没有on

attachevent中的事件的类型(事件的名字)有on

2.为元素解绑事件

解绑事件:

注意:用什么方式绑定事件,就应该用对应的方式解绑事件

1.解绑事件

对象.on事件名字=事件处理函数--->绑定事件

对象.on事件名字=null;

my$("btn").onclick=function () {

console.log("我猥琐");

};

my$("btn2").onclick=function () {

//1.解绑事件

my$("btn").onclick=null;

};

2.解绑事件

对象.addeventlistener("没有on的事件类型",命名函数,false);---绑定事件

对象.removeeventlistener("没有on的事件类型",函数名字,false);

function f1() {

console.log("第一个");

}

function f2() {

console.log("第二个");

}

my$("btn").addeventlistener("click",f1,false);

my$("btn").addeventlistener("click",f2,false);

//点击第二个按钮把第一个按钮的第一个点击事件解绑

my$("btn2").onclick=function () {

//解绑事件的时候,需要在绑定事件的时候,使用命名函数

my$("btn").removeeventlistener("click",f1,false);

};

3.解绑事件

对象.attachevent("on事件类型",命名函数);---绑定事件

对象.detachevent("on事件类型",函数名字);

function f1() {

console.log("第一个");

}

function f2() {

console.log("第二个");

}

my$("btn").attachevent("onclick",f1);

my$("btn").attachevent("onclick",f2);

my$("btn2").onclick=function () {

my$("btn").detachevent("onclick",f1);

};

3.事件冒泡

事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.

事件有三个阶段:

1.事件捕获阶段 :从外向内

2.事件目标阶段 :最开始选择的那个

3.事件冒泡阶段 : 从里向外

为元素绑定事件:

addeventlistener("没有on的事件类型",事件处理函数,控制事件阶段的)

事件触发的过程中,可能会出现事件冒泡的效果,为了阻止事件冒泡--->

window.event.cancelbubble=true;谷歌,ie8支持,火狐不支持

window.event就是一个对象,是ie中的标准

e.stoppropagation();阻止事件冒泡---->谷歌和火狐支持

window.event和e都是事件参数对象,一个是ie的标准,一个是火狐的标准

事件参数e在ie8的中是不存在,此时用window.event来代替

addeventlistener中第三个参数是控制事件阶段的

事件的阶段有三个:

通过e.eventphase这个属性可以知道当前的事件是什么阶段的

如果这个属性的值是:

1---->捕获阶段

2---->目标阶段

3---->冒泡

一般默认都是冒泡阶段,很少用捕获阶段

冒泡阶段:从里向外

捕获阶段:从外向内

代码

1.为元素绑定事件和解绑事件的兼容代码

2.为同一个元素绑定多个不同的事件,指向相同的事件处理函数

<script>
  //为同一个元素绑定多个不同的事件,指向相同的事件处理函数
  my$("btn").onclick = f1;
  my$("btn").onmouseover = f1;
  my$("btn").onmouseout = f1;
  function f1(e) {
    switch (e.type) {
      case "click":
        alert("好帅哦");
        break;
      case "mouseover":
        this.style.backgroundcolor = "red";
        break;
      case "mouseout":
        this.style.backgroundcolor = "green";
        break;
    }
  }
  //  my$("btn").onmouseover=function (e) {
  //    console.log(e);
  //  };
</script>