API之註冊事件及應用

目錄

• 註冊事件
  • 案例之點擊按鈕切換圖片
• 非表單元素的屬性
  • 案例
    • 點擊按鈕div的顯示和隱藏
    • 切換照片
    • 點擊一張照片，在當前頁面顯現出大圖
  • innerHTML和innerText的區別
  • innerText的兼容性處理
• 表單元素的屬性
  • 案例
    • 給文本框賦值
    • 檢測用戶名
    • 設置下拉框中的選中項
    • 搜索文本框
    • 全選和反選
• 自定義屬性操做

註冊事件

• 獲取頁面元素
• 觸發事件

案例

在body標籤中定義一個input標籤，和一個img標籤，而後在script中，先給獲取要操做的頁面元素，而後給input標籤設置觸發事件，由於是獲取點擊事件，因此用事件源（這裏是btn）調用onclick屬性（觸發事件都是由on開頭），而後給寫一個匿名函數賦值給btn.onclick; 因此之後每次點擊按鈕時都會執行function內的內容

//獲取頁面元素
        var btn = document.getElementById('btn');
        var mv = document.getElementById('mv');
        //定義一個變量記錄照片的狀態
        flag = 1;
        //觸發事件
        btn.onclick = function() {
            if (flag === 1) {
                //mv是個僞數組，因此能夠用對象的方法改變mv內的屬性
                mv.src = 'images/b.jpg';
                flag = 2; // 讓下一次點擊時能夠切換回上一張
            } else if (flag === 2) {
                mv.src = 'images/a.jpg';
                flag = 1;
            }
        }

非表單元素

• href
• title
• id
• src
• className

// 獲取對象元素
        var link = document.getElementById('link');
        var mv = document.getElementById('mv');



        //打印DOM對象元素的屬性值
        console.log(link.id); //  link
        console.log(link.href); // https://www.baidu.com/
        console.log(link.title); //我是百度
        console.log(mv.src); //file:///C:/Users/Administrator/Desktop/front-end%20learning/2019.05.20/images/1.jpg
        console.log(mv.alt); //beauty
        console.log(link.id); //link

        //改變DOM對象的屬性值

        link.id = 'love';
        mv.id = 'henious';

案例

點擊按鈕div的顯示和隱藏

-步驟

在html內定義一個按鈕和一個div盒子，分別給他們設置id名，並給div盒子設置背景顏色。先獲取頁面元素，而後給button設置狀態。 當點擊按鈕後，咱們要對盒子進行操做，因此咱們要獲取div對象。獲取完div對象以後，咱們應該要判斷當前的div盒子是顯示的仍是隱藏的（咱們默認剛進入網頁時，盒子是顯示的），這時咱們便要定義一個Boolean變量（isShow）來幫咱們記錄div的狀態。而後進入判斷， 若是盒子是顯示的，當咱們點擊按鈕後，咱們應該讓盒子隱藏起來，而且改變button的value的值爲顯示，而後改變isShow的值爲false，若是盒子是隱藏的，那麼咱們應該讓盒子顯示出來，改變button的value的值爲隱藏，而後改變isShow的值爲true

//獲取元素
        var btn = document.getElementById('btn');
        //給按鈕註冊事件
        //isshow 記錄了box的狀態，true顯示， false 隱藏
        var isShow = true;

        btn.onclick = function() {
            var box = document.getElementById('box');
            if (isShow) {
                box.className = 'hidden';
                btn.value = '顯示';
                isShow = false;
            } else {
                box.className = 'show';
                btn.value = '隱藏';
                isShow = true;
            }
        }

切換照片

• 步驟
  • 先在網頁中生成一個button和一個圖片
  • 獲取button和img的頁面元素
  • 定義一個變量記錄照片狀態，讓它點擊按鈕時能夠來回切換
  • 觸發事件

//獲取頁面元素
        var btn = document.getElementById('btn');
        var mv = document.getElementById('mv');
        //定義一個變量記錄照片的狀態
        var flag = 1;
        //觸發事件
        btn.onclick = function() {
            if (flag === 1) {
                //mv是個僞數組，因此能夠用對象的方法改變mv內的屬性
                mv.src = 'images/b.jpg';
                flag = 2; // 讓下一次點擊時能夠切換回上一張
            } else if (flag === 2) {
                mv.src = 'images/a.jpg';
                flag = 1;
            }
        }

