03JavaScriptDOM事件18

時間 2019-11-13

標籤 03javascriptdom javascriptdom 事件欄目 JavaScript 简体版

原文原文鏈接

day18

JavaScript事件基礎

事件就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。

HTML事件
　　直接在HTML元素標籤內添加時間，執行腳本。
　　語法：<tag 事件="執行腳本" ></tag>
　　功能：在HTML元素上綁定事件。
　　說明：執行腳本能夠是一個函數的調用。

this是對該DOM元素的引用

鼠標事件
　　onload：頁面加載時觸發
　　onclick:鼠標點擊時觸發
　　onmouseover：鼠標滑過期觸發
　　onmouseout：鼠標離開時觸發
　　onfoucs：得到焦點時觸發
　　onblur：失去焦點時觸發
　　onchange：域的內容改變時發生（一班做用域select或checkbox或radio）

DOM0級事件
　　1.經過DOM獲取HTML元素
　　2.（獲取HTML元素）.事件=執行腳本
　　語法：ele.事件=執行腳本
　　功能：在DOM對象上綁定事件
　　說明：還行腳本能夠是一個匿名函數，也能夠是一個函數的調用。

不建議使用HTML事件緣由：
　　1.多元素綁定相同時間是，效率低。
　　2.不建議在HTML元素中寫JavaScript代碼。

　　onsubmit:表單中的確認按鈕被點擊時發生
　　onmousedown：鼠標按鈕在元素上按下時觸發
　　onmousemove：在鼠標指針移動式發生
　　onmouseup：在元素上鬆開鼠標按鈕時觸發
　　onresize：當調整瀏覽器窗口的大小時觸發
　　onscroll：拖動滾動條時觸發

鍵盤事件與keyCode屬性
　　onkeydown：在用戶按下一個鍵盤按鍵時發生
　　onkeypress：在鍵盤按鍵被按下並釋放一個鍵時發生
　　onkeyup：在鍵盤按鍵被鬆開時發生
　　keyCode：返回onkeypress、onkeydown或onkeyup事件觸發的鍵的值的
　　字符代碼，或鍵的代碼css

onload.html:html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function () {
            var box = document.getElementById('box');
            var clicked = function () {
                alert('clicked!')
            }
            box.onclick = clicked;
        }
    </script>
    <style type="text/css">
        .box{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="box" class="box">這是一個div</div>
</body>
</html>

onfocus_onblur.html:瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .left,.tip{
            float: left;
        }
        .box{
            margin-top: 50px;
            margin-left: 20px;
        }
        .tip{
            display: none;
        }
    </style>
    <script>
        window.onload = function () {
            var phone = document.getElementById('phone');
            var tip = document.getElementById('tip');
            phone.onfocus = function () {
                tip.style.display="block";
            }
            phone.onblur = function () {
                var phoneVal = this.value;
                if (phoneVal.length == 11 && isNaN(phoneVal) == false) {
                    tip.innerHTML = '<img src="img/right.png" alt="right">';
                } else {
                    tip.innerHTML = '<img src="img/error.png" alt="right">';
                }
            }
        }
    </script>
</head>
<body>
    <div class="box">
        <div class="left">
            <input type="text" placeholder="請輸入手機號" id="phone">
        </div>
        <div class="tip" id="tip">
            請輸入有效的手機號
        </div>
    </div>
</body>
</html>

ononchange.html:函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = init;
        function init() {
            var menu = document.getElementById('menu');
            menu.onchange =function () {
                var bgcolor = this.value;
                if (bgcolor == "") {
                    document.body.style.background = '#fff';
                } else {
                    document.body.style.background = bgcolor;
                }
            }
        }
    </script>
</head>
<body>
    <div class="box">
        請選擇頁面的背景顏色：
        <select name="menu" id="menu">
            <option value="">請選擇</option>
            <option value="#f00">紅色</option>
            <option value="#0f0">綠色</option>
            <option value="#00f">藍色</option>
            <option value="#ccc">灰色</option>
            <option value="#ff0">黃色</option>
        </select>
    </div>
</body>
</html>

other.html:this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            background: #f00;
            width: 200px;
            height: 200px;
        }
    </style>
    <script>
        window.onload = function () {
            var box = document.getElementById('box');
            box.onmousedown = function () {
                console.log("我被按下了")
            }
            box.onmousemove = function () {
                console.log("我移動了");
            }
            box.onmouseup = function () {
                console.log("我被鬆開了");
            } 
            box.onclick = function () {
                console.log("我被點擊了");
            }
            window.onresize = function () {
                console.log("個人尺寸變了");
            }
            window.onscroll = function () {
                console.log("我被拖動了");
            }
        }
    </script>
</head>
<body>
    <div class="box" id="box"></div>
</body>
</html>

鍵盤事件和keyCode.html:spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        p span{
            color: #f00;
        }
        p span em{
            font-style: normal;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>您還能夠輸入<span><em id="count">30</em>/30</span>    </p>
        <textarea id="text" rows="5" cols="50"></textarea>
    </div>
    <script>
        var text = document.getElementById('text');
        var count = document.getElementById('count')
        var total = 30;
        document.onkeyup = function (event) {
            var len = text.value.length;
            var allow = total - len;
            count.innerHTML = allow;
            console.log(event.keyCode);
        }
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。