WebApi入门第三章（事件介绍及注册事件 ）

1. 事件源：按钮 querySelector(‘button’)

2. 事件类型：点击事件 onclick

3. 事件处理

3.1 获取按钮的值：innerText

3.2 获取body元素：querySelector(‘body’) || document.body

3.3 判定按钮的值

• 关灯：背景色变黑，按钮的值变 开灯

• 开灯：背景色变亮，按钮的值变 关灯

*/

// 思路分析

// 1. 事件源：按钮 querySelector(‘button’)

let btn = document.querySelector(‘button’);

// console.log(btn);

// 2. 事件类型：点击事件 onclick

btn.onclick = function () {

// 3. 事件处理

// 3.1 获取按钮的值：innerText

// console.log(btn);

let value = btn.innerText;

// 3.2 获取body元素：querySelector(‘body’) || document.body

let body = document.body

// console.log(body);

// 3.3 判定按钮的值

if (value == ‘关灯’) {

// * 关灯：背景色变黑，按钮的值变 开灯

body.style.backgroundColor = ‘#000’;

btn.innerText = ‘开灯’;

} else {

// * 开灯：背景色变亮，按钮的值变 关灯

body.style.backgroundColor = ‘’

btn.innerText = ‘关灯’;

}

}

事件介绍及注册事件

---

• 1.事件：js处理用户交互的一种机制

• 交互：什么元素在什么时刻做什么事

• 2.事件的三要素：组成事件的三要素

• 事件源：什么元素（div）

• 事件类型：什么时刻（鼠标点击onclick 鼠标移入：onmouseover）

• 事件处理函数：做什么事（一段代码：函数）

• 3.注册事件:本质是给元素属性赋值

• 事件源.事件类型 = 事件处理函数

• box.onclick = function(){}

• 4.事件工作原理

• a.事件在注册的时候，不会执行（函数在声明的时候不会执行）

• b.一旦元素注册事件之后，当用户触发了这个事件的时候，浏览器会自动捕捉到这个事件，然后帮我们调用元素对象的事件处理函数

• 5.页面中 任何元素 都可以注册 很多个事件(点击，移入等)

禁用/启用按钮小练习

---

需求

1. 点击启用按钮，所有 的input都可以使用：disabled = false

2. 点击禁用按钮，所有 的input都不能使用：disabled = true

/*

禁用 思路分析

1. 事件源： 禁用按钮 #jy

2. 事件类型： 点击 onclick

3. 事件处理

3.1 获取所有input元素：querySelectorAll(‘input’)

3.2 遍历取出每个input

3.3 给每个input 加上disabled属性 值为true

*/

效果图 ：

---

启用

禁用

完整代码

---

---

启用

禁用