jQuery事件操做

時間 2019-11-08

標籤 jquery 事件欄目 JQuery 简体版

原文原文鏈接

jQuery的事件操做

1.綁定事件

```
 bind(type,data,fn)
```

參數說明javascript

type(string) :事件類型java
data(Object):可選,做爲event.data屬性值傳遞給事件對象的額外數據對象jquery
fn(Function) : 綁定到每一個匹配元素的事件上面的處理函數app

示例:當每一個p標籤被點擊時,彈出其文本函數

 $("p").bind("click", function(){
  alert( $(this).text() );
 });

示例:事件處理以前傳遞一些附加的數據性能

 function handler(event) {
 //event.data 能夠獲取bind()方法的第二個參數的數據
  alert(event.data.foo);
 }
 $("p").bind("click", {foo: "bar"}, handler)

常見事件this

 click(function(){...})
 hover(function(){...})
 blur(function(){...})
 focus(function(){...})
 change(function(){...}) //內容發生變化，input，select等
 keyup(function(){...})  
 mouseover/mouseout
 mouseenter/mouseleave
 mouseover事件是若是該標籤有子標籤，那麼移動到該標籤或者移動到子標籤時會連續觸發，mouseenter事件無論有沒有子標籤都只觸發一次，表示鼠標進入這個對象

經過返回false來取消默認的行爲來阻止事件起泡spa
- ```
 $("form").bind("submit", function() { return false; })
```

經過event.preventDefault()方法來阻止事件起泡代理

 $("form").bind("submit", function(event){
  event.stopPropagation();
 });

2.解綁事件

```
 unbind(type,fn);
```
描述:bind()的反向操做,從每個匹配的元素中刪除綁定的事件,若是沒有參數,則刪除全部的綁定事件,若是把綁定時傳遞的處理函數做爲第二個參數,則只有這個特定的事件處理函數會被刪除orm

參數說明

 type (String) : (可選) 事件類型
 fn(Function) : (可選) 要從每一個匹配元素的事件中反綁定的事件處理函數

3.補充一次性事件

```
 one(type,data,fn)
```
描述:爲每個匹配的元素的特定事件,像(click)綁定一個一次性的事件處理函數,在每一個對象上,這個事件處理函數只會被執行一次,其餘規則與bind()函數相同

參數說明

 type (String) : 事件類型
 data (Object) : (可選) 做爲event.data屬性值傳遞給事件對象的額外數據對象
 fn (Function) : 綁定到每一個匹配元素的事件上面的處理函數

示例:當全部段落被第一次點擊的時候,顯示全部其文本

 $("p").one("click", function(){
 //只有第一次點擊的時候纔會觸發，再次點擊不會觸發了
  alert( $(this).text() );
 });

4.事件委託(事件代理)

原理:利用冒泡的原理,把事件加到父級上,觸發執行效果
做用:
- 性能要好
- 針對新創新的元素,直接能夠擁有事件
事件源:
- 跟this做用同樣(他不用看指向問題,誰操做的就是誰),event對象下的

使用情景

爲DOM中的不少元素綁定的相同事件
爲DOM中尚不存在的元素綁定事件

 <body>
         <ul>
             <li class="luffy">路飛</li>
             <li>路飛</li>
             <li>路飛</li>
             
         </ul>
 </body>
 <script src="jquery-3.2.1.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
     
     //經過on()方法
      $('ul').on('click','#namei,.luffy',function(){
         console.log(this);
        })
             
    //將來追加的元素 
     $('ul').append('<a id="namei">娜美</a>')
 
 }
 </script>

語法:在選定的元素上綁定一個或者多個事件處理函數
- ```
 on(type,selector,data,fn);
```
- 參數說明
  - events(String) : 一個或多個空格分隔的事件類型
  - selector(String) : 一個選擇器字符串,用於過濾出被選中的元素中能觸發事件的後代元素
  - data:當一個事件被觸發時,要傳遞給事件處理函數的event.data.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。