jquery有哪些基礎事件方法-前端問答-PHP中文網

說明：

#事件物件的屬性與方法

首頁

web前端

前端問答

jquery有哪些基礎事件方法

青灯夜游

May 25, 2022 pm 04:53 PM

jquery

基礎事件方法：1、click()，設定滑鼠點選事件；2、dblclick()，設定滑鼠雙擊事件；3、change()，設定內容改變事件；4、focus()，設定觸發焦點事件；5、blur()，設定失去焦點事件；6、mousedown()等。

jquery有哪些基礎事件方法

本教學操作環境：windows7系統、jquery1.10.2版本、Dell G3電腦。

事件方法觸發器或新增一個函數到被選元素的事件處理程序。

下面的表格列出了一些用於處理事件的 jQuery 方法。

click()dblclick()die()在版本1.9 中移除。 focus()focusin()#focusout()##將事件處理程序新增至focusout 事件hover()新增兩個事件處理程序到hover 事件新增/觸發keydown 事件新增/觸發keypress 事件 #新增/觸發keyup 事件#在版本1.9 中移除。 #新增/觸發mousedown 事件新增/觸發mouseenter 事件新增/觸發mouseleave 事件新增/觸發mousemove 事件新增/觸發mouseout 事件新增/觸發mouseover 事件新增/觸發mouseup事件移除透過on() 方法新增的事件處理程序為元素新增事件處理程序#新增一個或多個事件處理程序至被選元素。此處理程序只能被每個元素觸發一次規定當DOM 完全載入時要執行的函數在版本1.9 中移除。觸發綁定到被選元素的所有事件觸發綁定到被選元素的指定事件上的所有函數從被選元素上移除新增的事件處理程序從現在或未來的被選元素移除事件處理程式

方法

描述

#bind()

向元素新增事件處理程序

blur()

新增/觸發失去焦點事件

觸發change 事件

新增/觸發click 事件

#新增/觸發double click 事件

移除所有透過live() 方法新增的事件處理程序

新增/觸發focus 事件

加入事件處理程序到focusin 事件

##keydown()

keypress()

keyup()

live()

新增一個或多個事件處理程序到目前或未來的被選元素

mousedown()

mouseenter()

mouseleave()

mousemove()

mouseout()

mouseover()

mouseup()

off()

on()

one()

ready()

toggle()

新增click 事件之間要切換的兩個或多個函數

trigger()

triggerHandler()

unbind()

undelegate()

說明：

1、以上事件函數有三種用法：

//直接绑定事件到元素上
$(&#39;.target1&#39;).keydown(function(e) {
    $("em:first").text(e.target.value)    //通过对象e获取输入的值
});
 
//传递参数调用函数处理
$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 通过e传递参数数据
});
 
//手动触发已绑定的点击事件
$elem.click()

登入後複製

2、mouseover與mouseenter區別：不論滑鼠指標穿過被選元素或其子元素，都會觸發mouseover 事件，稱作支援冒泡處理，冒泡處理指子元素與父元素共同定義的事件，在觸發子元素時，或沒有定義子元素，事件就會向父級傳播，引發父級事件觸發。只有在滑鼠指標穿過被選元素時，才會觸發 mouseenter 事件。

3、form元素是有預設提交表單的行為，如果透過submit處理的話，需要禁止瀏覽器的這個預設行為。傳統的方式是呼叫事件物件 e.preventDefault() 來處理， jQuery中可以直接在函數中最後結尾return false即可。

    //回车键或者点击提交表单后禁止浏览器默认跳转：
    $(&#39;#target2&#39;).submit(function() {
        alert(&#39;捕获提交表达动作,阻止页面跳转&#39;)
        return false;
    });

登入後複製

4、on()使用

基本用法：.on( events ,[ selector ] ,[ data ] )

最常見的給元素綁定一個點擊事件，比較一下捷徑與on方式的不同

