マウスイベント2(手順23)

27857 ワード
js-study テキストリンク

テーマ

  • mouseover/mouseout
  • event.target/event.relatedTarget

    • mouseover/museoutに関する例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	.first{
    		background:skyblue;
    		width:10%;
    	}
    	.second{
    		background:green;
    		width:10%;
    	}
    	.third{
    		background:red;
    		width:10%;
    	}
    </style>
</head>
<body>
<div id='exam3' class='third' >3층</div>
<div id='exam2' class='second' >2층</div>
<div id='exam1' class='first'>1층</div><br>
<button onclick='over()'>onmouseover 사용</button>
<button onclick='out()'>onmouseout 사용</button>
<script>
    let exam3 = document.getElementById('exam3');
    let exam2 = document.getElementById('exam2');
    let exam1 = document.getElementById('exam1');

    let onover = false, onout = false;

    exam3.onmouseover = ()=>{
    	if(event.relatedTarget.tagName=='DIV' && onover == true)
    		alert(`mouseover에 의해 ${event.relatedTarget.innerHTML}에서 ${event.target.innerHTML}로 옮겨갔다.` )
    }
    exam2.onmouseover = ()=>{
    	if(event.relatedTarget.tagName=='DIV' && onover == true)
    		alert(`mouseover에 의해 ${event.relatedTarget.innerHTML}에서 ${event.target.innerHTML}로 옮겨갔다.` )
    }
    exam1.onmouseover = ()=>{
    	if(event.relatedTarget.tagName=='DIV' && onover == true)
    		alert(`mouseover에 의해 ${event.relatedTarget.innerHTML}에서 ${event.target.innerHTML}로 옮겨갔다.` )
    }

    exam3.onmouseout =()=>{
    	if(event.relatedTarget.tagName=='DIV' && onout == true)
    		alert(`mouseout에 의해 ${event.target.innerHTML}에서 ${event.relatedTarget.innerHTML}로 옮겨갔다.` )
    }
    exam2.onmouseout = ()=>{
    	if(event.relatedTarget.tagName=='DIV' && onout == true)
    		alert(`mouseout에 의해 ${event.target.innerHTML}에서 ${event.relatedTarget.innerHTML}로 옮겨갔다.` )
    }
    exam1.onmouseout = ()=>{
    	if(event.relatedTarget.tagName=='DIV' && onout == true)
    		alert(`mouseout에 의해 ${event.target.innerHTML}에서 ${event.relatedTarget.innerHTML}로 옮겨갔다.` )
    }

    function over(){
    	onover = true;
    	onout = false;
    }
    function out(){
    	onover = false;
    	onout = true;
    }
</script>
</body>
</html>

    簡単に整理すると、onmouseoverボタンをクリックすると、1つのdiv(1、2、3層を含む)から別のdivに移動すると、alertの移動が発生します.onmouseoutボタンも同様です.

    event.target && event.relatedTarget


    以上のコードのevent.ターゲットとイベント.関連ターゲットは、mouseoverおよびmouseoutによって決定される.

  • mouseover

  • event.target–マウスで入力した要素.

  • event.relatedTarget–マウスの要素(relatedTarget→target)が表示されます.

  • mouseout

  • event.target–マウスが離れた要素.

  • event.relatedTarget–マウスは(target→relatedTarget)離れた新しいポインタの下の要素です.
    • だからalertコードの中でmouseoverとmouseoutのeventtarget位置が異なる
    (event.target、event.relatedTargetはタグを表す)

    mouseenter && mouseleave


    mouseover&&mouseoutとは異なり、버블링に達することは不可能です.

    Element.closest()


    ElementからNest()メソッドを使用して、自身から親要素単位まで、各要素が指定した選択者を満たすように移動します(ドキュメントのルートディレクトリに移動します).条件に最も近い親要素が返されます.条件を満たす要素がない場合はnull値が返されます.
    ex)
    <html>
    <head>

    </head>
    <body>
            <article>
                <div id="div-01">Here is div-01
                    <div id="div-02">
                        Here is div-02
                        <div id="div-03">Here is div-03</div>
                        </div>
                    </div>
                </article>
    </body>
    <script>
var el = document.getElementById('div-03');

var r1 = el.closest("#div-02");
// id=div-02 조건이 만족하므로 속성을 가진 부모 요소가 반환된다.

var r2 = el.closest("div div");
// div 요소에 만족한 요소 중 div 자식을 가리키므로, id=div-03 자신이 만족된다.

var r3 = el.closest("article > div");
// 가장 가까운 article 요소 바로 하위의 div 요소 id=div-01 속성을 가진 요소가 반환된다.

var r4 = el.closest(":not(div)");
// div 요소가 아닌 가장 가까운 부모 article 요소가 반환된다.
console.log(r1)
console.log(r2)
console.log(r3)
console.log(r4)

    </script>
</html>
    結果

    このように、上記で使用したevent.targetおよびevent.relatedTargetは、必要に応じて使用することができる.
    [プログラマー]コーラの推測
    オブジェクトの圧縮と解凍