day02-DOM-事件基础

webApi

day02-DOM-事件基础

目标：能给元素添加事件，并利用事件做常见的网页交互效果

事件

模型: 用户在某个元素上触发了某种行为执行了对应的事情

事件监听

事件源

事件类型

事件处理函数

语法:

DOM L0 事件源.on事件类型 = function(){}

DOM L2 事件源.addEventListener(事件类型， 事件处理函数)

拓展阅读

DOM L0 ：是 DOM 的发展的第一个版本； L：level

DOM L1：DOM级别1于1998年10月1日成为W3C推荐标准

DOM L2：使用addEventListener注册事件

DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

- 焦点事件，当元素获得或者失去焦点时触发；

- 鼠标事件，当用户通过鼠标在页面上执行操作时触发；

- 滚轮事件，当使用鼠标滚轮（或类似设备）时触发；

- 文本事件，当在文档中，输入文本时触发；input

- 键盘事件，当用户通过键盘在页面上执行操作时触发；

常见的事件类型

鼠标事件

click

mouseenter, mouseleave

焦点事件

focus, blur

键盘事件

keydown

####### 键盘按下触发

######## 会在值落到表单之前触发, 所以获取的结果是上一次的结果

keyup

####### 键盘抬起触发

######## 会在值落到表单之后触发, 所有获取的是当前这一次的结果

文本事件

input

综合案例1

随机点名案例

抽完为止

名字不停的闪动

注意点

事件处理函数不会主动执行,必须触发才会执行, 触发一次就会重新执行一次

事件处理函数里面的内容最后执行

课堂小练习

点击事件

click

mouseenter,mouseleave

模拟小米搜索框

focus, blur

针对表单案例

微博发布案例-显示输入字数

验证表单

input事件

str.length

#######

表单全选

需求1

####### 给全选表单添加点击事件

####### 在事件中将自己的checked状态赋值给每一个checkbox

需求2

####### 点击下面所有的checkbox去控制全选的状态

####### 思路

######## 遍历下面的所有的checkbox,添加点击事件

######## 在事件内部,遍历所有的checkboxs状态,只要有一个为false 就将全选状态设置为false 并且直接return

######## 在循环结束将全选的状态直接设置为true

展示

#######

购物车加减操作

给添加按钮注册点击事件, 获取表单的value,然后自增

解除减号的disabled状态

给减号按钮添加点击事件,获取表单的value,然后自减

自减结束需要判断,如果结果小于等于1 则添加上disabled状态

展示：

#######

高阶函数

高阶函数的定义：高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待

函数表达式

把函数当值赋值给变量

回调函数

把函数作为参数传递给另外一个函数

以前的接触过的回调函数 定时器

生活中的例子：

送女朋友回家，上楼到家发微信

环境对象

this

环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境

【谁调用， this 就是谁】 是判断 this 指向的粗略规则

语义： this这个， btn.fn 函数是谁调用的？是btn这个按钮调用的

编程思想

排他思想

当前元素为A状态,其他元素为B状态

使用

干掉所有人

####### 使用for循环

复活他自己

####### 通过this或者下标找到自己或者对应的元素

综合案例

tab栏切换案例