Day03jQuery事件繫結

2021-08-04 17:04:31 字數 1915 閱讀 4968

事件繫結

基於html實現的事件繫結
存在耦合

//html:

"button" value="按鈕" id="btn" onclick="test()"/>

//script:

function

test

()

2.基於程式設計的方式給標籤新增事件

注意:頁面從上到下載入,將寫function方法的那個script標籤放於body標籤裡下面,防止未載入就出來

1)js:

//html:

"button" value="按鈕" id="btn"/>

//script:

var btn = document.getelementbyid('btn');

btn.onclick = test;//對監聽屬性賦值乙個function

function

test

()

2)jq:

function

test

() $('#btn').click(test);//對id為btn的按鈕繫結單擊事件

//或者

$('#btn').click(function

() );//對id為btn的按鈕繫結單擊事件

3.在文件載入完畢之後執行**

若寫function的script標籤放在上面,則寫上window.onload

js:

window.onload = function

()//eg:

window.onload = function

() function

test

() ;

jq:

jq完整版:

$(document).ready(function

()//eg:

$(document).ready(function

() );

})

jq簡化版:

$(function

())eg:

$(function

() );

})

4)其他單擊事件

①toggle();//繫結單擊事件,可以繫結多個function,每次觸發乙個函式,且函式依次迴圈出現

toggle(test1,test2,test3……);

function

test1

() function

test2

() function

test3

() $(function

())

②hover(fn1,fn2);//繫結兩個function 相當於mouseover+mouseout(滑鼠移入移出)

當滑鼠移入時執行fn1,滑鼠移出時執行fn2

③submit();//提交form

form物件(jq).submit();將該表單提交

jquery 事件繫結

1.bind bind 方法為被選元素新增乙個或多個事件處理程式,並規定事件發生時執行的函式。多個事件用空格分開 可以繫結的事件有click dblclick mouseover mouseout mousedown mouseup等滑鼠事件,至於鍵盤事件,嘗試沒發現效果。selector bind...

jquery繫結事件

1.bind 向匹配元素新增乙個或多個事件處理器。使用方式 selector bind event,data,function event 必需項 新增到元素的乙個或多個事件,例如 click,dblclick等 單事件處理 例如 selector bind click data,function ...

jQuery事件繫結

區別 bind 是直接繫結在元素上 live 則是通過冒泡的方式來繫結到元素上的。更適合列表型別的,繫結到document dom節點上。和.bind 的優勢是支援動態資料。delegate 則是更精確的小範圍使用事件 效能優於.live on 則是最新的1.9版本整合了之前的三種方式的新事件繫結機...