用户界面事件

最新推荐文章于 2024-10-02 05:39:15 发布

一如既往的坚持

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量355

点赞数

分类专栏： javascript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/hylwan8884658/article/details/122094564

版权

javascript 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

用户界面事件
1.load：在 window 上当页面加载完成后触发，在窗套frameset上当所有窗格frame都加载完成后触发，在img元素上当图片加载完成后触发，在object元素上当相应对象加载完成后触发
2.unload：在 window 上当页面完全卸载后触发，在窗套上当所有窗格都卸载完成后触发，在object元素上当相应对象卸载完成后触发
3.abort：在object元素上当相应对象加载完成前被用户提前终止下载时触发
4.error：在 window 上当 JavaScript 报错时触发，在img元素上当无法加载指定图片时触发，在object元素上当无法加载相应对象时触发，在窗套上当一个或多个窗格无法完成加载时触发。
5.select：在文本框（ input或 textarea）上当用户选择了一个或多个字符时触发。
6.resize：在 window 或窗格上当窗口或窗格被缩放时触发
7.scroll：当用户滚动包含滚动条的元素时在元素上触发。 body元素包含已加载页面的滚动条。

load事件
在 window 对象上， load 事件会在整个页面（包括所有外部资源如图片、 JavaScript 文件和 CSS 文件）加载完成后触发
方式一：

<script>
    window.onload = function() {
        alert("方式一页面加载完成")
    };
</script>

方式二：

<script>
    window.addEventListener("load", () => {
        alert("方式二页面加载完成")
    });
</script>

方式三：
任何在 window 上发生的事件，都可以通过给元素上对应的属性赋值来指定，这是因为 HTML 中没有 window 元素

<body onload="alert('方式三页面加载完成')"></body>

图片上也会触发 load 事件
方式一：

<body>
    <img src="C:\Users\Administrator\Pictures\247fc2a069d096bf4e66fcd02e91317f.png" onload="alert('方式一图片加载完成')">
</body>

方式二：

<body>
    <img src="C:\Users\Administrator\Pictures\247fc2a069d096bf4e66fcd02e91317f.png" id="myImage">
</body>
<script>
    let image = document.getElementById("myImage");
    image.addEventListener("load", (event) => {
        alert(event.target.src);
    });
</script>

通过javascript创建img元素，然后触发加载事件

<script>
    window.addEventListener("load", () => {
        let image = document.createElement("img");
        // 或者通过Image 对象预先加载图片
        // let image = new Image();
        image.addEventListener("load", (event) => {
            alert(event.target.src);
        });
        document.body.appendChild(image);
        image.src = "C:\\Users\\Administrator\\Pictures\\247fc2a069d096bf4e66fcd02e91317f.png";
    });
</script>

resize事件
当浏览器窗口被缩放到新高度或宽度时，会触发 resize 事件。这个事件在 window 上触发，因此可以通过 JavaScript 在 window 上或者为元素添加 onresize 属性来指定事件处理程序

<script>
    window.addEventListener("resize", (event) => {
        alert("窗口大小发生变化");
    });
</script>

scroll 事件
滚动时候触发scroll 事件

<body style="height: 2000px;">
</body>
<script>
    window.addEventListener("scroll", (event) => {
        alert(document.documentElement.scrollTop);
    });
</script>