• JS DOM2级事件基础


    DOM2级事件基础

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

    DOM2事件绑定,其实是让元素通过原型链一直找到EventTarget这个内置类原型上的addEventListener方法实现的

    DOM2:DOM0中的行为类型,用DOM2一样可以绑定;而且DOM2中还提供了一些DOM0没有的行为类型,DOMContentLoaded:当页面中的DOM结果(HTML结构)加载完成,触发的行为


    window.onload = function(){} :
    当页面中的所有资源都加载完成(图片、HTML结构、音视频。。。)才会执行后面的函数;由于使用DOM0级事件绑定,所以在一个页面中只能用一次,后面在写会把前面的覆盖掉;因为它是采用DOM0事件绑定,所以只能绑定一次

    jQuery:$(document).ready(function(){}):
    只要当页面中的HTML结构加载完成就会执行对应的函数;并且在同一个页面中可以出现多次;
    原理:使用DOM2事件绑定,并且绑定的行为是DOM2中新增加的那个DOMContentLoaded

    window.addEventListener("load", fucntion(){}, false);
    window.addEventListener("load", fucntion(){}, false);


    DOM2级事件绑定

    HTMLElement.addEventListener(event, callBack, boolean)

    boolean:为true捕获阶段触发, 为false冒泡阶段触发

    HTMLElement.removeEventListener(event, callBack, boolean):

    使用DOM2级事件绑定回调函数时,使用实名函数时,可以使用HTMLElement.removeEventListener(event, callBack, boolean)来移除对应的事件, event, callBack, boolean一个也不能变

    兼容问题

    在IE6~8浏览器中,我们不支持addEventListener/removeEventListener, 如果想实现DOM2事件绑定只能用attachEvent/detachEvent
    它只有两个参数,不能想addEventListener那样控制在那个阶段发生, 默认只能在冒泡阶段发生
    行为需要添加“on”,和DOM0特别类似

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

    • 顺序问题:IE6~8执行的时候顺序是混乱的,标准浏览器是按照绑定顺序依次执行的
    • 重复问题:IE6~8可以给同一个元素的同一个行为绑定多个相同的方法
    • THIS问题:IE6~8中当方法执行的时候,THIS指向WINDOW,标准浏览器指向的当前的元素

    DOM2事件机制

    • 只能给某个元素的同一个行为绑定多个“不同”的方法(如果方法相同了只能保留一个)
    • 当行为触发,会按照绑定的先后顺序依次把绑定的方法执行
    • 执行的方法中的this是当前被绑定事件的元素本身

    事件池

    存储当前元素行为绑定的方法

  • 相关阅读:
    房子不是盖来住的
    房子不是盖来住的
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
  • 原文地址:https://www.cnblogs.com/xiaoxu-xmy/p/13685679.html
Copyright © 2020-2023  润新知