JS-框架对象事件

①onabort(DOM2):事件发生在用户对图片进行中止加载的操作(支持冒泡,不可以取消,在用户界面上是UIEvent,否则是Event,支持所有html元素,除了那11种)

支持的浏览器型号(ie(Yes));

用法:html中<element οnabοrt="function-name()">

            javascript中    object.οnabοrt=function(){...}

            javascript中,使用addEventListener方法:    object.addEventListener("onabort",myscript);

②onbeforeunload(DOM2): 事件在即将离开当前页面(刷新或关闭)时触发(不支持冒泡,可以取消,事件类型是Event,支持html元素只有<body>)

支持的浏览器型号(chrome(Yes)、ie(Yes)、ff(Yes)、safari(Yes)、opera(No));

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

对话框默认的提示信息根据不同的浏览器有所不同,标准的信息类似 "确定要离开此页吗?"。该信息不能删除。但你可以自定义一些消息提示与标准信息一起显示在对话框。

注意: 如果你没有在 <body> 元素上指定 onbeforeunload 事件,则需要在 window 对象上添加事件,并使用 returnValue属性创建自定义信息(查看以下语法实例)。如:window.addEventListener("beforeunload", function(event) {
                           event.returnValue = "我在这写点东西...";
              });

                  window.onbeforeunload = function(event) {
                           event.returnValue = "我在这写点东西...";
             };

注意: 在 Firefox 浏览器中,只显示默认提醒信息(不显示自定义信息)。

③onerror:事件在加载外部文件(文档或图像)发生错误时触发。(不支持冒泡,不可以取消,在用户界面是UIEvent,否则是Event,支持的html标签有<img>、<input type="image">、<object>、<script>、<style>)

支持的所有浏览器型号(所有)

用法:三种,不累述了。。。

④onhashchange:事件在当前URL的锚部分(以‘#’号为开始)发生改变时触发。(支持冒泡,不可以取消,事件类型是Event,支持html元素只有<body>

支持的浏览器第一个型号:(chrome5.0、ie8.0、ff3.6、Safari5.0、Opera10.6

用法:三种,不累述了。。。

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

你可以使用以下方式调用事件:

⑤onload(DOM2):事件会在页面或图像加载完成后立即发生。

浏览器都支持~

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

支持onload的标签<body>、<frame>、<frameset>、<iframe>、<img>、<input type="image">、<link>、<script>、<style>

用法:前两种~

⑥onpageshow:事件在用户浏览网页时触发,每次加载网页都被触发(不支持冒泡,不可以取消,事件类型为PageTransitionEvent,支持的标签只有<body>)

支持的浏览器第一个型号:(chrome(Yes)、ie11.0、ff(Yes)、Safari5.0、Opera(Yes)

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

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

<body οnpageshοw="myFunction(event)">

function myFunction(event) { 
    alert("页面是否从浏览器缓存中加载? " + event.persisted);
}

用法:三种,不累述了。。。

onunload(DOM2):事件会在用户退出页面时发生。(如:点击一个链接、提交表单、关闭浏览器等。)(支持的标签有<body>、<frameset>)

支持的浏览器:ie、ff、Safari~

注意:onunload事件同样触发了页面载入事件(+onload事件)

用法:    HTML中<body οnunlοad="SomeJavScriptCode">

             JavaScript中window.οnunlοad=function(){SomeJavScriptCode}

onpagehide:事件在用户离开网页时触发。(如:点击一个链接、刷新页面、提交表单、关闭浏览器等。)(不支持冒泡,不可以取消,事件类型为PageTransitionEvent,支持的标签只有<body>)

支持的浏览器第一个型号:(chrome(Yes)、ie11.0、ff(Yes)、Safari5.0、Opera(Yes)

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

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

用法:三种,不累述了。。。

⑨onresize:事件会在窗口或框架被调整大小时发生。

所有主流浏览器都支持。

用法:前两种~

支持的标签:<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>

⑩onscroll:事件在元素滚动条在滚动时触发。(支持冒泡,不可以取消,事件类型Event)

提示:使用CSS的overflow样式属性创建滚动条。

浏览器都支持~

用法:三种,不累述了。。。

支持的标签:<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>




用法:三种,不累述了。。。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值