私は過去2日間にマウスオーバーイベントとオンマウスアウトイベントにさらされました。マウスポインターが要素に移動し、マウスポインターが指定されたオブジェクトから移動したときにイベントをトリガーするとき、それらは単にイベントをトリガーしているだけだと思っていました。しかし、私は突然、これらがそれらの単純な説明であることがわかりました。結局、それらを一緒に見てみましょう。結局のところ、彼らはまだ奇妙な特徴を持っています。それは良いですか悪いですか？
最初にボックスを実装します。
このボックスでオンマウスオーバーイベントとマウスアウトイベントをバインドします
彼らに何も起こらないことを発見し、それから（ええ、あなたは知っている！）
b要素を作成して、それが要素Aにaの子要素としてネストされるようにしましょう
私たちはまだ、オンマウスオーバーイベントとオンマウスアウトイベントを外側の親要素にバインドします。何を知りますか？はい、そうです！マウスがAの子要素Bを移動して削除すると、オンマウスオーバーイベントとオンマウスアウトイベントも発生します！ ！なぜ？これは私が欲しいものではありません！ Bは現時点ではAの一部ではありませんか？もちろん、そうではありませんが、それ以外の場合は、要素Bが移動されたときにオンマウスオーバーイベントは発生しません。これは、要素BがまだAの不可欠な部分であることを証明しています。
では、何が起こっているのでしょうか？結局のところ、事件は間違いを犯していますか？一般的に使用されるブラウザには、イベントバブルとイベントキャプチャの2種類のイベントストリームがあることを誰もが知っています。イベントバブルの定義を見てみましょう。イベントは、最も特定のイベントターゲットから最も具体的なイベントターゲット（ドキュメントオブジェクト）に段階的に伝播されます。したがって、マウスがAの子要素Bを移動して削除すると、Bのオンマウスオーバーイベントとオンマウスアウトイベントがトリガーされますが、これら2つのイベントはありません。そのため、これら2つのイベントが親要素Aに渡されます。
一部の人々はそれを避ける方法を言うでしょう。結局のところ、誰もがこの種の需要を持っているわけではありません。トリガーするために親要素イベントが必要であり、子供の要素を静かにハンサムな男にします。
したがって、W3Cは、マウスオーバーおよびマウスアウトイベントに関連ターゲット属性を追加します。
•マウスオーバーイベントでは、マウスがどの要素から生まれるかを示します。
•マウスアウトイベントでは、マウスが行く要素を指します
ただし、Microsoftはマウスオーバーとマウスアウトイベントに2つの属性を追加しました
•マウスオーバーイベントでのエレメントから、マウスがどの要素から来るのかを示します
•Toelement、マウスアウトイベントでマウスを指す要素
したがって、次のコード実装があります
document.getElementById（ 'box1'）。onmouseover = function（e）{if（！e）e = window.event; var reltg = e.relatedTarget？ e.ReLatedTarget：E.FromElement; while（reltg && reltg！= this）reltg.parentnode; if（reltg！= this）{// onmouseenterイベントアラートの処理コード（ '111'）;}} document.getelementbyid（ 'box1'） window.event; var reltg = e.relatedTarget？ e.ReleatedTarget：E.ToElement; while（reltg && reltg！= this）reltg = reltg.parentnode; if（reltg！= this）{//ここで、ムーセリーブイベント処理コードアラート（ '2222'）;};};上記は、編集者が紹介したオンマウスオーバーインシデントとマウスアウトインシデントの包括的な理解です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！