jquery事件與綁定事件

發(fā)布時間：2020-09-05 13:27:38 來源：腳本之家閱讀：138 作者：我之姓冠你之名欄目：web開發(fā)

1.首先,我們來看一下經(jīng)常使用的添加事件的方式:

<input type="button" id="btn" value="click me!" onclick="shao();" />
<script type="text/javascript">
 function shao() {
  alert("msg is showing!");
 }
</script>

我們最常用的是為元素添加onclick元素屬性的方式來添加事件

這種方法的弊端是：

只能為一個事件處理函數(shù)，在事件處理函數(shù)方法中，獲取事件對象的方式不同.

jQuery中的事件

ready事件：

當頁面加載完成后，來執(zhí)行function：

<script>
 $(document).ready(function(e){
  alert(document.getElementById("aa").innerHTML);
  //若是要寫function方法，不可以在里面寫
 })
 //要在外面寫
</script>

這樣寫在哪里都可以調(diào)用到這個方法；

鼠標事件：

<script>
$("#aa").click(function(){
 alert("點擊事件");
})
$("#aa").dblclick(function(){
 alert("雙擊事件");
})
$("#aa").mouseover(function(){
 alert("鼠標移上")
});
$("#aa").mouseout(function(){
 alert("鼠標離開");
})
$("#aa").mousemove(function(){
 alert("鼠標移動");
})
$("#aa").mouseup(function(){
 alert("鼠標抬起");
})
$("#aa").mousedown(function(){
 alert("鼠標按下");
})
鍵盤按鍵按下:給id加沒有作用,需要給整個頁面加所以用$(document)
$(document).KeyEvent(function(){
 alert("鼠標離開");
})
</script>

表單元素事件：

<script>
$("#shao").focus(function(){
 alert("獲得焦點");
})
$("#shao").blur(function(){
 alert("失去焦點");
})
$("#shao").change(function(){
 alert("值發(fā)生變化，change事件");
})
$("#shao").keydown(function(){
 alert("鍵盤按下");
})
</script>

2.綁定事件（掛事件）：

可以動態(tài)的改變按鈕的事件；

什么是動態(tài)綁定？

動態(tài)綁定是指動態(tài)添加的DOM節(jié)點或者html元素，他們最開始時運行的時候是不存在的。如果要給這些動態(tài)加入的節(jié)點增加事件，就必須要用jquery的on方法來綁定事件。

bind()向匹配元素添加一個或多個事件處理器。

使用方式：

$(selector).bind(event,data,function)

注：bind()函數(shù)只能針對已經(jīng)存在的元素進行事件的設(shè)置

代碼：首先寫兩個按鈕：

<body>
  <div id="aa" >hello</div>
  <!--<input type="text" id="shao" />-->
<input type="button" id="btn1" value="掛事件" />
<input type="button" id="btn2" value="移除事件" />
 </body>

首先操作點擊掛上事件：

<script>
//掛事件，
$("#btn1").click(function(){
 //點擊掛事件，給div綁定一個事件：
 $("#aa").bind("click",function(){
 //bind綁定事件
  alert("點擊");
 });
 //括號里兩個參數(shù)，第一個是事件類型（事件名稱），第二個參數(shù)是要執(zhí)行的代碼
})
</script>

這樣的話點擊掛事件：

jquery事件與綁定事件

移除事件的按鈕：

<script>
//移除事件；
$("#aa").click(function(){
 //點擊移除事件；把div里面的事件移除掉
 $("#aa").unbind("click");
 //unbind移除綁定，填一個參數(shù)，要移除哪個事件
})
</script>

點擊移除，取消aa得點擊事件

3.事件數(shù)據(jù)

一般的事件包含事件源跟時間數(shù)據(jù)：

事件數(shù)據(jù)：出發(fā)這個時間，會傳過來那些數(shù)據(jù)

js簡化，可以不寫事件源，因為可以取到

4.JSON語法：

JSON的結(jié)構(gòu)：

json簡單說就是javascript中的對象和數(shù)組，所以這兩種結(jié)構(gòu)就是對象和數(shù)組兩種結(jié)構(gòu)，通過這兩種結(jié)構(gòu)可以表示各種復(fù)雜的結(jié)構(gòu)。

（1）對象：對象在js中表示為“{}”括起來的內(nèi)容，數(shù)據(jù)結(jié)構(gòu)為 {key：value,key：value,...}的鍵值對的結(jié)構(gòu)，在面向?qū)ο蟮恼Z言中，key為對象的屬性，value為對應(yīng)的屬性值，所以很容易理解，取值方法為對象.key 獲取屬性值，這個屬性值的類型可以是數(shù)字、字符串、數(shù)組、對象幾種。

（2）數(shù)組：數(shù)組在js中是中括號“[]”括起來的內(nèi)容，數(shù)據(jù)結(jié)構(gòu)為 ["java","javascript","vb",...]，取值方式和所有語言中一樣，使用索引獲取，字段值的類型可以是數(shù)字、字符串、數(shù)組、對象幾種。

經(jīng)過對象、數(shù)組2種結(jié)構(gòu)就可以組合成復(fù)雜的數(shù)據(jù)結(jié)構(gòu)了。

json是一種輕量級的數(shù)據(jù)交換格式

全拼：

JavaScript Object Notation

定義語法：

var j = {
"one":"111111",
"two":"22222"
};

取值方式：

取索引：

//數(shù)組的取值方式：
alert(j["one"]);//直接取索引的方法

點語法：

//點語法：
alert(j.one);

JSON也可以寸二維數(shù)組：

var j = {
"one":"111111",
"two":"22222",
"three":{"aa":"33333"},
};
//數(shù)組的取值方式：
//alert(j["one"]);//直接取索引的方法
//點語法：
alert(j.one);
alert(j.three.aa);

遍歷JSON數(shù)據(jù)：

//遍歷
for(var v in j)
{
 //定義一個變量v，把j拿到v里面，關(guān)鍵字不是”as“了，是”in“，
 alert(v);
// 這樣便利的是索引
 alert(j[v]);
// 這樣是根據(jù)索引來取值
}

json不具有長度的屬性，所以for循環(huán)不適應(yīng)于json

但是for-in同樣適應(yīng)于數(shù)組

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！

向AI問一下細節(jié)

jquery事件與綁定事件

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