課程目標
能動態加上 onclick 事件屬性
能選取到父元素、子元素
能夠在 DOM 樹進行「移除」
能存取到 onclick 事件發生的元素
課程內容
現在已經會在 DOM 樹增加元素、加入文字了
記得之前寫過的「事件」嗎？
<button onclick="myFunction()">Click me</button>
function myFunction()
{
alert('你點擊了按鈕！');
}
這當然也能用 JavaScript 動態加上去
<button id="my-btn">Click me</button>
function myFunction()
{
alert('你點擊了按鈕！');
}
var btn = document.getElementById('my-btn');
btn.onclick = myFunction;
在 JavaScript 裡面，像這樣定義的「函式」，它的「名稱」其實也會是一個「變數」
所以可以直接指派給 .onclick 屬性
覺得有點怪，沒關係，先知道可以這樣設定「事件屬性」就好
這種「把函式設定到事件屬性」的行為，我們叫「綁定」
因為在事件發生的時候，要固定執行任務，就像是綁定任務給你，固定由你來負責的感覺
接著多談一下元素的父子關係
<div id="app">
這是簡介
<h1>這是標題</h1>
<p id="para">這是段落文字</p>
</div>
var app = document.getElementById('app');
alert(app.children[0].textContent)
alert(app.children[1].textContent)
到 jsfiddle 執行看看，有看懂了嗎？
元素的 .children 屬性可以存取到子元素，以陣列的形式出現
別忘記陣列的索引是從 0 開始喔
接著試試這樣
var para = document.getElementById('para');
alert(para.parentElement.textContent)
元素的 .parentElement 屬性可以存取到父元素
這邊把父元素的整個內容跳出來看，像這樣跳一堆字，實務上沒什麼用
重點是，可以存取到父元素、子元素，就可以在整個 DOM 上上下下跑來跑去，用上一課教的 .append() 來到處新增元素啦！
接著，來學學如何刪除元素吧
繼續上面的範例，請在 jsfiddle 試試這段
var para = document.getElementById('para');
para.remove();
然後試試這樣
var app = document.getElementById('app');
app.remove();
很簡單、直觀吧！
最後，來學習怎麼抓到事件發生當下的元素
記得之前有學過一個 document 物件嗎？
這是一個 JavaScript 在瀏覽器中內建的「物件」，這個物件代表網頁「當下的狀態」，有很多資料、函數可以呼叫使用
現在來學另一個 event 物件，這個物件代表網頁「當下正在發生的事件」，也有很多資料、函數可以呼叫使用
<button onclick="hello()">蘋果</button>
<button onclick="hello()">香蕉</button>
<button onclick="hello()">西瓜</button>
function hello()
{
alert(event.target.textContent)
}
綁定函式到事件屬性之後，可以利用 event.target 來找到當前發生事件的元素
找到元素之後，就可以自由的存取元素屬性、或者對元素做任何你想做的事情囉！
課後作業
接續前一課的作業，這次要來實作「刪除事項」的功能
請在事項的旁邊，加上刪除按鈕，請使用這樣的結構
<ul>
<li>
<span>倒垃圾</span>
<button>刪除</button>
</li>
<li>
<span>繳電話費</span>
<button>刪除</button>
</li>
<li>
<span>採買本週食材</span>
<button>刪除</button>
</li>
</ul>
點擊「刪除」按鈕，會將事項刪除不見
如此一來，你的清單小程式，就可以新增事項、也可以刪除事項囉
請稍微替這個「刪除」按鈕加一點 css 屬性，弄得漂亮一點，看起來才專業
做出這個功能，你就完成這次的課程目標了！
歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！
可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！
發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！
貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！
未來面試時，分享給面試官看，會讓人知道你的積極程度！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
交作業～ https://jsfiddle.net/birdie2019/d914vs70/75/
交作業 https://jsfiddle.net/68akocqL/
交作業 https://jsfiddle.net/cncent454518/z7f82k16/70/
繳作業~~ https://jsfiddle.net/igorrrrr/tfzswkdx/1/
交作業 https://jsfiddle.net/81ue_lan/2absqLm6/148/
https://jsfiddle.net/johnny890118/escz54L7/380/ 交作業！
交個作業 謝謝 https://jsfiddle.net/o018r4nh/4/
https://jsfiddle.net/tsaii/2cu6n5s9/86/ 交作業
作業繳交 https://jsfiddle.net/y97oenpv/27/