//方法一：通過onclick
<button onclick="clickEvent()">點擊</button>

<script>
function clickEvent(){
   alert("點擊事件");
}
</script>

//方法二：通過addEventListener
<button id="btn_button">點擊</button>

<script>
var btn = document.getElementById("btn_button");
btn.addEventListener("click", function () {
  alert("點擊");
}, false);
</script>

[function method1() {
  console.log("method1");
}
function method2() {
  console.log("method2");
}
function method3() {
  console.log("method3");
}
var btn = document.getElementById("btn_button");
btn.addEventListener("click", method1, false);//第三個參數(shù)是默認(rèn)值，默認(rèn)是冒泡，如果設(shè)置為true則是捕獲
btn.addEventListener("click", method2, false);
btn.addEventListener("click", method3, false);
//最終會按順序執(zhí)行：method1 -> method2 -> method3 
btn.removeEventListener("click", method1, false);//用于移除事件


btn.onclick = method1;
btn.onclick = method2;
btn.onclick = method3;
//最終只會執(zhí)行method3
btn.onclick = null;//用于移除事件

<ul id="container" style="display: inline-block;">
  <li id="title1">123456</li>
  <li id="title2">qwert</li>
  <li id="title3">
    <ul>
      <li id="title3inner">title3里面的文本</li>
    </ul>
  </li>
</ul>

<script>
  var container = document.getElementById("container");
  var title1 = document.getElementById("title1");
  var title2 = document.getElementById("title2");
  var title3 = document.getElementById("title3");
  var title3inner = document.getElementById("title3inner");

  container.onclick = function (e) {
    alert("container");
  }
  title1.onclick = function (e) {
    alert("title1");
  }
  title2.onclick = function (e) {
    alert("title2");
  }
  title3.onclick = function (e) {
    alert("title3");
  }
  title3inner.onclick = function (e) {
    alert("title3inner");
  }
</script>

<ul id="container" style="display: inline-block;">
  <li id="title1">123456</li>
  <li id="title2">qwert</li>
  <li id="title3">QWE123</li>
</ul>

<script>
var container = document.getElementById("container");
container.onclick = function (e) {
  //console.log(e);
  if (e.target.id = "title1") {
    alert(e.target.innerText);
  }
  else if (e.target.id = "title2") {
    alert(e.target.innerText);
  }
  else if (e.target.id = "title3") {
    alert(e.target.innerText);
  }
}
</script>

let a = 3;
let b = a;
a = 4;
console.log(a);//4
console.log(b);//3
console.log(a === b);//這便是深拷貝，a和b完全是不同的變量，各自保存一個值。

let arr = [1, 2, 3, 4, 5];
let brr = arr;
arr[1] = 8;
console.log(arr[1]);//8
console.log(brr[1]);//8  為什么呢？ 這便是淺拷貝，數(shù)組類型是引用類型，arr跟brr變量只是保存的引用地址，他們共同指向[1,2,3,4,5]這個數(shù)組
console.log(arr === brr);//true

let arr = [1, 2, 3, 4, 5];
let brr = JSON.parse(JSON.stringify(arr));
arr[1] = 8;
console.log(brr[1]);//2，這便實現(xiàn)了所謂的深拷貝