jQuery 事件LOGIN

jQuery 事件

什麼是事件?

頁面對不同訪客的回應叫做事件。

事件處理程序指的是當 HTML 中發生某些事件時所呼叫的方法。

實例:

  • 在元素上移動滑鼠。

  • 選取單選按鈕

  • 點擊元素

在事件中經常使用術語"觸發"(或"激發")例如: "當您按下按鍵時觸發keypress 事件"。

常見DOM 事件:

事件#說明
click滑鼠點擊時觸發此事件
keypress鍵盤上的鍵被按下再次釋放時觸發
submit表單被提交時觸發
load#頁面載入完觸發
dblclick滑鼠雙擊是觸發
keydown鍵盤上的鍵被按下時觸發
change當前元素失去焦點並且元素內容改變時觸發
resize瀏覽器視窗大小被改變時觸發
#mouseenter新增/觸發mouseenter 事件
#keyup鍵盤上的鍵被按下後放開時觸發
focus當某個元素失去焦點時觸發
#scroll新增/觸發scroll 事件
mouseleave新增/觸發mouseleave 事件
blur新增/觸發blur 事件
#

jQuery 事件方法語法

在 jQuery 中,大多數 DOM 事件都有一個等效的 jQuery 方法。

頁面中指定一個點擊事件:

$("p").click();

下一步是定義什麼時間觸發事件。您可以透過一個事件函數實作:

$("p").click(function(){
  // 動作觸發後執行的程式碼!!
});


常用的jQuery 事件方法

$(document).ready()

$(document).ready() 方法允許我們在文件完全載入完後執行函數。該事件方法在 jQuery 語法 章節中已經提到。

click()

click() 方法是當按鈕點擊事件被觸發時會呼叫函數。

函數在使用者點擊 HTML 元素時執行。

在下面的實例中,當點擊事件在某個<p> 元素上觸發時,隱藏當前的<p> 元素:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
   
});
</script>
</head>
<body>
<p>如果你点我,我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>
</body>
</html>

執行程式嘗試一下


dblclick()

當雙擊元素時,會發生dblclick 事件。

dblclick() 方法觸發dblclick 事件,或規定發生dblclick 事件時執行的函數:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>双击鼠标左键的,我就消失。</p>
<p>双击我消失!</p>
<p>双击我也消失!</p>
</body>
</html>

執行程式嘗試



# #mouseenter()


當滑鼠指標穿過元素時,會發生mouseenter 事件。

mouseenter() 方法觸發mouseenter 事件,或規定發生mouseenter 事件時執行的函數:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert("您的鼠标移到了 id=p1 的元素上!");
  });
});
</script>
</head>
<body>
<p id="p1">鼠标指针进入此处,会看到弹窗。</p>
</body>
</html>
執行程式嘗試

################################ #mousedown()############當滑鼠指標移到元素上方,並按下滑鼠按鍵時,會發生mousedown 事件。 ######mousedown() 方法觸發mousedown 事件,或規定發生mousedown 事件時執行的函數:###
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mousedown(function(){
    alert("鼠标在该段落上按下!");
  });
});
</script>
</head>
<body>
<p id="p1">这是一个段落</p>
</body>
</html>
###執行程式嘗試######################################################################### #hover()############hover()方法用於模擬遊標懸停事件。 ######當滑鼠移到元素上時,會觸發指定的第一個函數(mouseenter);當滑鼠移出這個元素時,會觸發指定的第二個函數(mouseleave)。 ###
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").hover(function(){
    alert("你进入了 p1!");
    },
    function(){
    alert("拜拜! 现在你离开了 p1!");
  }); 
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>
###執行程式嘗試一下###

focus()

當元素獲得焦點時,發生 focus 事件。

當透過滑鼠點擊選取元素或透過 tab 鍵定位到元素時,該元素就會獲得焦點。

focus() 方法觸發focus 事件,或規定當發生focus 事件時運行的函數:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("input").focus(function(){
                $(this).css("background-color","#cccccc");
            });
            $("input").blur(function(){
                $(this).css("background-color","#ffffff");
            });
        });
    </script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>

執行程式嘗試


有興趣試試其他的事件



#下一節
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#p1").mouseenter(function(){ alert("您的鼠标移到了 id=p1 的元素上!"); }); }); </script> </head> <body> <p id="p1">鼠标指针进入此处,会看到弹窗。</p> </body> </html>
章節課件