HTML事件屬性--DOM - zishu's blog

研究 html 的物件，事件和方法，從 js 的角度來思考，這個標籤的屬性是透過什麼方法，觸發什麼事件來實現的

鍵盤鼠標事件
頁面窗口事件
表單事件

一、window 事件屬性#

針對 window 物件觸發的事件，在<body>中執行

1.onbeforeprint／onafterprint#

在瀏覽器列印之前 / 後觸發

<body onbeforeprint = print()>
<script>
    function print() {
        alert("列印之前！")
    }
</script>

列印前和列印後的事件方法類似，一個是在列印前觸發事件，一個是在列印這個事件結束之後觸發onafterprint這個事件

demo 查看

2.onbeforeunload/unload#

離開頁面之前觸發的事件／之後觸發的事件

打開 f12，然後刷新，或者關閉瀏覽器，可以在瀏覽器觸發事件

<script>
    window.onbeforeunload = function(){
        return "提示"
        //返回的內容不會顯示，
        //在刷新的時候觸發，或者關閉瀏覽器，瀏覽會直接提示是否重新加載，不能直接返回return
    }
</script>

demo 查看

3.onerror#

當圖片出錯時可以觸發該事件，支持該事件的標籤只有 <img>,<object>,<style>

<img src="1.gif" onerror = "myfun()">

<script>
    function myfun() {
        alert("圖片出錯")
    }
</script>

1.gif 不存在，因此觸發了一個 myfun () 事件，彈出窗口

demo 查看

4.onhashchange#

當文檔改變時發生的腳本
？？？

5.onload#

頁面加載完成之後觸發

demo 查看

6.onmessage#

在消息被觸發時運行
???

7.onoffline#

當瀏覽器離線時觸發

<body onoffline="myfun()">

8.ononline#

當瀏覽器在線工作時觸發

<body ononline="myfun()">

ononline和onoffline在網路斷線或者連線時觸發，可以控制電腦網路查看效果

9.onpagehide#

當用戶從網頁離開時觸發，也可以理解成當窗口隱藏時運行的腳本

刷新頁面可以觸發事件

demo 查看

10.onpageshow#

打開一個新頁面或者刷新的時候觸發

demo 查看

相當於onload，加載頁面時觸發，但是在不同瀏覽器觸發的有所不同

第一次加載頁面時，onpageshow在ie瀏覽器中不觸發，其他情況都觸發

11.onresize#

當瀏覽器窗口被改變大小時觸發事件

<body onresize="myfun()">
    <script>
        function myfun() {
            alert('瀏覽器窗口改變了')
        }
    </script>
</body>

demo 查看

12.onunload#

頁面被下載時觸發，就是刷新或者關閉頁面時觸發

window.onunload = function() {
    return '確定關閉嗎？'
}

13.onpopstate#

當瀏覽器窗口記錄改變時運行的腳本，

14.onredo#

當文檔執行撤銷時觸發的事件

二、form 事件屬性#

由 html 表單內觸發的事件，通常使用在 form 元素中

1.onblur#

失去焦點時運行的腳本

<input name="int" id="int" onblur="myfun()">
<script>
    function myfun() {
        var int = document.getElementById('int').value;
        document.getElementById('int').value = int.toUpperCase();
    }
</script>

給 input 綁定一個 onblur=myfun () 的事件，當 input 失去焦點的時候產生什麼樣的效果

demo 查看

2.onfocus#

元素獲得焦點時觸發事件，和 onblur 相反

demo 查看

3.onchange#

當元素值被改變的時候觸發事件

<input type="text" id="int" name="int" onchange="myfun()">
<script>
    function myfun() {
        alert('我的元素被改變啦！')
    }
</script>

這個事件的意思就是，當我對 input 內容進行操作改變後，瀏覽器會彈出一個 alert

demo 查看

4.oncontextmenu#

當用戶右鍵操作時觸發該事件

可以綁定在任意元素中觸發，可以一直觸發，不用刷新

<div oncontextmenu="myfun()">這是一個文本框！</div>
<script>
    function myfun() {
        alert('oncontentmenu事件觸發')
    }
</script>

demo 查看

5.onformchange#

當表單獲得輸入時可以觸發事件

觸發發不了腳本

6.onforminput#

當表單獲得用戶輸入時觸發的事件，無法觸發

瀏覽器不支持

6.oninput#

當元素獲得用戶輸入時觸發的事件
當輸入框輸入或者刪除時都會觸發 oninput

<input type="text" oninput="myfun()">
<script>
    function myfun() {
        alert('oninput觸發了')
    }
</script>

