JQuery event.namespace用法及代碼示例

jQuery中的event.namespace屬性用於在觸發事件時返回自定義名稱空間。它用於根據所使用的命名空間來不同地處理任務。

用法:

event.namespace

參數：此屬性包含必需的單個參數事件。它返回自定義名稱空間，它來自事件綁定函數。

示例1:本示例使用event.namespace屬性返回並刪除名稱空間。

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        jQuery event.namespace Property 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
      
    <!-- Script to use event.namespace property -->
    <script> 
        $(document).ready(function() { 
            $("h3").on("custom.someNamespace", function(event) { 
                alert(event.namespace); 
            }); 
              
            $("h3").click(function(event) { 
                $(this).trigger("custom.someNamespace"); 
            });   
        
            $("button").click(function() { 
                $("h3").off("custom.someNamespace"); 
            }); 
    });   
    </script> 
</head> 
  
<body> 
    <center> 
   
        <h1>Welcome to GeeksforGeeks!.</h1>  
          
        <div style="background-color:green"> 
            <h3> Click here Geeks for Geeks.</h3> 
            <button>Remove namespace</button> 
        </div> 
      
    </center> 
 </body> 
  
</html>

輸出：
在單擊元素h3之前：

單擊元素h3之後：

示例2:本示例使用click.mySomething命名空間來滑動內容。

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        jQuery event.namespace Property 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
      
    <!-- Script to use event.namespace to  
        slideToggle content -->
    <script> 
        $(document).ready(function() { 
            $("h3").on("click.mySomething", function() { 
                $(this).slideToggle(); 
            }); 
             
            $("button").click(function() { 
                $("h3").off("click.mySomething"); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1>Welcome to GeeksforGeeks!.</h1>  
          
        <div style="background-color:green"> 
            <h3>1st statement : Geeks for Geeks.</h3> 
            <h3>2nd statement : Mathematics</h3> 
            <button>Click to remove namespace</button> 
        </div> 
    </center> 
 </body> 
  
</html>

輸出：
之前單擊第一條語句：

單擊第一條語句後：

相關用法

注：本文由純淨天空篩選整理自AdeshSingh1大神的英文原創作品 jQuery | event.namespace Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。