首頁 > web前端 > js教程 > jquery事件與綁定事件詳細說明

jquery事件與綁定事件詳細說明

小云云
發布: 2018-01-22 13:39:35
原創
2344 人瀏覽過

jquery事件與綁定事件都是很重要的知識,本文主要介紹了jquery事件與綁定事件的相關知識,具有很好的參考價值。下面跟著小編一起來看吧,希望能幫助大家。

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

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

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

這種方法的缺點是:

只能為一個事件處理函數,在事件處理函數方法中,取得事件物件的方式不同.

jQuery中的事件

ready事件:

當頁面載入完成後,來執行function:

<script>
 $(document).ready(function(e){
  alert(document.getElementById("aa").innerHTML);
  //若是要写function方法,不可以在里面写
 })
 //要在外面写
</script>
登入後複製

這樣寫在哪裡都可以呼叫到這個方法;

滑鼠事件:

<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("值发生变化,change事件");
})
$("#shao").keydown(function(){
 alert("键盘按下");
})
</script>
登入後複製

2.綁定事件(掛事件):

可以動態的改變按鈕的事件;

什麼是動態綁定?

動態綁定是指動態加入的DOM節點或html元素,他們在開始時運行的時候是不存在的。如果要給這些動態加入的節點增加事件,就必須要用jquery的on方法來綁定事件。

bind()為符合元素新增一個或多個事件處理器。

使用方式:

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

註:bind()函數只能針對已經存在的元素進行事件的設定

程式碼:先寫兩個按鈕:

<body>
  <p id="aa" style="width: 100px; height: 100px; background-color: blueviolet;">hello</p>
  <!--<input type="text" id="shao" />-->
<input type="button" id="btn1" value="挂事件" />
<input type="button" id="btn2" value="移除事件" />
 </body>
登入後複製

先操作點擊掛上事件:

<script>
//挂事件,
$("#btn1").click(function(){
 //点击挂事件,给p绑定一个事件:
 $("#aa").bind("click",function(){
 //bind绑定事件
  alert("点击");
 });
 //括号里两个参数,第一个是事件类型(事件名称),第二个参数是要执行的代码
})
</script>
登入後複製

這樣的話點擊掛事件:

##移除事件的按鈕:

<script>
//移除事件;
$("#aa").click(function(){
 //点击移除事件;把p里面的事件移除掉
 $("#aa").unbind("click");
 //unbind移除绑定,填一个参数,要移除哪个事件
})
</script>
登入後複製
點擊移除,取消aa得點擊事件

3.事件資料

一般的事件包含事件來源跟時間資料:

事件資料:出發這個時間,會傳過來那些資料

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

#4. JSON語法:

JSON的結構:

json簡單說就是javascript中的物件和陣列,所以這兩種結構就是物件和陣列兩種結構,透過這兩種結構可以表示各種複雜的結構。

(1)物件:物件在js中表示為「{}」括起來的內容,資料結構為{key:value,key:value,...}的鍵值對的結構,在在物件導向的語言中,key為物件的屬性,value為對應的屬性值,所以很容易理解,取值方法為物件.key 取得屬性值,這個屬性值的型別可以是數字、字串、陣列、對象幾種。

(2)陣列:陣列在js中是中括號「[]」括起來的內容,資料結構為["java","javascript","vb",...],取值方式和所有語言中一樣,使用索引獲取,字段值的類型可以是數字、字串、數組、物件幾種。

經過物件、陣列2種結構就可以組合成複雜的資料結構了。

json是一種輕量級的資料交換格式

全拼:

JavaScript Object Notation

定義語法:

var j = {
"one":"111111",
"two":"22222"
};
登入後複製
取值方式:

取索引:

//数组的取值方式:
alert(j["one"]);//直接取索引的方法
登入後複製
點語法:

//点语法:
alert(j.one);
登入後複製
JSON也可以寸二維陣列:

var j = {
"one":"111111",
"two":"22222",
"three":{"aa":"33333"},
};
//数组的取值方式:
//alert(j["one"]);//直接取索引的方法
//点语法:
alert(j.one);
alert(j.three.aa);
登入後複製
遍歷JSON資料:

//遍历
for(var v in j)
{
 //定义一个变量v,把j拿到v里面,关键字不是”as“了,是”in“,
 alert(v);
// 这样便利的是索引
 alert(j[v]);
// 这样是根据索引来取值
}
登入後複製
json不具有長度的屬性,所以for迴圈不適應於json

但是for-in同樣適應於陣列

相關推薦;

實例詳解jQuery事件物件的屬性

jQuery事件中mouseover與mouseenter的差異

jQuery中用on綁定事件時需要注意些什麼

以上是jquery事件與綁定事件詳細說明的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板