説明

配合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
  這是第二層選單的內容
  內容…
  內容…
  內容…