【Day 16】jQuery事件

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 鼠标事件
待明天续....

<<: Day-16 动画效果 (二)

>>: 帐号申请

【Day 16】jQuery事件

jQuery事件

何谓事件(Events)?

Multicasting for RxJava

第8天~

[DAY2]建立容器(一)

Day 11 已故用户的隐私设计

从零开始的8-bit迷宫探险【Level 25】今天又是崭新的一天，回到原点

Day 06 - FOREIGN KEY 实际把键连起来!

Eloquent ORM - 写入资料

如何在Mac机上荧幕录影同时录制到声音--〖2022亲测〗

[Day 04] 用 Exposed 和资料库进行串接

[DAY 15]cog架构用法(2/2)