點擊一張圖片在當前頁面出現大圖

-案例描述

先在html中生成一div，這個div內有4個a標籤，每一個a標籤都有一個img標籤。在div外再定義一個img標籤，用來顯示點擊a標籤時，a標籤裏面的img標籤裏的圖片會顯示在此img標籤中。再設一個p標籤，p標籤的內容會隨着點擊a標籤的變化而變化

• 步驟
  • 獲取div內全部的a標籤
  • 給全部a註冊事件
  • 觸發事件

//獲取元素     獲取到全部的a標籤
        var gallaryShow = document.getElementById('gallaryShow');
        var links = document.getElementsByTagName('a');
        //給全部的標籤a註冊事件
        for (var i = 0; i < links.length; i++) {
            //全部的a標籤對應的元素
            var link = links[i];
            //註冊事件
            link.onclick = function() {
                //獲取佔位大的img標籤
                var image = document.getElementById('image');
                image.src = this.href;
                var des = document.getElementById('des');
                des.innerText = this.title;
                return false;
            }
        }

innerHTML和innerText的區別

• innerHTML ： 會把標籤和文本一塊兒輸出
• innerText ： 輸出純文本

var hi = document.getElementById('hi');
        console.log(hi.innerHTML);//  <span>hello world</span>
        console.log(hi.innerText); //hello world

innerText的兼容性處理

• 如何知道瀏覽器是否支持元素的某個屬性
  • 用console.log(typeof ) 來測試，當此屬性存在時返回該屬性的類型，若屬性不存在是，返回undefined

var box = document.getElementById('box');

        function getInnerText(element) {
              // 判斷當前瀏覽器 是否支持元素的innerText屬性，支持innerText 使用element.innerText獲取內容
      // 若是不支持innerText屬性，使用element.textContent獲取內容
            if (typeof element.innerText === 'String') {
                return element.innerText;
            } else {
                return element.textContent;
            }
        }
        console.log(getInnerText(box));

表單屬性

• value 用於大部分表單元素的內容獲取(option除外)
• type 能夠獲取input標籤的類型(輸入框或複選框等)
• disabled 禁用屬性
• checked 複選框選中屬性
• selected 下拉菜單選中屬性

案例

給文本框賦值

// 獲取元素
    var btn = document.getElementById('btn');
    // 註冊事件
    btn.onclick = function () {
      var txt = document.getElementById('txt');
      console.log(txt.value);
      console.log(txt.type);
      // 當html中的標籤的屬性，只有一個值的時候
      // DOM中對應的元素的屬性值是布爾類型
      console.log(txt.disabled);
      txt.disabled = true;
    }

    var btn1 = document.getElementById('btn1');
    btn1.onclick = function () {
      var txt = document.getElementById('txt');
      // 設置文本框中的內容
      txt.value = 'hello world';
    }

檢測用戶名

//獲取按鈕元素
        var btnLogin = document.getElementById("btnLogin");
        //給按鈕註冊事件
        btnLogin.onclick = function() {
            //獲取用戶名文本框元素
            var userName = document.getElementById('userName');

            // 檢測用戶名是不是3-6位，密碼是不是6-8位，

            if (userName.value.length < 3 || userName.value.length > 6) {
                userName.className = 'highlight';
                return;
            } else {
                userName.className = " ";
            }

            //獲取密碼文本框元素
            var userPassWord = document.getElementById('userPassWord');
            //密碼是不是6-8位 若是不知足要求高亮顯示文本框
            if (userPassWord.value.length < 6 || userPassWord.value.length > 8) {
                userPassWord.className = 'highlight';
                return;
            } else {
                userPassWord.className = " ";
            }
            console.log('執行登陸');
        }

當點擊按鈕的時候，獲取全部文本框的值，並使用 | 分割輸出

//當頁面加載完畢，給全部的文本框賦值
        var inputs = document.getElementsByTagName('input');
        for (var i = 0; i < inputs.length; i++) {
            var input = inputs[i];
            //根據type屬性判斷是不是文本框
            if (input.type === 'text') {
                input.value = i;
            }
        }
        //當點擊按鈕時，獲取全部文本框的值，而且用|分割
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            var array = [];
            for (var i = 0; i < inputs.length; i++) {
                var input = inputs[i];
                //判斷是文本框
                if (input.type === 'text') {
                    array.push(input.value);
                }
            }
            console.log(array.join('|'));
        }

