关于load事件的event.target值的问题

load事件是设置在window上的，在document上面设置无效，可是为什么在事件函数中调用event.target得到的是document对象？

同样的事情在resize这个事件上就不会发生，在事件函数中调用event.target返回的就是window对象

慕仔2276916 2019-08-14

源自：JS事件 3-1 事件类型（一）

1

收起

5回答

好帮手慕星星 2019-08-23 17:16:07

你好，document上不能绑定上这个事件哦，支持onload事件的对象有：

image, layer, window

记住这三个就可以。

祝学习愉快~

好帮手慕星星 2019-08-21 10:04:25

你好，非常抱歉同学，之前没有看清楚同学的问题，给同学解释的scroll。

onload事件可以绑定在window对象上：

所以onload事件在window调用的时候才会有效。而这个事件不是说写上就可以，需要一个触发条件。这个触发条件就是文档加载完成，所以触发这个事件的元素就是document，event.target结果也就是document文档。

祝学习愉快！

提问者慕仔2276916 #1

可是既然触发这个事件的元素是document，为什么没有document.onload呢

2019-08-23 13:55:21

好帮手慕星星 2019-08-15 17:04:58

你好，使用Chrome浏览器测试，在document上绑定滚动事件是有效的哦，例如：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        height: 2000px;
    }
    </style>
</head>
 
<body>
    <script>
    document.onscroll = function() {
        console.log('scroll')
    }
    </script>
</body>
 
</html>

同学可以测试下，祝学习愉快！

提问者慕仔2276916 #1

load事件是设置在window上的，在document上面设置无效，可是为什么在事件函数中调用event.target得到的是document对象？

2019-08-21 09:26:34

好帮手慕星星 2019-08-14 19:23:13

同学你好，

可以这样理解，scroll事件是文档在滚动的时候触发，无论是绑定在window上还是document上，最终滚动的都是文档，所以e.target触发事件的元素就是document文档本身。

而resize事件是当调整浏览器窗口大小时会触发，本质是拖动改变窗口大小，所以e.target触发元素为window对象。

同学这样理解会简单一些，祝学习愉快！

提问者慕仔2276916 #1

load事件是设置在window上的，在document上面设置无效，可是为什么在事件函数中调用event.target得到的是document对象？

2019-08-15 16:11:55

提问者慕仔2276916 2019-08-14 16:57:48

补充提问：

scroll事件则是可以绑定到window和document对象上，但不论绑定哪个，event.target都是返回document对象

相似问题

老师，关于图片加载完会触发@load事件的问题

问下这个.className的问题

在这里面load 和 error事件

图片加载完为什么会触发load事件？？

load事件

登录后可查看更多问答，登录/注册

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号