HTML基礎第九課（事件和事件對象）

原創

2020-02-23 13:52

一、事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件名稱</title>
    <style type="text/css">
        .redDiv{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
   <div class="redDiv"> 
   </div> 
   <form action="" id="red">
       <input type="text" id="uName" />
       <input type="submit" id="submit"/>
       <input type="reset" id="reset"/>
   </form>
</body>

<script type="text/javascript">
    //阻止默認事件

    var redDiv =document.getElementsByClassName("redDiv")[0];
    var reg = document.getElementById("red");
    var uName = document.getElementById("uName");
    //鼠標事件

    redDiv.onmousemove = function(){
        console.log("鼠標在移動的時候觸發");
    }
    redDiv.onclick = function(){
        console.log("單擊事件");
    }
    redDiv.οndblclick= function(){
        console.log("雙擊事件");
    }
    redDiv.onmousedown = function(){
        console.log("鼠標按下事件")
    }
    redDiv.onmouseup = function(){
        console.log("鼠標擡起事件");
    }
    redDiv.oncontextmenu = function(){
     console.log("鼠標右擊事件");
  //阻止默認事件
        return false;
    }

    //over和out會在鼠標從redDiv的父級移到子級的時候觸發。先觸發over
    //leave和enter從父級移到子級不會觸發。只有鼠標離開/移入整個redDiv的時候纔會觸發
    redDiv.onmouseover = function(){
        console.log("over鼠標移入");
    }
    redDiv.onmouseout = function(){
        console.log("out鼠標移除");
    }
    redDiv.onmouseenter = function(){
        console.log("enter鼠標移入");
    }
    redDiv.onmouseleave = function(){
        console.log("leave鼠標移除");
    }

    //鍵盤事件
  document.onkeydown = function(){
      console.log("down鍵盤按下");
  }
  document.onkeypress = function(){
      console.log("press鍵盤按下");
  }
  document.onkeyup = function(){
      console.log("鍵盤擡起事件");
  }

  //表單事件
  uName.onchange = function(){
      console.log("內容發生改變之後觸發");
  }
  uName.oninput = function(){
      console.log("內容發生變化之後觸發");
  }
  uName.onfocus = function(){
      console.log("聚焦")
  }
  uName.onblur = function(){
      console.log("失焦");
  }
  //給form表單綁定事件
  reg.onsumbmit = function(){
      console.log("提交");
       //阻止默認事件（失去提交的功能）
      return false;
  }
  reg.onreset = function(){
      console.log("重置");
       //阻止默認事件(失去清空的功能)
      return false;
  }

  //window事件
  window.onresize = function(){
      console.log("窗口尺寸發生變化的時候觸發");
  }
  //元素
  window.onscroll = function(){
      console.log("窗口內容滾動的時候觸發");
  }
  //
  img.onload = function(){
      console.log("圖片加載完畢之後觸發");
  }
  window.onload = function(){
      console.log("窗口加載完畢之後觸發");
  }
    </script>
</html>

二、事件對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件對象</title>
    <style type="text/css">
        .redDiv{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        p{ 
            margin: 0px;
            height: 100px;
            margin-left: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="redDiv">
        <p></p>
    </div>
</body>
<script type="text/javascript">
    //鼠標事件-》鼠標的位置
    var redDiv = document.getElementsByClassName("redDiv")[0];
   redDiv.onclick = function(ev){
      var evObj = ev || window.event;
       //觸發事件的元素（觸發事件的元素不一定是綁定事件的元素）
       console.log(evObj.target);

       //鼠標距離窗口頂部的座標
       console.log(evObj.clientY);
       //鼠標距離頁面頂部的座標
       console.log(evObj.pageY);
       //鼠標距離target頂部的座標
       console.log(evObj.offsetX);
   }
   //press 區分大小寫，但是不支持特殊按鍵
   //down不區分大小寫，但是支持特殊按鍵
   document.onkeypress = function(ev){
       console.log("press"+ ev.keyCode);
   }
   document.onkeydown = function(ev){
       //keyCode標識哪一個按鍵
       console.log(ev.keyCode);
       if(ev.keyCode == 66){
           console.log("按了B");
       }
       //判斷組合鍵
       if(ev.keyCode == 66 && ev.metakey == 91){
           console.log("按了command + B");
       }
   }
    </script>
</html>

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

HTML基礎第九課（事件和事件對象）

一、事件

二、事件對象

Wampserver下載

HTML基礎第七課（js原生對象）

orcal數據庫

HTML基礎第五課（表格，表單，行塊對齊方式）

HTML基礎第四課（2D形變，定位）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結