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>




用法:三種,不累述了。。。
發佈了51 篇原創文章 · 獲贊 6 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章