zoukankan      html  css  js  c++  java
  • html事件绑定总结以及window.onload和document.body.onload事件

    //1 document.onkeydown如果多次监听同样的事件,那么前面的监听函数都会被最后一次的监听函数所覆盖。
    //如下所示:
    document.onkeydown = function(evt) {
    alert(9);
    };
    document.onkeydown = function(evt) {
    alert(8);
    };
    //结果是8

    //2 document.onkeydown和document.body.onkeydow上下级事件处理逻辑
    //如下所示:
    document.onkeydown = function(evt) {
    alert(9);
    };
    document.body.onkeydown = function(evt) {
    alert(8);
    };
    //结果是先8后9--事件冒泡执行--上述事件绑定和下面的处理方式是一样的
    document.addEventListener("keydown", function() {
    alert(9);
    }, false);
    document.body.addEventListener("keydown", function() {
    alert(8);
    }, true);
    //target.addEventListener(evtType, callbackFunc,useCapture);
    //evtType--target的事件名字-必须是"keydown",而不是"onkeydown"
    //callbackFunc--事件触发函数
    //useCapture--是否是捕获型事件,默认是false--如果是false,则是冒泡型事件
    //##但如果采用该方式来监听对象事件,那么如果是类似于上述1中绑定了相同事件,那么不会被后续的函数覆盖,而是那些已绑定的事件都有触发!
    //##而且,这时候那些相同的监听函数,都是从先到后来执行的,也就是类似于队列(先进先出),而不是栈(先进后出);也就是这时候第三个参数useCapture就不起作用了。

    //3 window.onload--页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了--也就是load的时间(打开devtools-network-load)

    //4 document.onload/document.body.onload--仅当DOM加载完成,不包括样式表,图片,flash--也就是DOMContentLoaded的时间(打开devtools-network-DOMContentLoaded)

    演示例子:http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html

    参考文章:

    http://www.cnblogs.com/hh54188/archive/2013/03/01/2939426.html

  • 相关阅读:
    HTTP协议详解
    10本Linux免费电子书
    面试高级算法梳理笔记
    Linux服务器的那些性能参数指标
    2016 年开发者头条十大文章系列
    程序员如何优雅的挣零花钱
    [oracle] oracle权限传递
    [oracle] 两种权限:系统权限VS对象权限
    [oracle] 系统权限管理
    [oracle] 重要服务启动与停止命令行
  • 原文地址:https://www.cnblogs.com/simonbaker/p/3662895.html
Copyright © 2011-2022 走看看