【Day 16】jQuery事件

13th鐵人賽

bonnieli1414

2021-09-16 20:34:46

2112 瀏覽

分享至

jQuery事件

說明:是為響應 HTML 頁面中的事件而訂制的。

何謂事件(Events)?

網頁可以響應的所有不同訪問者的操作都稱為事件(Events)。

jQuery網頁上方點選API Documentation

開啟後，於網頁左方，本篇是針對Events裡面列舉

官網提供事件(Events)如下:
1.Browser Events 瀏覽器事件
scroll() 當使用者滾動指定的元素時，會發生滾輪事件。

參考如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <script src="js/jquery-3.6.0.min.js"></script>
   <script>
       x=0;
       $(document).ready(function () {
           $("div").scroll(function() {
               $("span").text(x+=1);
            });
       });          
   </script>
   <p>請滾動</p>
   <div style="width:600px;height:100px;overflow:scroll;">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi facere nisi blanditiis enim inventore nam repellendus aspernatur eligendi repellat sint quae, rerum magni veniam temporibus cupiditate, reprehenderit, voluptatibus hic 
       <br/><br/>
       Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia totam repellendus quae nobis! Pariatur voluptatibus omnis eligendi suscipit architecto possimus, iste, nesciunt esse fugiat quae animi cum veniam, atque praesentium.
       <br><br>
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia vero, tempore eius praesentium inventore aperiam eum dolorum nulla ratione vitae ducimus maxime aliquam quidem repellendus sequi rerum qui ab quaerat?
       <br><br><br>
   </div>
   <p>滾動了<span>0</span>次</p> 

</body>
</html>

2.Document Loading 文件裝載
ready() 指定在 DOM 完全加載時要執行的函數

如jQuery的開始寫法，參考如下:

$(document).ready(function () {
//要執行的程式碼
});

3.Event Handler Attachment 事件處理程序附件
trigger() 觸發指定事件和事件的預設行為（如表單提交）。
triggerHandler() 觸發選定元素的指定事件，但不會觸發事件的預設行為。

參考如下:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>triggerHandler demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="old">.trigger( "focus" )</button>
<button id="new">.triggerHandler( "focus" )</button><br><br>
 
<input type="text" value="To Be Focused">
 
<script>
$( "#old" ).click(function() {
  $( "input" ).trigger( "focus" );
});
$( "#new" ).click(function() {
  $( "input" ).triggerHandler( "focus" );
});
$( "input" ).focus(function() {
  $( "<span>Focused!</span>" ).appendTo( "body" ).fadeOut( 1000 );
});
</script>
 
</body>
</html>

4.Event Object 事件對象
event.pageX() 滑鼠指向的X座標位置，其X座標是從文件的左邊緣開始計算
event.pageY() 滑鼠指向的Y座標位置，其Y座標是從文件的上邊緣開始計算

參考如下:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.pageY demo</title>
  <style>
  body {
    background-color: #eef;
  }
  div {
    padding: 20px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="log"></div>
 
<script>
$( document ).on( "mousemove", function( event ) {
  $( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});
</script>
 
</body>
</html>

5.Form Events 表單事件
submit() 發生於提交表單的事件，只適用於表單元素。

參考如下:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>submit demo</title>
  <style>
  p {
    margin: 0;
    color: blue;
  }
  div,p {
    margin-left: 10px;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Type 'correct' to validate.</p>
<form action="javascript:alert( 'success!' );">
  <div>
    <input type="text">
    <input type="submit">
  </div>
</form>
<span></span>
 
<script>
$( "form" ).submit(function( event ) {
  if ( $( "input" ).first().val() === "correct" ) {
    $( "span" ).text( "Validated..." ).show();
    return;
  }
 
  $( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
  event.preventDefault();
});
</script>
 
</body>
</html>

6.Keyboard Events 鍵盤事件
keyup() 完整的key press 過程分為兩個部分：1. 按鍵被按下；2. 按鍵被鬆開。
當按鍵被鬆開時，發生keyup 事件。
keydown() 完整的key press 過程分為兩個部分：1. 按鍵被按下；2. 按鍵被鬆開。
當按鍵被按下時，發生keydown 事件。
keypress() 與keydown()類似，指當按鍵按下去發生的事件。
與keydown()不同在於，每輸入一個字元，就會發生keypress()。

參考如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <script src="js/jquery-3.6.0.min.js"></script>
   <script type="text/javascript">
    $(document).ready(function(){
      $("input").keydown(function(){
        $("input").css("background-color","#FFFFCC");
      });
      $("input").keyup(function(){
        $("input").css("background-color","#D6D6FF");
      });
      $("#btn1").click(function(){
        $("input").keydown();
      });  
      $("#btn2").click(function(){
        $("input").keyup();
      });  
    });
    </script>
    Enter your name: <input type="text" />
    <p>當發生 keydown 和 keyup 事件時，輸入區域會改變顏色。請試著在其中輸入內容。</p>
    <p><button id="btn1">觸發輸入區域的 keydown 事件</button></p>
    <p><button id="btn2">觸發輸入區域的 keyup 事件</button></p>
</body>
</html>

7.Mouse Events 鼠標事件
待明天續....