5-8、DOM事件

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

html事件

直接在HTML元素标签内添加事件，执行脚本。

语法：<tag 事件 = “执行脚本” >
功能：在HTML元素上绑定事件。
说明：执行脚本可以是一个函数的调用。

⭐⭐⭐
	onload ：页面加载时触发
	onclick ：鼠标点击时触发
	onmouseover ：鼠标滑过时触发
	onmouseout ：鼠标离开时触发
	onfoucs ：获得焦点时触发
	onblur ：失去焦点时触发
	onchange ：域的内容改变时发生

⭐在事件触发的函数中，this是对该DOM对象的引用。
在事件里写上this ，在js里定义一个变量接收。

<button onclick="p1(this);" >点击</button>

    function p1(but){
      this.style.background = '#fff';
    }

也可以传入两个、多个参数，用逗号隔开，注意接收数要对应：

<button onclick="p1(this,'#fff');" >点击</button>

    function p1(but,bgcolor){
      this.style.background = bgcolor;
    }

DOM0级事件

单个事件写在HTML没关系，但多个过于繁琐，所以出现了DOM0级事件

通过DOM获取HTML元素
（获取HTML元素）.事件=执行脚本

语法：ele.事件=执行脚本
功能：在DOM对象上绑定事件
说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用。

锁定解锁示例，(例子中if也可以判断文字)：

不建议使用HTML事件原因：

1. 多元素绑定相同事件时，效率低。
2. 不建议在HTML元素中写JavaScript代码。

示例，点击事件调用函数：

这个例子中，调用函数时如果加上括号了，那么在页面加载完成之后就会触发，所以不可以加括号，注意和其他函数调用区别开。

onfoucs 获得焦点时触发
onblur失去焦点时触发
onfoucs事件只能用于textarea标签和input标签type为text、password时

onload
页面解析完成之后才会解析js，两种写法：

window.onload = function(){ }

window.onload = init;
function init(){ }

onchange ()
⭐ 域的内容改变时发生。
一般作用于select或者是checkbox或者是radio。

  <select id="color">
    <option>选择颜色</option>
    <option value="#fff">白色</option>
    <option value="#00f">蓝色</option>
    <option value="#f00">红色</option>
    <option value="#0f0">绿色</option>
  </select>

    var color = document.getElementById('color');
    color.onchange = function(){
      document.body.style.background = color.value;  //获取被选中option的value值
      color.options;  //可以获得option的集合
      color.options[color.selectedIndex].value;
      //获取到集合之后可以通过索引的方式获得被选中的值
      // 'select'.selectedIndex 获取到的是被选中的是第几个    }

if() return;	//阻止脚本执行 

鼠标事件

	onsubmit：表单中的确认按钮被点击时发生
	onmousedown：鼠标按钮在元素上按下时触发
	onmouseup：在元素上松开鼠标按钮时触发
	onmousemove：在鼠标指针移动时发生
	onresize：当调整浏览器窗口的大小时触发
	onscroll：拖动滚动条滚动时触发

onsubmit事件不是加在按钮上，而是表单form上。
onmousemove 在其盒子范围内移动时触发
onscroll 的滚动条不止浏览器window的滚动条，还有其他溢出的滚动条

键盘事件与keyCode属性

	onkeydown：在用户按下一个键盘按键时发生
	onkeypress：在按下键盘按键时发生（只会响应字母与数字符号）
	onkeyup：在键盘按键被松开时发生
	keycode：返回onkeypress、onkeydown 或onkeyup 事件触发的键的值的字符代码，或键的代码。

键盘事件触发顺序：
onkeydown > onkeypress > onkeyup

	//按下按键，返回键码（是一个数字，所有的按键都有数字编码）
	document.onkeydown = function (jianma){
      console.log(jianma.keyCode);
    }