設置下拉框中的選中項

//給按鈕註冊事件
        var btn = document.getElementById('btn');
        //註冊觸發事件
        btn.onclick = function() {
            //獲取全部的option
            var selectFoods = document.getElementById('selectFoods');
            var options = selectFoods.getElementsByTagName('option');

            //隨機生成索引
            var randomIndex = parseInt(Math.random() * options.length);
            // 4 根據索引獲取option，並讓option選中
            var option = options[randomIndex];
            option.selected = true;
        }

搜索文本框(獲取焦點和失去焦點)

<body>
    <input type="text" value="請輸入文字" id="txt">
    <input type="button" value="搜素" id="btn">




    <script>
        var txt = document.getElementById('txt');
        //獲取焦點時，把文本框的value值置空
        txt.onfocus = function() {
            if (this.value === '請輸入文字') {
                this.value = '';
            }
        }
    //失去焦點， 把文本框的value值設爲請輸入文字
        txt.onblur = function() {
            if (this.value === '') {
                this.value = '請輸入文字';
            }
        }
    </script>
</body>

全選和反選

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微軟雅黑";
            color: #fff;
        }

        td {
            font: 14px "微軟雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>
<body>
  <div class="wrap">
      <table>
          <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll" />
                </th>
                <th>商品</th>
                <th>價錢</th>
            </tr>
          </thead>
          <tbody id="j_tb">
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPhone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPad Pro</td>
                <td>5000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPad Air</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>Apple Watch</td>
                <td>2000</td>
            </tr>

          </tbody>
      </table>
      <input type="button" value="  反 選  " id="btn">
  </div>
  <script>
     var j_tb = document.getElementById('j_tb');
     var inputs = j_tb.getElementsByTagName('input');
     // 1 全選
     // 1.1 獲取父checkbox，註冊點擊事件
     var j_cbAll = document.getElementById('j_cbAll');
     j_cbAll.onclick = function () {
       // 1.2 找到全部子的checkbox，讓這些checkbox的狀態跟父checkbox保持一致
      
       for (var i = 0; i < inputs.length; i++) {
         var input = inputs[i];
         if (input.type === 'checkbox') {
          // 讓子的checkbox的選中狀態，和父checkbox的選中狀態一致
           input.checked = this.checked;
         }
       }
     }
     
     // 2 當點擊子的checkbox，若是全部的子的checkbox都被選中了，讓父的checkbox也選中
     // 若是有一個子的checkbox沒有被選中，父的checkbox也不被選中
     
     // 此處的循環，是遍歷全部子的checkbox，註冊點擊事件
     for (var i = 0; i < inputs.length; i++) {
       var input = inputs[i];
       // 判斷是不是checkbox
       if (input.type !== 'checkbox') {
        // 結束當前循環，繼續下一次循環
         continue;
       }
       // 給子的checkbox註冊點擊事件
       input.onclick = function () {
         checkAllCheckBox();
       }
     }
     

     // 判斷父的checkbox的狀態 封裝成函數
     function checkAllCheckBox() {
       // 假設全部的子的checkbox都被選中了
         var isAllChecked = true;
         // 判斷是否全部的子的checkbox都被選中了
         for (var i = 0; i < inputs.length; i++) {
           var input = inputs[i];
           if (input.type !== 'checkbox') {
             continue;
           }
           // 判斷當前的全部checkbox是否都被選中
           if (!input.checked) {
             isAllChecked = false;
           }
         }
         // 設置父的checkbox的狀態
         j_cbAll.checked = isAllChecked;
     }

     // 3 反選
     // 3.1 給反選按鈕註冊點擊事件
     var btn = document.getElementById('btn');
     btn.onclick = function () {
        // 3.2 找到全部的子的checkbox，讓其反選
        for (var i = 0; i < inputs.length; i++) {
          var input = inputs[i];
          // 判斷是不是checkbox
          if (input.type !== 'checkbox') {
            continue;
          }
          // 讓子的checkbox反選
          input.checked = !input.checked;
          // 設置父的checkbox的狀態
          checkAllCheckBox();
        }
     }
    
     
  </script>

By for now!