$("#elem").click(function(){})  //快捷方式
$("#elem").on(&#39;click&#39;,function(){}) //on方式

//多个事件绑定同一个函数，通过空格分离，传递不同的事件名，可以同时绑定多个事件
$("#elem").on("mouseover mouseout",function(){ });

//多个事件绑定不同函数
$("#elem").on({
    mouseover:function(){}, 
    mouseout:function(){}
});

//将数据传递到处理程序
$( "button" ).on( "click", {    //第二个参数传递数据给函数调用
  name: "Mr.Tory"
}, greet );
function greet( event ) {
  alert( "Hello " + event.data.name ); //输出Hello Mr.Tory
}

登入後複製

#事件物件的屬性與方法

##.stopPropagation()取消事件冒泡

$("#content").click(function(event) {
   $("#msg").html("<p>外层div元素被单击</p>");
   event.stopPropagation();                         //通过event方法阻止事件冒泡  
});

登入後複製

【推薦學習：

#.type	事件類型.如果使用一個事件處理函數來處理多個事件, 可以使用此屬性獲得事件類型,例如click
.data	事件呼叫時傳入額外參數
.target	觸發該事件的DOM 元素
#.which	指示了哪一個鍵或按鈕
.timeStamp	#該屬性傳回從1970 年1 月1 日到事件發生時的毫秒數
.pageX/Y	#相對於文件左/上邊緣的滑鼠位置
.result	上一個相同事件處理器函數傳回的值
.preventDefalut()	阻止事件的預設動作

jQuery影片教學

、web前端影片】

以上是jquery有哪些基礎事件方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1317

PHP教程

1268

C# 教程

1246

Related knowledge

jQuery引用方法詳解：快速上手指南 Feb 27, 2024 pm 06:45 PM

jQuery引用方法詳解：快速上手指南jQuery是一個受歡迎的JavaScript庫，被廣泛用於網站開發中，它簡化了JavaScript編程，並為開發者提供了豐富的功能和特性。本文將詳細介紹jQuery的引用方法，並提供具體的程式碼範例，幫助讀者快速上手。引入jQuery首先，我們需要在HTML檔案中引入jQuery函式庫。可以透過CDN連結的方式引入，也可以下載

jQuery中如何使用PUT請求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u

深度剖析：jQuery的優勢與劣勢 Feb 27, 2024 pm 05:18 PM

jQuery是一款廣泛應用於前端開發的快速、小巧、功能豐富的JavaScript庫。自2006年發布以來，jQuery已成為眾多開發者的首選工具之一，但在實際應用中，它也不乏一些優點和缺點。本文將深度剖析jQuery的優勢與劣勢，並結合具體的程式碼範例進行說明。優點：1.簡潔的語法jQuery的語法設計簡潔明了，可以大幅提升程式碼的可讀性和編寫效率。比如，

jQuery小技巧：快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：&lt

使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：

jQuery如何移除元素的height屬性？ Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height屬性？在前端開發中，經常會遇到需要操作元素的高度屬性的需求。有時候，我們可能需要動態改變元素的高度，而有時候又需要移除元素的高度屬性。本文將介紹如何使用jQuery來移除元素的高度屬性，並提供具體的程式碼範例。在使用jQuery操作高度屬性之前，我們首先需要了解CSS中的height屬性。 height屬性用於設定元素的高度

了解jQuery中eq的作用及應用場景 Feb 28, 2024 pm 01:15 PM

jQuery是一種流行的JavaScript庫，被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中，eq()方法是用來選擇指定索引位置的元素的方法，具體使用方法和應用場景如下。在jQuery中，eq()方法選擇指定索引位置的元素。索引位置從0開始計數，即第一個元素的索引是0，第二個元素的索引是1，依此類推。 eq()方法的語法如下：$("s

如何判斷jQuery元素是否具有特定屬性？ Feb 29, 2024 am 09:03 AM

如何判斷jQuery元素是否具有特定屬性？在使用jQuery操作DOM元素時，常會遇到需要判斷元素是否具有某個特定屬性的情況。在這種情況下，我們可以藉助jQuery提供的方法來輕鬆實現這項功能。以下將介紹兩種常用的方法來判斷一個jQuery元素是否具有特定屬性，並附上具體的程式碼範例。方法一：使用attr()方法和typeof運算子//判斷元素是否具有特定屬

See all articles

jquery有哪些基礎事件方法

說明：

#事件物件的屬性與方法

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題