JS How to get the div that sends the event

原創

Lyncai

2020-02-22 04:38

There is a method :

event.srcElement

it can return the element that trigger the event. So we can get the element info by event.srcElement.

HTML :

<html>
<head>Get event element</head>
<body>
<div id="container">
    <div id="divsteps" style="float:left; width:300px;background-color:green" >
        <div id="step1" class="steps" style="height:50px" οnmοuseοver="showDetail()" οnmοuseοut="hideDetail()">Step 1</div>
        <div id="step2" class="steps" style="height:50px" οnmοuseοver="showDetail()" οnmοuseοut="hideDetail()">Step 2</div>
        <div id="step3" class="steps" style="height:50px" οnmοuseοver="showDetail()" οnmοuseοut="hideDetail()">Step 3 </div>
        <div id="step4" class="steps" style="height:50px" οnmοuseοver="showDetail()" οnmοuseοut="hideDetail()">Step 4</div>
        <div id="step5" class="steps" style="height:50px" οnmοuseοver="showDetail()" οnmοuseοut="hideDetail()">Step 5</div>
        <div id="step6" class="steps" style="height:50px" οnmοuseοver="showDetail()" οnmοuseοut="hideDetail()">Step 6</div>
        <div id="step7" class="steps" style="height:50px" οnmοuseοver="showDetail()" οnmοuseοut="hideDetail()">Step 7</div>
    </div>
    <div id="details" style="visibility:hidden; float:left;width:300px;height:300px;background-color:red">This is test rank</div>
</div>

</body>

<script type="text/javascript">
    function showDetail() {
        var detaildiv = document.getElementById('details');
        var sourcediv = event.srcElement;
        detaildiv.innerText = sourcediv.id;
        detaildiv.style.visibility = 'visible';
    }
</html>
    function hideDetail() {
        var detaildiv = document.getElementById('details');
        detaildiv.style.visibility = 'hidden';
    }
</script>