首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么load事件的addEventListener不能与div一起使用?

load事件的addEventListener不能与div一起使用的原因是因为load事件是在整个页面及其所有资源(如图片、样式表、脚本等)都加载完成后触发的,而div元素是页面的一部分,它可能在load事件触发之前就已经被解析和渲染了。

当我们使用addEventListener来监听load事件时,该事件只会在整个页面加载完成后触发一次。如果我们将addEventListener应用于div元素,由于div元素可能在load事件触发之前就已经被解析和渲染了,所以load事件将无法再次触发。

另外,load事件是绑定在window对象上的,而不是具体的元素对象上。因此,我们只能将load事件与window对象一起使用,而不能与div元素一起使用。

如果需要在div元素加载完成后执行一些操作,可以考虑使用DOMContentLoaded事件或者直接在div元素后面的脚本中执行相应的操作。DOMContentLoaded事件在DOM树构建完成后触发,不需要等待所有资源加载完成。

总结起来,load事件的addEventListener不能与div一起使用的原因是load事件是在整个页面及其所有资源加载完成后触发的,而div元素可能在load事件触发之前就已经被解析和渲染了。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

你不会还不知道如何监测用户网络是否在线吧?

要求我们要实时监测用户网络状态,当用户断网了,我们要立马给用户弹出一个断网提醒。那你可能会问,为什么要做这么一个需求呢?用户断网了,网页不就加载不出来了吗?用户不就知道了吗?...true表示在线,false表示离线,只要浏览器连接到网络状态发生改变,属性值就会发生改变我们可以监听网页加载事件,在网页加载时获取navigator.onLine值window.addEventListener...监听网页加载事件window.addEventListener("load", () => { const handleNetworkChange = () => { if (navigator.onLine...它可以方便地监听网络连接状态改变,并触发相应事件。该库还提供了一些其他功能,如警报用户离线状态、离线页面缓存监测网络连接状态:Offline.js 使用轮询方式来监测网络连接状态。...当然你也可以关注我微信公众号:Gavin技术分享,我邀你进我前端学习交流群,一起学习前端,成为更优秀工程师~我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

41200

jQuery之事件绑定到触发全过程及知识点补充

()来绑定事件 注意: (1)绑定常用事件(如:click、focus),使用handleObj保存 handleObj = jQuery.extend( { //click,mouseout...: $("#one").off("click.one") 七、jQuery.event.special 处理机制 绑定事件,有些是不能统一处理,比如load事件,是不支持冒泡,所以即使开发者未用...namespace: "", origType: "click", selector: undefined, type: "click", } ] 九、为什么使用...click事件,但是click是原生事件,它是靠 addEventListener绑定来触发事件。...trigger机制去触发click事件, 正是因为jQuery没有直接把事件相关handler与元素直接绑定,而是采用了分离处理, 所以我们通过trigger触发click事件addEventListener

78510
  • CSS transition delay简介与进阶应用

    在此,我们为什么不用display属性呢,因为在display改变时,transition并不会生效。 那我们为什么需要在使用了opacity属性时候同时使用visibility属性呢。...元素 hover事件停止触发,div2visibility属性变为hidden transition属性让opacity属性从1变为0 根据上面的情况我们知道,当hover事件结束后,visibility...事件停止触发 transition属性让opacity属性从1变为0 visibility属性变为hidden 从上面的分析我们可以知道,因为visibility属性为连续变化属性,因此在transition...最开始用JavaScript实现,开发起来比较复杂,容易与业务逻辑代码混在一起不好维护。通过CSS来实现这个功能,既简单高效,又能够避免增加JavaScript复杂度,是一个比较优解决方案。...由于代码效果时好时坏,猜测可能与jsbin容器相关。

    2.1K21

    windowonload事件和domcontentloaded执行顺序

    jQueryload事件 $(document).ready()或者$(function(){})是经常使用,其原理都是使用了类似DOMContentLoaded。...相反,DOMContentLoaded事件触发后添加事件侦听器永远不会执行。 浏览器还在对象load上提供事件window。当此事件触发时,表示页面上所有资源都已加载,包括图像。...可以在jQuery中使用查看此事件$( window ).on( "load", handler )。如果代码依赖于加载资源(例如,如果需要图像尺寸),则应将代码放在load事件处理程序中。...为什么我上面说是类似于DOMContentLoaded,看了上面官方文档解释应该会明白了。...所以jqready事件执行结束时间和DOMContentLoaded结束时间并不是完全相同,所以在使用过程中应当进行一些注意。

    3.7K10

    HTML解析之DOMContentLoaded和onload

    说在前面 在很久很久以前,我在封装自己JQuery库时就使用过DOMContentLoaded,觉得这个知识点看看别的文章就行了,不过现在我想把它记下来。...MDN解释:当初始 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架完成加载。...另一个不同事件 load 应该仅用于检测一个完全加载页面。 在使用 DOMContentLoaded 更加合适情况下使用 load 是一个令人难以置信流行错误,所以要谨慎。...注意:DOMContentLoaded 事件必须等待其所属script之前样式表加载解析完成才会触发。...本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1.6K20

    DOM事件基本概念大总结(前端必备)

    原来 IE 那些特有事件处理已经没有了 事件Type 常见事件类型 UI事件 界面发生事件 load 事件 当页面完全加载,包括所有图像、js 文件、产生式文件等外部资源。...之后就会触发该事件。添加事件方法?建议使用之前写跨浏览器事件处理方法。当然也可以通过获取 dom 对象,并对其属性赋值,也可以直接在 html 元素上绑定。...但是这两个方法下 event 对象使用有区别,特别是在 IE 浏览器上 在 window对象下触发整个页面的加载; window.addEventListener('load', function...('load', function(event) { console.log(event.target, 'js加载完毕'); }) window.addEventListener('load',.../xxx.js`; }) unload 事件load 事件相反,一般页面切换后触发,可用来强制引用清除,防止内存泄漏 window.addEventListener('unload', function

    1.9K20

    你好,谈谈你对前端路由理解

    哈希模式 a 标签锚点大家应该陌生,而浏览器地址上 # 后面的变化,是可以被监听,浏览器为我们提供了原生监听事件 hashchange ,它可以监听到如下变化: 点击 a 标签,改变了浏览器地址...第一次加载时候,不会执行 hashchange 监听事件,默认执行一次 // DOMContentLoaded 为浏览器 DOM 加载完成时触发 window.addEventListener...('DOMContentLoaded', Load) window.addEventListener('hashchange', HashChange) // 展示页面组件节点...', Load) window.addEventListener('popstate', PopChange) var routeView = null function Load...') // 遍历 a 标签节点数组,阻止默认事件,添加点击事件回调函数 aList.forEach(aNode => aNode.addEventListener('click'

    98620

    【Web技术】913- 谈谈你对前端路由理解

    1、为什么会出现前端路由。 2、前端路由解决了什么问题。 3、前端路由实现原理是什么。 我们带着这三个问题,继续往下看,阅读过程中如果同学们有自己见解,可以评论区发表自己看法。...哈希模式 a 标签锚点大家应该陌生,而浏览器地址上 # 后面的变化,是可以被监听,浏览器为我们提供了原生监听事件 hashchange ,它可以监听到如下变化: 点击 a 标签,改变了浏览器地址...('DOMContentLoaded', Load) window.addEventListener('hashchange', HashChange) // 展示页面组件节点...', Load) window.addEventListener('popstate', PopChange) var routeView = null function Load...') // 遍历 a 标签节点数组,阻止默认事件,添加点击事件回调函数 aList.forEach(aNode => aNode.addEventListener('click'

    64320

    前端开发:vue路由之前端路由原理

    在这里小编建了一个前端学习交流扣扣群:132667127,我自己整理最新前端资料和高级开发教程,如果有想需要,可以加群一起学习交流 二....由于hash值变化不会导致浏览器向服务器发出请求,而且hash改变会触发hashchange事件,浏览器进后退也能对其进行控制,所以人们在 html5 history 出现前,基本都是使用 hash...](); }, // 页面初始化 init: function () { // 页面加载事件 window.addEventListener('load', this.refresh.bind...(this), false); // hash 值改变事件 window.addEventListener('hashchange', this.refresh.bind(this), false)...window.addEventListener("popstate", function() { // 监听浏览器前进后退事件,pushState 与 replaceState 方法不会触发

    98751

    图片懒加载原理及实现(java懒加载原理)

    一,前置知识 1,为什么要图片懒加载 懒加载是一种对网页性能优化方式,比如当访问一个页面的时候,优先显示可视区域图片而不是一次性加载所有图片,当需要显示时,再发送图片请求,避免打开网页时加载过多资源...但是如果不用图片懒加载的话,就会是这个样子: 因为浏览器可以并行加载图片(超过10个并行任务好像……额,是好像),所以就好多图片一起加载了 ,这还只是8张图片,那如果是大量图片呢?...,让屏幕内图片正常加载,而屏幕外图片就使用loading图片代替 window.onload = imgonload; //监听滚轮事件, window.addEventListener...,让屏幕内图片正常加载,而屏幕外图片就使用loading图片代替 window.onload = imgonload; //监听滚轮事件, let beAbleClick = true...s640"> document.addEventListener("DOMContentLoaded

    1.7K30

    大佬,怎么办?升级React17,Toast组件不能用了

    这个bug产生涉及多方因素,包括: useEffect执行时机(很可能与你想不一样) 合成事件原理 v17源码中对合成事件改动 Portal原理 这篇文章很长很长,有非常多源码细节。...会使用ReactDOM.createPortal在document.body上挂载一个div,内容为who is handsome?。...事实上,在一个大型项目中,如果从v16升级到v17, 在使用了如上所示「在document挂载原生click事件」方式实现toast同时, 再使用Portal在document.body挂载DOM都会触发该...一旦先渲染了Portal,你toast就不能用了。意不意外?惊惊喜? ? 接下来,让我们一步步揭开这个bug庐山真面目。 div去哪了?...其中click、keydown等这种连续触发事件被称为「离散事件」(与之对应就是scroll这种能连续触发事件)。 ?

    1.6K20

    HTML5中拖放功能

    [imgElement]表示图片对象,[x],[y]分别表示相对于光标位置横坐标和纵坐标 第五,addElement()方法:添加一起跟随拖放元素,如果想让某个元素跟随被拖动元素一起被拖放,则使用此方法...addElement([element]) [element]表示一起跟随拖动元素对象 示例 // 源元素 拖动...window.addEventListener("load",DragStart,false); 添加dragover监听事件,给拖放目标元素添加dragover监听事件,在事件触发时改变目标元素样式...="" },false); } // 添加函数DragStart到window.onload监听事件 window.addEventListener("load",Drop, false); 文件api...load事件,当成功完成数据读取时触发事件 abort事件,当中断读取数据时触发事件 error事件,当读取数据发生错误时触发事件 loadend事件,当结束读取数据时触发事件,数据读取可能成功也可能失败

    2.6K10

    10个HTML文件上传技巧

    上已经收录,更多往期高赞文章分类,也整理了很多我文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。...默认情况下,它使用操作系统本机文件浏览器上传单个文件。成功上传后,File API 使得可以使用简单 JS 代码读取File对象。 要读取File对象,我们需要监听 change事件。...管理文件内容 成功上传文件后显示文件内容,站在用户角度上,如果上传之后,没有一个预览,就很奇怪也体贴。 我们可以使用FileReader对象将文件转换为二进制字符串。...然后添加load 事件侦听器,以在成功上传文件时获取二进制字符串。... 通过它们各自ID获取dropzone和content 区域。

    3K10

    事件

    事件,就是文档或浏览器窗口中发生一些特定交互瞬间。可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应代码。 一、 事件事件流,描述是从页面中接收事件顺序。 1....建议:由于老版本浏览器不能很好支持事件捕获,所以我们可以放心使用事件冒泡,特殊情况下再使用事件捕获。 3....removeEventListener("事件", "处理程序"),参数应与添加处理程序时使用参数相同,意味着通过addEventListener添加匿名函数将无法移除!!...最好只在需要在事件到达目标之前捕获它时候将事件处理程序添加到捕获阶段。如果不是特别需要,建议在事件捕获阶段注册事件处理程序。 4....有两种定义onload事件处理程序方式 方式一:JavaScript代码 // 这里使用上述兼容方式 EventUtil.addHandler(window, "load", function(

    3.3K51
    领券