Event事件对象之框架或Object

最新推荐文章于 2024-07-14 21:38:16 发布

zzzzzzz周绍辉

最新推荐文章于 2024-07-14 21:38:16 发布

阅读量1k

点赞数

分类专栏： javascript 对象事件 Event DOM 文章标签：对象 javascript Event 事件 DOM

本文链接：https://blog.csdn.net/qq_32758013/article/details/76039543

版权

javascript 同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

对象

25 篇文章 0 订阅

订阅专栏

事件

10 篇文章 0 订阅

订阅专栏

1. onbeforeunload

在即将离开当前页面（刷新或关闭）时触

该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。

对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 “确定要离开此页吗？”。该信息不能删除。

但你可以自定义一些消息提示与标准信息一起显示在对话框。

注意

如果你没有在元素上指定 onbeforeunload 事件，则需要在 window 对象上添加事件，并使用 returnValue 属性创建自定义信息(查看以下语法实例)。
在 Firefox 浏览器中，只显示默认提醒信息（不显示自定义信息）。

提示

不支持冒泡

支持的HTML标签

<body>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	15.0

document.body.onbeforeunload = function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
</body>
<script>
    document.body.onbeforeunload = function(){
        return '不要关闭奴家';
    }
</script>
</html>

2. onerror

加载外部文件（文档或图像）发生错误时触发

提示

不支持冒泡

支持的HTML标签

<img>, <input type="image">, <object>, <script>, <style>

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

ElementObject.onerror = function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
</body>
<script>
    function scriptError(){
            console.log(this.src);
    }
</script>
<script src='error/01' onerror='scriptError.call(this)'></script>
<script src='error/02' onerror='scriptError.call(this)'></script>
<script src='error/03' onerror='scriptError.call(this)'></script>
</html>

3. onhashchange

当前 URL 的锚部分(以 ‘#’ 号为开始) 发生改变时触发

锚部分的实例：指定当前 URL 为
http://www.example.com/test.htm#part2 - 这个 URL 中的锚部分为 #part2。

你可以使用以下方式调用事件:
* 通过设置Location 对象的 location.hash 或 location.href 属性修改锚部分。
* 使用不同书签导航到当前页面（使用”后退” 或”前进”按钮）
* 点击链接跳转到书签锚

提示

支持冒泡

支持的HTML标签

<body>

浏览器支持

google	IE	firefox	safari	opera
5.0	8.0	3.6	5.0	10.6

document.body.onhashchange = function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
</body>
<script>
    location.hash = "023";

    document.body.onhashchange = function(){
        alert("你又在做坏事！");
    }
</script>
</html>

4. onload

在页面或图像加载完成后立即发生

通常用于元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。

支持的HTML标签

<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

window.onload=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
</body>
<script>

    window.onload = function(){
        console.log(document);
    }

</script>
</html>

5. onpageshow

用户浏览网页时触发

onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。

为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false (查看以下 “更多实例” )。

提示

不支持冒泡

支持的HTML标签

<body>

浏览器支持

google	IE	firefox	safari	opera
true	11.0	true	5.0	true

document.body.onpageshow=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
</body>
<script>

    document.body.onpageshow = function(){
        console.log(document);
    }

</script>
</html>

6. onpagehide

用户离开网页时触发

离开网页有多种方式。如点击一个链接，刷新页面，提交表单，关闭浏览器等。.

onpagehide 事件有时可以替代 onunload 事件，但 onunload 事件触发后无法缓存页面。

为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false 。

提示

不支持冒泡

支持的HTML标签

<body>

浏览器支持

google	IE	firefox	safari	opera
true	11.0	true	5.0	true

document.body.onpagehide=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
</body>
<script>

    document.body.onpagehide = function(){
        console.log(document);
    }

</script>
</html>

7. onresize

窗口或框架被调整大小时发生

支持的HTML标签

<a>, <address>, <b>, <big>, <blockquote>, <body>, <button>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <textarea>, <tt>, <ul>, <var>

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

window.onresize=function || ElementObject.onresize = function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
</body>
<script>

    window.onresize = function(e){
        e = e || window.event;
        console.log(this.innerWidth);
    }

</script>
</html>

8. onscroll

元素滚动条在滚动时触发

提示

使用 CSS overflow 样式属性来创建元素的滚动条。

支持的HTML标签

<address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> - <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

window.onscroll=function || ElementObject.onscroll = function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body style='height:3000px;'>
</body>
<script>

    window.onscroll = function(e){
        e = e || window.event;
        console.log(this.innerWidth);
    }

</script>
</html>