2

我对使用 javascript 和 jquery 有基本的感觉，并且想了解事件触发时到底发生了什么。

此代码生成四个警报，上面写着“submitButton”。这是为什么？

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>Demo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
               $(document).ready(function () {
                         $("*").click(function(event) {
                            alert(event.target.id);
                        });
               });
        </script>

    <body>


        <div id='submitDiv'>
        <input id='submitButton' type="submit" class="button" value="Submit"/>
        </div>

    </body>
</html>
4

2 回答 2

7

*文字选择所有元素。所以你要添加一个处理程序：

  1. 文档 (html)
  2. 身体
  3. 提交Div
  4. 提交按钮

请注意，事件冒泡（从底部到 DOM 顶部）。您可以通过从处理程序返回 false 来防止事件冒泡：

$("*").click(function(event) {
    alert(event.target.id);
    return false;
});

小提琴

于 2013-09-17T02:26:32.893 回答
1

您的代码将一个点击处理程序附加到所有元素，并且由于事件向上传播，它将命中所有点击处理程序，从<input>一直到document.

为什么警报会说四次“submitButton”？

这是因为您引用event.target的总是指向第一个单击的元素。如果要为传播中的每个元素显示不同的 id，则需要引用this，即：

alert(this.id);

您可以通过false从单击处理程序返回或通过event对象显式停止传播：

$('*').on('click', function(event) {
    event.stopPropagation();
    alert(event.target.id);
});

但不建议这样做，因为所有这些事件处理程序都会占用内存。最好使用事件委托。

jQuery(function($) {
    $(document).on('click', function(event) {
        console.log(event.target);
    });
});
于 2013-09-17T02:32:49.350 回答