用jQuery來繫結事件的3種方法和區別

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>title
title
>
6head
>
7<
body
>
8<
ul>
9<
li>111
li>
10<
li>222
li>
11<
li>333
li>
12<
li>444
li>
13<
li>555
li>
14ul
>
15<
input 
value
="+"
type
="button"
>
16<
script 
src="jquery-3.2.1.js"
>
script
>
17<
script
>
18$(
"ul li
").bind(
"click",
function
() );
2122$("
ul").on(
"click",
"li",
function
() );
25$(
"input
").click(
function
() )
28script
>
29body
>
30html
>

這裡我們是做了乙個簡單的html,裡面有幾個li標籤. 然後給他們用3鐘不同的繫結方法 繫結了3個事件,讓我們來看看有什麼區別

點選+後會出現

回顧我們的3個方法,第3個函式是給input的標籤 加上乙個點選事件,當我們點選 + 號的時候,函式裡給ul標籤後面追加了新的li標籤 所以我們點選一次就能看到新的.666 的內容 (

這裡我們用的和js的繫結方法格式很像,注意js中我們使用的是onclick,這裡用的是click,jquery中為了區分和js的不同,繫結事件一律把on去掉了)

函式1和2同樣都是繫結方法,格式上有不同,意義上也有不同,bind方法是給標籤繫結事件的方法,他比在標籤裡加入onclick要動態一些,而且可以批量繫結.

on方法也是同樣可以批量繫結,那麼他們的區別就在於,input標籤點選後效果不同.

我們再來分析一下.input標籤裡點選後 是給**樹里多加了一行666標籤,但是我們之前用bind繫結的方法卻沒有辦法同時也批量繫結進去,這是因為程式的邏輯順序造成的.雖然bind表面上是繫結ul下的所有li.

這時候就可以用on方法繫結了.這個方法有乙個名字叫事件委託.能達到後來的標籤同樣有效果.注意的是 這裡的li要寫到on()內 不然和bind是乙個意思了

Jquery動態新增的元素繫結事件的3種方法

假設我們點選li標籤，彈出他的文字,如果是動態新增的li，點選是沒有效果的，壓根彈不出來文字。下面博主分享一下為動態新增的元素繫結事件的三種方法，網上一般都是兩種，我在這裡多增加了一種。事件案例 ul id ul1 li a href 世界上第三種電梯誕生了，居然是中國人發明的！a li li a ...

jQuery事件的繫結

在沒學習jquery之前需要html中使用on 的形式去繫結，這樣會讓 顯得很混亂 html只負責內容的描述 將要繫結的事件的元素選擇出來然後在js中實現繫結，就可以解決這一情況，可以使用jq實現這以操作，而且jq的事件繫結更靈活。jquery繫結單擊事件 方式1 function 方式2 func...

jQuery事件的繫結

jquery事件的繫結 在沒學習jquery之前需要html中使用on 的形式去繫結，這樣會讓 顯得很混亂 html只負責內容的描述 將要繫結的事件的元素選擇出來然後在js中實現繫結，就可以解決這一情況，可以使用jq實現這以操作，而且jq的事件繫結更靈活。jquery繫結單擊事件 方式1 funct...