华山资源网

js学习总结之dom2级事件基础知识详解
网络编程 2024/11/18 佚名
3 1

我们使用的DOM2事件绑定，其实是让box通过原型链一直找到EventTarget这个内置类原型上的addEventListener方法实现的。

DOM0级事件绑定:只能给一个元素的某一个行为绑定一次方法，第二次绑定的会把前面的覆盖掉。

DOM2：可以给某一个元素的同一个行为绑定多个不同的方法

box.addEventListener('click',function(e){
      console.log(1)
    },false)
    box.addEventListener('click',function(e){
      console.log(2)
    },false) // 输出1 2

DOM2：DOM0中的行为类型，我们用DOM2一样可以绑定，而且DOM2中还提供了一些DOM0没有的行为类型->DOMContentLoaded:当页面中的DOM结构（HTML结构加载完成）触发的行为

box.addEventListener('DOMContentLoaded',function(e){
      
    },false)

window.onload = function(){}

//当页面中的所有资源都加载完成（图片、HTML结构、音视频...）才会执行后面的函数；并且在一个页面中只能用一次，后面在写会把前面的覆盖掉；->因为他是采用DOM0事件绑定，所以只能绑定一次
    　$(document).ready(function(){})//->$(function(){})
    /*
      只要页面中的HTML结构加载完成就会执行对应的函数；并且在同一个页面中可以出现多次。因此这个是采用DOM2事件的绑定，绑定的行为是DOMContentLoaded
    */

DOM2级添加和移除事件细节

function fn1(e){
      console.log(this);
    }
    //添加事件
    box.addEventListener('click',fn1,false);
    //移除事件
    box.removeEventListener('click',fn1,false);

注意:移除的时候需要保证三个参数:行为、方法、哪个阶段发生的   三个参数必须一致 ->DOM2在绑定的时候，我们一般都给他绑定的是实名函数

只能给某个元素的同一个行为绑定多个“不同”的方法（如果方法相同了，只能留一个）

当行为触发，会按照绑定的先后顺序依次把绑定的方法执行；执行的this是当前被绑定事件的元素本身

function fn1(){
      console.log(1);
    }
    //添加事件
    box.addEventListener('click',fn1,false);
    box.addEventListener('click',fn1,false);//只输出一个1

上面涉及一个概念:事件池(用来存储当前元素行为绑定的方法的，浏览器自带的机制) 如下图所示

js学习总结之dom2级事件基础知识详解

 但是在IE6-8浏览器中,不支持addEventListener,如果想实现DOM2事件绑定只能用attachEvent/detachEvent

它只有两个参数，不能像addEventListener那样控制在哪个阶段发生，默认只能在冒泡阶段发生，同时行为需要添加on（和DOM0特别的类似）

box.attachEvent('onclick',fn1)

注意：和标准浏览器的事件池机制对比:

1、顺序问题:执行的时候顺序是混乱的，标准浏览器是按照绑定顺序依次执行的

2、重复问题:ie6-8可以给同一个元素的同一个行为绑定多个相同的方法

3、this问题:ie6-8中当方法执行的时候，方法中的this不是当前的元素box而是window

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com