fe5-3:事件機制和事件綁定

1、操做元素(建立, 刪除, 修改)
2、事件

// 1、
// 建立
// 用 document.createElement 函數建立一個元素
var button = document.createElement('button');
// 用 innerHTML 設置屬性
button.innerHTML = '註冊用戶'

// 修改
// 用 appendChild 給一個元素添加子元素
// 這裏給 .login-form 添加剛纔建立好的按鈕
var form = document.querySelector('.login-form')
form.appendChild(button)

// 刪除
var pwd = document.querySelector('#id-input-password')
// 如下兩種方法均可以刪除元素
// 一種是自毀
// 一種是父節點刪除子元素
pwd.remove()
form.removeChild(pwd)

// 2、
// 點擊事件
//  得到按鈕
var loginButton = document.querySelector('#id-button-login')
// 聲明一個函數, 用於在按鈕點擊後執行
var clicked = function(event) {
    log('按鈕被點擊到了', event)
}
// 添加事件, 使用 addEventListener 函數, 它有兩個參數
loginButton.addEventListener('click', clicked)
// 第一個是事件的名字, 第二個是事件發生後會被自動調用的函數
// loginButton 發生了 'click' 事件後調用 clicked 函數