1. 操作表单元素属性
- 表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
- 正常的有属性有取值的跟其他的标签属性没有任何区别
- 获取:DOM对象.属性名
- 设置:DOM对象.属性名=新值
表单.value = '用户名'
表单.type ='password'
2. 自定义属性
- 标准属性: 标签天生自带的属性 比如clas id title等,可以直接使用点语法操作比如: disabled、checked、selected
- 自定义属性:
- 在html5中推出来了专门的data-自定义居性
- 在标签上一律以data-开头
- 在DOM对象上一律以dataset对象方式获取
语法：
对象.dataset.属性
3. 定时器-间歇函数
目标：能够使用定时器函数重复执行代码
定时器函数可以开启和关闭定时器
1.开启定时器
setInterval(函数，间歇时间)
setInterval(function(){
console.log('一秒执行一次')
}，1000)
function fn(){
console.log('一秒执行一次')
}
setInterval(fn, 1000)
2.关闭定时器
let n = setInterval(fn, 1000)
clearInterval(n)//变量名
4. 事件监听
目标:能够给DOM元素添加事件监听
-
什么是事件?
事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮 -
什么是事件监听?
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等 -
语法：
元素对象.addEventListener('事件类型'，要执行的函数) -
事件监听三要素:
- 事件源：那个dom元素被事件触发了，要获取dom元素
- 事件类型：用什么方式触发，比如鼠标单击 click、鼠标经过mouseover等
- 事件调用的函数: 要做什么事
事件类型：
鼠标事件： click mouseenter mouseleave
焦点事件： focus blur
键盘事件： keydown keyup
文本事件： input
5. 事件对象
能说出什么是事件对象
- 事件对象是什么
- 也是个对象，这个对象里有事件触发时的相关信息
- 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
- 使用场景
- 可以判断用户按下哪个键，比如按下回车键可以发布新闻
- 可以判断鼠标点击了哪个元素，从而做相应的操作
1. 事件对象是什么?
也是个对象，这个对象里有事件触发时的相关信息
2. 事件对象在哪里?
在事件绑定的回调函数的第一个参数就是事件对象
(这个e就是事件对象)
元素.addEventListener('click'，function (e) {})
能够使用常见事件对象属性
部分常用属性
- type： 获取当前的事件类型
- clientX/clientY： 获取光标相对于浏览器可见窗口左上角的位置
- offsetX/offsetY： 获取光标相对于当前DOM元素左上角的位置
- key： 用户按下的键盘键的值 现在不提倡使用keyCode
