JS-DOM事件

時間 2020-01-01

原文原文鏈接

JS DOM設置元素屬性html

設置id爲box的這個元素的文字顏色,屬性是減號鏈接的複合形式時瀏覽器

必須要轉換爲駝峯形式函數

       var box=document.getElementById("box");
       box.style.color='#f00';
       box.style.fontWeight="bold";
       var lis=document.getElementById("list").getElementsByTagName("li");
       // 遍歷每個li
       for(var i=0,len=lis.length;i<len;i++){
          lis[i].style.color='#00f';
          if(i==0){
             lis[i].style.backgroundColor="#ccc";
          }else if(i==1){
             lis[i].style.backgroundColor="#666";
          }else if(i==2){
             lis[i].style.backgroundColor="#999";
          }else{
               lis[i].style.backgroundColor="#333";
          }
       }

innerHTML獲取和設置標籤之間的文本和html內容this

className從新設置類，會替換掉原來的類spa

若是元素有多個class屬性值，那麼會所有獲取到code

       var lis=document.getElementById("list").getElementsByTagName("li");
       for(var i=0,len=lis.length;i<len;i++){
           console.log(lis[i].innerHTML);
           lis[i].innerHTML+='程序';
           lis[1].className="current";
       }
       console.log(document.getElementById("box").className);

屬性設置與獲取orm

        var p=document.getElementById("text");
        var user=document.getElementById("user");  // null
        console.log(p.getAttribute("class"));  //p.className
        console.log(user.getAttribute("validate"));
        // 給p設置一個data-color的屬性
        p.setAttribute("data-color","red");
        // 給input設置一個isRead的屬性
        user.setAttribute("isRead","false");
        // 刪除p上的align屬性
        p.removeAttribute("align");

JS事件：htm

鼠標事件blog

onload 頁面加載seo

onclick 鼠標點擊

onmouseover 鼠標劃入

onmouseout 鼠標離開

onmousemove 鼠標在目標內移動

onfocus 得到焦點

onblur 失去焦點

onchange 內容改變時

在事件觸發函數中，this是指對該DOM元素的引用

    <input type="button" value="彈 出" onclick="alert('我是按鈕')">
    <!--鼠標劃過按鈕時調用mouseoverFn的函數-->
    <div class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#ff0')">開始</div>
    <div class="btn" onmouseover="mouseoverFn(this,'#0f0')" onmouseout="mouseoutFn(this,'#333')">結束</div>
    <script>
        function mouseoverFn(btn,bgColor){
            // 鼠標劃過按鈕時，按鈕的背景變爲紅色
            btn.style.background=bgColor;
        }
        function mouseoutFn(btn,bgColor){
            btn.style.background=bgColor;
        }

DOM 0級

經過DOM獲取元素

元素.事件=腳本

執行腳本能夠是一個匿名函數，也能夠直接調用函數，若是調用函數，語法是：ele.事件=函數名，不加括號

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
       .lock{width:140px;height:30px;line-height: 30px;background:#00f;
           color:#fff;font-size:14px;text-align:center;border-radius:5px;
           cursor:pointer;margin-top:30px;}
           .unlock{width:140px;height:30px;line-height: 30px;background:#666;
               color:#ccc;font-size:14px;text-align:center;border-radius:5px;
               cursor:pointer;margin-top:30px;}
    </style>
</head>
<body>
    <div class="lock" id="btn">鎖定</div>
    <script>
        // 獲取按鈕
        var btn=document.getElementById("btn");
        function clickBtn(){
           alert("我是按鈕");
        }
        // 點擊按鈕調用clickBtn這個函數
        btn.onclick=clickBtn;
        // 給按鈕綁定事件,this是對該DOM元素的引用
        btn.onclick=function(){
           // 判斷若是按鈕是鎖定，則顯示爲解鎖，變爲灰色，不然顯示爲鎖定，變爲藍色
           if(this.className=="lock"){
               this.className="unlock";
               this.innerHTML="解鎖";
           }else{
               this.className="lock";
               this.innerHTML="鎖定";
           }
        }
    </script>
</body>
</html>

