ブラウザはクリックまたはホバーイベントを取得する要素をどのように知っていますか？

Question

Javascriptを使用すると、ユーザーが要素の上を移動したとき、またはユーザーが要素をクリックしたときにカスタムイベントを発生させることができます。しかし、Javascriptはクリックイベントを受け取る要素をどのように知っていますか？例えば

このようなHTML要素：

<div style="width: 300; height: 300;"> 
    <a href="hello">Hello World</a> 
</div> 

私はリンクをクリックすると、ブラウザはそのリンクに接続されたすべてのクリックイベントを実行するために知っています。しかし、ページ上のリンクがどこにあるか、ブラウザが知っているん

考えてみましょう（それが目に見えるということも、または？）：

<div id="mydiv" style="width: 300; height: 300;"> 
    <a href="hello">Hello World</a> 
</div> 
<style> 
    #mydiv a { 
     display: none; 
    } 
</style> 

を今私は、リンクがために使用スペースをクリックしたときに何も起こりません可視。この場合、ブラウザはクリック/ホバーイベントを発生させないことをどのように知っていますか？使用するアルゴリズムを再作成したい場合は、どの要素が必要ですか？

私はこのようになり、ブラウザのコード内のいくつかの機能があると仮定します。

/* Take user's mouse coordinates and return a DOM element. */ 
function returnElementBasedOnMouseCoordinate(x, y) { 

    /* Does a lookup function on some data structure */ 
    return someElementInTheDom; 
} 

その機能のしくみを教えてください。

Answer 1

通常（WebKitのを:)意味する）のブラウザでは、レンダリングツリーを作成しますドキュメントDOMツリーにほぼ対応していますが、ドキュメントの論理構造ではなく視覚的な構造を反映しています。目に見えない要素（ディスプレイ：なし）の場合、マウスイベント処理に参加する対応するレンダーオブジェクトはありません。レンダリングツリーは、DOMまたはその視覚的側面（要素の表示、可視性、寸法など）の一部が変更されるたびに変更されます。

Answer 2

display: noneが適用されている要素がレイアウトから削除されるため、ページ上の場所がなくなります。

HTMLレイアウトが一般的にどのように機能するかについてもっと知りたい場合は、visual formatting modelのCSS仕様の章を参考にしてください。イベントがどのように起動されるのかを理解すると、イベントは比較的簡単です。イベントは、最初に、最も高いzインデックスを持ち、クリックしたポイントを含む要素に送信されます。 （あなたがここで求めている場合は、再び：。#mydivそれはあなたがクリックしたポイントを含めることはできませんので、何の場所を持っていない）