补充:
1、外部使用函数里面的怎么做？
1）return
2)定义一个变量保存 【人员选项卡 保存this】
2、事件：异步程序
循环：同步程序
解决方法：foreach() 或者为按钮【自定义一个属性index】
上午
今日案例：
案例1：简单表单验证
案例2：随机变色
案例3：select
案例4：事件委托写选项卡
1.JS能够做什么？
2.JS包含什么
3.事件写在那些地方
4.事件类型【鼠标（重要）、表单（重要）、页面、键盘】
一、JavaScript 能够做什么？
事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作：
1）每当【页面加载时】应该做的事情
2）当【页面被关闭时】应该做的事情
3）当用户【点击按钮时】应该被执行的动作
4）当用户【输入数据时】应该被验证的内容
等等
二、JS包含什么
1.JS是由事件驱动的
2.事件包含：事件源.事件类型=匿名函数（要做的事件）
ele.onclick = function(){
console.log(this.innerHTML)
}
三、事件可以写在那些地方
内联Js：<div id='ele' onclick='alert(1)'> 22 </div>
外联JS: 写在
ele.onclick = funtion(){} script标签里面
四、事件类型：事件没有用驼峰命名【页面、鼠标、键盘、表单】
1、页面常见事件
window.onload 等【页面资源加载完毕】 再执行
window.onscroll 【页面滚动】就会触发
window.onresize 【窗口发生改变】
window.onfocus 【获取焦点 】（不仅window有 div也有onfocus 但一般写在window下）
window.onblur 【失去焦点】
window.onunload 【卸载】的时候触发（当刷新的时候会看到跳了一下）
2、鼠标事件
click 点击
dbclick 双击
mousedown 鼠标按下
mouseup 鼠标抬起来（有触发事件 因为是我们先按下去 松手才触发）
mouseover 鼠标经过（只触发一次）
mouseout 鼠标（从某个元素）移出
mousemove 鼠标移动 （可触发多次，只要鼠标移动就触发事件）
注意：我们在CSS里面一个hover即可实现的移入移出， 在JS需要用2个事件才行
问题:
移到子元素的时候 会马上有移出的小bug（具体来说是mouseover）
1）onmouseover onmouseout一般组队用
2）onmouseenter onmouseleave 不会有上面那对的bug
3、键盘事件
onkeydown 按下键盘(一般在input里面用的多) 验证码的时候会有 最好的表单事件是填一个验证一个
<input type='text' id='a'>
a.onkeydown = function(){
console.log(this.value.length) //注意这里要写value
}
onkeypress 【按下键盘不松手】
onkeyup 按下鼠标 【抬起】时触发
4、表单事件
**以后记得【提交 重置都用button.**不写一阶段的input】
1)获取焦点事件 onfocus 需求：光标放进input placeholder里面的用户名消失
2）失去焦点onblur
inp1.onblur = function(){
//输入框以外都是失去焦点
if(this.value.length){
xiaoshi.innerHTML = '错'
}
}
3）oninput（文本有输出变化 就会触发） 类似于键盘事件
inp1.oninput = function(){
//输入框以外都是失去焦点
xiaoshi.innerHTML = '你已经输入'+this.value.length
}
4 )onchange(对比输入前后有没有变化，如果有变化就触发事件 如果没有变化就不触发事件) 类似onblur（但blur是一点旁边就触发）
5）onreset 重置就触发事件 (默认事件)
6）onsubmit 提交 【**onsubmit跟return搭配使用**】
form.onsubmit = function(){
return false 不提交 （默认是return true表单提交成功）
}
下午 全部是重点
1.事件三要素
2.事件绑定的三种方式
3.事件解绑2种方式（普通类型、监听类型）
4.事件对象
5.事件冒泡与事件捕获
6.阻止事件冒泡
7.事件委托
重点：事件监听
Js是由事件驱动的
一、事件：事件源.事件类型 = 要做的事情
ele.onclick = function(){
console.log(this.innerHTML) 重要
}
二、事件的绑定方式（三种）
1.标签上面直接绑定
2.JS直接绑定事件
3.事件监听方式绑定：1)可以多次绑定同一类型的事件【这就是为什么我们要用事件监听的方式绑定事件】; 2)兼容问题（封装函数）
注意：添加事件监听 不会产生覆盖（就算2个事件监听一样也不会被覆盖）
语法:addEventListener（）是个方法
addEventListener('事件类型',function(){
})
三、事件的解绑
第一种方式：如何解绑 onclick类型的
<div>哦哦</div>
<script>
var oDiv = document.querySelector('div')
oDiv.onclick = aa;
function aa(){
console.log(1)
}
//普通事件解绑: 让事件等于任意一个值，习惯上写null /false
oDiv.onclick = null/false/undefined; //null是个对象 因为重新赋值了 后面【覆盖】前面了 转为布尔类型了
第二种方式
//事件监听：需要一个个移除
注意：oDiv.onclick = null/false这种方式并不能移除事件监听
oDiv.addEventListener('click',a1)
function a1(){
console.log(111);
}
//解除事件监听 oDiv.removeEventListener('click',a1) //a1是函数名
**四、事件对象:**是对事件发生时 所有信息的综合描述 就是函数里面【形参】
var event = event || window.event; //事件兼容写法
var target= event.target || event.srcElement;//target兼容写法【点击当前的子元素】
注意：
event.key 打印字母 【 key区分大小写】
event.keyCode 打印是unicode字母对应的编码 【 不区分大小写】
tip: 后面写事件绑定 我们主要以事件监听方式写
五、事件冒泡与事件捕获
一、1.事件冒泡【重点】：子-父触发 是指【子元素的事件】会触发父元素的【同类型事件】
2.事件捕获:父-子触发 （在事件冒泡里面添加true false）
tip:低版本一般兼容事件冒泡 【推荐使用冒泡】
六、阻止事件冒泡 子元素不会阻止父元素
//阻止事件冒泡: 写在子元素身上
event.stopPropagation(); 记住
event.cancelBubble = true 兼容
**七、事件委托:**要给li绑定事件是需要三个点击事件 事件委托的话我们就只需要给ul绑定事件 然后判断是那个li
如何判断是那个li呢？我们可以通过target
if(e.target.tagName=='P') 注意语法书写 是大写P 标签大写
if(e.target.className=='P') 如果取了class类名也可以写 className注意语法书写 是大写P
注意：事件委托里面有很大的Bug this的指向问题【不要在事件委托里面写This】