window.onload會在網頁中的全部元素（文本、圖像、CSS樣式等）加載完後才觸發執行

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    // 頁面加載時執行，unload頁面卸載
       // 若是不加window.onload，那麼執行腳本時會找不到div元素
       window.onload=function(){
            // 獲取box
            var box=document.getElementById("box");
            var clicked=function(){
                  alert('我被點擊了');
            }
            box.onclick=clicked;
       }
    </script>
</head>
<body>
    <div id="box">這是一個DIV</div>
</body>
</html>

change事件,通常做用域select或checkbox或radio

menu.selectedIndex 獲取select中被選中的元素的下標

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
       // 頁面加載
       window.onload=init;

       // 初始化
       function init(){
          // 獲取下拉菜單
          var menu=document.getElementById("menu");
          // 給菜單綁定change事件,通常做用域select或checkbox或radio
          menu.onchange=function(){
             // 獲取當前選中的值
             //var bgcolor=this.value;
             var bgcolor=menu.options[menu.selectedIndex].value;
             // 若是bgcolor爲空，則下面的腳本將不執行
             // if(bgcolor=="")return;
             // 設置body的背景色
             // 若是bgcolor爲空，則將背景色設爲白色，不然是選擇的顏色
             if(bgcolor==""){
                document.body.style.background="#fff";
             }else{
                 document.body.style.background=bgcolor;
             }
          }
       }
    </script>
</head>
<body>
    <div class="box">
        請選擇您喜歡的背景色：
        <select name="" id="menu">
            <option value="">請選擇</option>
            <option value="#f00">紅色</option>
            <option value="#0f0">綠色</option>
            <option value="#00f">藍色</option>
            <option value="#ff0">黃色</option>
            <option value="#ccc">灰色</option>
        </select>
    </div>
</body>
</html>

鼠標事件：

onsubmit 表單提交

onmousedown 鼠標按下

onmousemove 鼠標移動

onmouseup 鼠標鬆開

onresize 瀏覽器窗口大小調整

onscroll 拖動滾動條

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       body{height:2000px;}
       .box{width:200px;height:200px;background:#f00;overflow:auto;}
    </style>
</head>
<body>
    <div class="box" id="box">
        <p>拖動</p>
        <p>拖動</p>
        <p>拖動</p>
        <p>拖動</p>
        <p>拖動</p>
        <p>拖動</p>
        <p>拖動</p>
        <p>拖動</p>
        <p>拖動</p>
        <p>拖動</p>
    </div>
    <script>
       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("我被拖動了");
       }
       box.onscroll=function(){
             console.log("我是DIV的滾動條");
       }
    </script>
</body>
</html>

鍵盤事件：

onkeydown 按下鍵盤

onkeypress按下鍵盤（只有字母和數字符號）

onkeyup 鬆開鍵盤

keyCode 返回鍵碼或者字符代碼

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .text span{font-weight:bold;color:#f00;}
       em{font-style:normal;}
       b{font-weight:normal;}
    </style>
</head>
<body>
    <div>
        <p class="text">
            <b id="showcount">您還能夠輸入</b>
            <span id="totalbox"><em id="count">30</em>/30</span>
        </p>
        <div class="input">
            <textarea name="" id="text" cols="70" rows="4"></textarea>
        </div>
    </div>
    <script>
       // 獲取文本框及其餘元素
       var text=document.getElementById("text");
       var total=30;
       var count=document.getElementById("count");
       var showcount=document.getElementById("showcount");
       var totalbox=document.getElementById("totalbox");
       // 綁定鍵盤事件
       document.onkeyup=function(){
             // 獲取文本框值的長度
             var len=text.value.length;
             // 計算可輸入的剩餘字符
             var allow=total-len;
             var overflow=len-total;
             // 若是allow小於0
             if(allow<0){
              showcount.innerHTML="您已超出"+overflow;
              totalbox.innerHTML='';
             }else{
                   showcount.innerHTML='您還能夠輸入';
                   totalbox.innerHTML='<em id="count">'+allow+'</em>/30';
             }
       }
    </script>
</body>
</html>