---

theme: smartblue

一、事件概述

JavaScript使我們有能力創建動態頁面，而事件是可以被JavaScript偵測到的行為。

簡單理解: 觸發---響應機制。

網頁中的每個元素都可以產生某些可以觸發JavaScript的事件，例如，我們可以在用戶點擊某按鈕時產生一個事件，然后去執行某些操作。

事件由三部分組成： 事件源，事件類型，事件處理程序

```

<script>//點擊一個按鈕，彈出對話框
//事件是有三部分組成: 事件源、事件類型、事件處理程序，我們也稱為事件三要素
//(1)事件源事件被觸發的對象誰按鈕
var btn = document.getElementById('btn');
//(2)事件類型如何觸發什么事件，比如鼠標點擊(onclick)還是鼠標經過 還是鍵盤按下
//(3)事件處理程序通過一個函數賦值的方式完成
btn.onclick= function(){alert("clicked")
}
</script>

```

二、 常見鼠標事件

三、 操作元素

3.1 改變元素內容

element.innerText

從起始位置到終止位置的內容,但它去除 html標簽，同時空格和換行也會去掉

element.innerHTML

起始位置到終止位置的全部內容，包括html標簽，同時保留空格和換行

```

<div id="div1"></div>
<div id="div2"></div><script>// 寫var div1 = document.querySelector("#div1")var div2 = document.querySelector("#div2")div1.innerText = "<strong>innerText</strong>"div2.innerHTML = "<strong>innerHTML</strong>"// 讀console.log(div2.innerText)console.log(div2.innerHTML)</script>

``` innerText和innerHTML的區別

1. innerText不識別html標簽非標準 去除空格和換行
2. innerHTML 識別html標簽 W3C標準 保留空格和換行的

這兩個屬性是可讀寫的, 可以獲取元素里面的內容

3.2 改變屬性內容

1.innerrext、innerHTM 改變元素內容

2.src、href

3.id、alt、title

```

<img src = "./1.jpg">
<button id="btn">change image</button><script>var btn = document.querySelector("#btn")var img = document.querySelector("img")btn.onclick = ()=>{img.src = "./2.jpg"}
</script>

```

3.3 改變表單的屬性

利用 DOM 可以操作如下表單元素的屬性：

type、value、checked、selected、disabled

```

<input type="text" value="please input">
<button id="change">change value</button>
<button id="disable">change value</button>
<script>// 獲取元素var changeBtn =  document.querySelector("#change")var disableBtn =  document.querySelector("#disable")var input =  document.querySelector("input")// 注冊事件，處理程序changeBtn.onclick = ()=>{input.value = "changed"}disableBtn.onclick = ()=>{input.disabled = true}
</script>

```

3.4 改變樣式屬性

我們可以通過JS 修改元素的大小、顏色、位置等樣式.

1.element.style行內樣式操作

2.element.className 類名樣式操作

```

<button id="change">change</button>
<script>// 獲取元素var changeBtn =  document.querySelector("#change")var div =  document.querySelector("div")changeBtn.onclick = ()=>{div.style.backgroundColor = 'black'div.style.width = '250px'div.className= 'change div'}
</script><style>div{width: 200px;height: 200px;background-color: red;}div{width: 100px;height: 100px;background-color: yellow;}
</style>

```

注意：

1. Js 修改 style 樣式操作, 產生的是行內樣式，css 權重比較高
2. Js 里面的樣式采取駝峰命名法 比如 fontsize、backgroundcolor
3. className 會直接更改元素的類名，會覆蓋原先的類名; 如果想保留原先的類名，可以做多類名選擇器