onchange和oninput有相似的地方，都是改變文本內容時觸發事件

但是onchange是在 input 失去焦點時才觸發，oninput是立刻觸發

demo 查看

7.oninvalid#

oninvalid事件要搭配required屬性來使用

required如果使用該屬性，代表必填字段，oninvalid是當元素無效時觸發的事件

<form>
    <input type="text" oninvalid="myfun()" required>
    <input type="submit">
</form>
    <script>
        function myfun() {
            alert('填寫為空')
    }
</script>

demo 查看

8.onreset#

表單中重置按鈕被點擊時觸發

<form onreset="myfun()">
    <input type="text">
    <input type="reset" value="reset">
</form>
<script>
    function myfun(){
        alert('重置成功')
    }
</script>

demo 查看

9.onselect#

文本被選中時觸發

<input onselect="myfun()" value="選中我">
<script>
    function myfun() {
        alert('onselect被觸發 ')
    }
</script>

demo 查看

10.onsubmit#

當表單被提交時觸發

要把事件綁定到 form 標籤裡面

<form onsubmit="myfun()">
    <!-- 注意：事件要綁定到form標籤上面 -->
    <input type="text" name="name">
    <input type="submit" value="submit">
</form>
<script>
    function myfun() {
        alert('提交了')
    }
</script>

demo 查看

注意：提交了之後會自動刷新頁面，document 和 console 的觸發內容會立刻刷新，一閃而過，只有 alert 能停留在頁面上，等待點擊確定

三、key 鍵盤事件#

1.onkeydown#

按下任意鍵時觸發，包括系統按鈕，箭頭和功能鍵

demo 查看

2.onkeypress#

按下任意字母數字鍵時觸發，但系統按鈕，箭頭和功能無法識別

3.onkeyup#

鬆開任何之前按下的鍵盤時觸發

demo 查看

四、mouse 鼠標事件#

利用鼠標觸發的事件

1.onclick#

鼠標點擊元素觸發的事件

<p onclick="myfun()">點擊我</p>
<script>
    function myfun() {
        alert('點擊成功')
    }
</script>

demo 查看

2.ondblclick#

鼠標雙擊時觸發的事件

<div ondblclick="myfun()">測試文本！</div>
<script>
    function myfun() {
        alert('雙擊測試成功！')
    }
</script>

demo 查看

3. 拖動事件#

ondrag/
元素被拖動時觸發的事件

ondragstart / 在拖動操作開端運行的腳本

ondrop/
當元素正在被拖動時觸發的事件

ondragend / 在拖動操作末端運行的腳本

ondragenter / 當元素元素已被拖動到有效拖放區域時運行的腳本

ondragleave / 當元素離開有效拖放目標時運行的腳本

ondragover / 當元素在有效拖放目標上正在被拖動時運行的腳本

4.onmousedown/onmouseup#

當元素按下鼠標時觸發的事件 / 鼠標釋放時觸發的事件

一個是按下去的瞬間就觸發
一個是當鼠標被鬆開的時候觸發

onmouseup效果和onclick一樣，因為click也是點擊過後觸發

這兩個事件加起來相當於一個click事件，但是並不能用這兩個事件來做點擊事件的效果

demo 查看

5.onmousemove#

當鼠標移動到元素上時觸發

相當於 css 裡面的 :hover，但是作為事件擁有更靈活多變的用法

demo 查看

6.onmouseout#

當鼠標離開元素時觸發

demo 查看

7.onmouseover#

當鼠標進入元素時觸發

onmouseover和onmousemove都是鼠標進入元素觸發

區別：

1.

over在進入元素時觸發，但在元素內部移動時不觸發

move是進入元素時和在元素裡面移動時都觸發

2.

over優先觸發，然後才觸發move

8.onmousewheel#

當鼠標滾動被滾動時觸發的事件

<style>
    div {
        height: 1000px;
    }
</style>

<body>
    <div onmousewheel="myfun()">測試</div>
    <script>
        function myfun() {
            alert('onmousewheel')
        }
    </script>
</body>

每次滾動時都可以觸發，可以綁定到 body 上

demo 查看

9.onscroll#

當元素滾動條被滾動時觸發的事件

<div onscroll="myfun()">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</div>
<p>滑動了<span id="ci"></span>次</p>
<script>
    x = 0
    function myfun() {
        document.getElementById('ci').innerHTML = x += 1
    }
</script>

這個案例－－－滑動滾動計數

demo 查看

區別：

1.wheel在滾輪滑動的時候有效，鼠標拖拽的時候無效

2.onscroll不管在滑動還是拖動的時候，均生效