Question

我对使用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>

Answer 1

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

document（html）
体
submitDiv
提交按钮

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

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

Fiddle

Answer 2

您的代码会将点击处理程序附加到所有元素，并且由于事件向上传播，它将从<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);
    });
});

理解javascript / jquery事件：为什么这个警报会发生四次火灾？

2 个答案: