【JavaScript】event.target

説明

配合click / mouserover事件使用,指出目前的target元素

.outer(onclick="action()")
 .inner
 span click me
.outer
 background-color: #eee
 width: 200px
 height: 40px
 text-align: center
 .inner
 line-height: 40px
 display: inline-block
function action(){
 console.log(event.target);
}

應用例:收合選單

如果選單的標題與內容不小心寫在同一層級,
事件又想要綁在最外層的元素,
可以配合contains鎖定事件觸發的目標。

ul
 li(onclick="show(this)")
 .title 第一層選單 click me
 .content 這是第一層選單的內容
 br
 |內容...
 br
 |內容...
 br
 |內容...
 li(onclick="show(this)")
 .title 第二層選單 click me
 .content 這是第二層選單的內容
 br
 |內容...
 br
 |內容...
 br
 |內容...
ul
 display: inline-block
li
 list-style: none
 background-color: LightCyan 
 color: teal
 .title
 padding: 5px 10px
 .content
 background-color: Teal
 color: #fff
 padding: 5px 10px
 display: none
 .content.show
 display: block
function show(th){
 if(event.target.classList.contains("title")){
 th.children[1].classList.toggle("show");
 }
}

Display

  • 第一層選單 click me
    這是第一層選單的內容
    內容…
    內容…
    內容…
  • 第二層選單 click me
    這是第二層選單的內容
    內容…
    內容…
    內容…

Leave a Reply

Your email address will not be published. Required fields are marked *