html 这个Angular“按钮”实际上是如何工作的？

hkmswyz6 于 2023-05-12 发布在 Angular

关注(0)|答案(1)|浏览(169)

此可单击元素：

当在chrome中检查时，由以下html表示：

<div _ngcontent-kkl-c57="" class="cursor-pointer text-tibco-gray-L14 hover:text-tibco-gray-L16 ng-star-inserted">
        <a _ngcontent-kkl-c57="" class="flex items-center">
            <tss-icon _ngcontent-kkl-c57="" class="flex mr-2 w-4 h-4">
                <div class="fill-current w-full">
                    <svg
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                        <polygon points="11 7 11 4 15 8 11 12 11 9 4 9 4 7 11 7"></polygon>
                        <path d="M8,2V1H1.75A.75.75,0,0,0,1,1.75v12.5a.749.749,0,0,0,.75.75H8V14H2V2Z"></path>
                    </svg>
                </div>
            </tss-icon>
            <span _ngcontent-kkl-c57="" title="Log out">Log out</span>
        </a>
    </div>

它可以工作（导致响应单击的一些操作）。我的问题是这个html是如何导致一个点击事件被捕获和处理的？
澄清一下如果我看到

<div onclick="handler()"/>

或

<a href = "...

我能理解在本例中，我甚至没有看到任何具有类似onclick的属性的元素可能被捕获，或者至少该元素可以被唯一标识，以防onclick在它的某个祖先中被捕获。我显然是Angular的新手，可能是我缺少的一些基本的东西。

Html

来源：https://stackoverflow.com/questions/76189712/how-does-this-angular-button-actually-work

1条答案

按热度按时间

xdnvmnnf1#

Guy Incognito在评论中回答了这个问题，但为了清楚地说明答案是什么，并向自己证明它实际上是有效的，我做了一个测试页面。HTML文件包含：

<html>
    <head>
        <script>
            function onInit()
            {
                const element = document.createElement("button"); 
                element.innerText = "Click Me";
                element.addEventListener("click",onInit);
                document.body.appendChild(element);
                alert("HELLO");
            }
        </script>
    </head>
    <body onload="onInit()">
    </body>
</html>

在Chrome中加载并“检查”时，它会显示：

<html>
        <head>
            <script>
                function onInit()
                {
                    const element = document.createElement("button"); 
                    element.innerText = "Click Me";
                    element.addEventListener("click",onInit);
                    document.body.appendChild(element);
                    alert("HELLO");
                }
            </script>
        </head>
        <body onload="onInit()">
            <button>Click Me</button>
        </body>
    </html>

有一个新的按钮，工作。现在很明显，但不知何故，它对我来说并不明显，所以我认为它应该暴露给其他人同样的问题。

赞(0）回复(0）举报 2023-05-12

我来回答

html 这个Angular“按钮”实际上是如何工作的？

1条答案

相关问题

热门标签

最新问答