jQuery event.target 屬性

jQuery 的event.target屬性用於檢索觸發事件的DOM元素。這可以是直接為事件註冊的元素，也可以是其子元素之一。

語法

以下是 jQuery event.target 屬性的語法：

event.target

引數

此屬性不接受任何引數。

返回值

此屬性返回觸發事件的 DOM 元素。

示例 1

以下是 jQuery event.target 屬性的基本示例。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>Click on the below button</p>
    <button>Click me</button>
    <script>
        $('button').click(function(event){
           alert("Triggered by the " + event.target.tagName + " element");
        })
    </script>
</body>
</html>

輸出

上述程式顯示一個按鈕。單擊時，元素的標籤名稱將顯示在彈出警報中：

單擊按鈕時：

示例 2

以下是 jQuery event.target 屬性的另一個示例。我們使用此屬性來檢索觸發事件的 DOM 元素。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        div, p, span{
            padding: 8px;
            display: block;
            border: 1px solid #999;
        } 
    </style>
</head>
<body>
    <div class="res"></div>
    <div>
        <p>
            <span>Click</span>
        </p>
    </div>
    <script>
        $('body').on("click", function(event){
           $('.res').text("Triggered by the " + event.target.nodeName);
        })
    </script>
</body>
</html>

輸出

執行上述程式後，將顯示類似於事件冒泡的介面。當用戶點選任何元素時，該元素的標籤名稱將顯示在另一個 div 中：

示例 3

在下面的示例中，我們使用event.target屬性來檢索觸發該事件的多個 DOM 元素：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        p, h1, div, button{
            font-size: 20px;
            display: block;
            padding: 10px 0px;
        }
        span{
            color: green;
            padding: 10px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>Click on any element</p>
    <h1>This is heading</h1>
    <div>This is div element</div>
    <button>Click me!</button>
    <span></span>
    <script>
        $('p, h1, div, button').click(function(event){
           $('span').text("Triggered by the " + event.target.tagName + " element");
        })
    </script>
</body>
</html>

輸出

程式執行後，它將顯示一個<p>、<h1>、<div>和一個<button>元素。當用戶點選這些元素中的任何一個時，將顯示由標籤名稱觸發的事件：

jquery_ref_events.htm

列印頁面