事件
事件三要素
事件元-->触发事件的对象(谁触发)
事件类型-->如何触发事件(如：鼠标点击、鼠标经过、键盘按下)
事件处理程序-->通过一个函数赋值的方式完成
执行事件的三个步骤
1、获取事件源
2、注册事件(绑定事件) --> 事件源.触发方式
3、添加事件处理程序(采取函数赋值的形式)
DOM操作元素
我们可以利用DOM操作元素来改变元素里面的内容、样式等
两个修改元素内容的属性
1、element.innerText(非标准)
选中从起始位置到终止位置的内容，但是他会除去HTML标签，同时空格和换行也会去掉
利用DOM操作元素也可以不用添加事件，直接令element.innerText等于想要的修改即可
2、element.innerHTML(w3c推荐)
选中从起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行
区别：element.innerText不能识别HTML标签，element.innerHTML能够识别HTML标签
操作元素属性(元素本身自带属性)-->element.属性名 = '值'(要先获取元素element才能使用)
表单元素的属性操作
element.innerHTML只适用于普通的标签；要修改表单里面的文字属性，要使用input.value
其他属性：type, checked, selected, disabled
两个表单事件
● 获得焦点input.onfocus
● 失去焦点input.onblur
DOM操作样式属性(大小，颜色，位置)
element.style行内样式操作，通常在样式较少、功能简单的情况下使用(如element.style.backgroundColor = 'pink';)
产生的是行内样式，权重比较高(通过在页面检查元素可以发现在标签内部生成了行内样式)
element.className类名样式操作，适合于样式较多、功能复杂的情况
● 1.先在css中通过类选择器声明好样式，但是元素并不调用
● 2.在js中通过事件设置element.className = '类名'，使元素引用声明好的类选择器下的样式
● 通过在页面检查元素可发现在标签内部更改了类名，并且会覆盖掉标签原有的类名；若想保留原有的类名，可以设置为element.className = '原类名 新类名'
● 注意：js里面的样式设置要用驼峰命名法，如backgroundColor, fontSize
排他思想算法
有同一组元素，我想要其中某一个元素通过事件实现某种样式，就要用到排他思想
● 1.所有元素清除样式(干掉其他人)(常用for循环)
● 2.给目标元素设置样式(留下我自己)
自定义属性
获取自定义属性值-->element.getAttribute('属性名')
● 我们自己添加的属性就是自定义属性
设置属性值
● element.属性名 = '值'
● 该方法不能获取自定义属性
● element.setAttribute('属性' , '值')
● 该用法主要针对自定义属性
● 在设置类名时要区别开
● element.className = ' ';
● element.setAttribute('class' , '属性名')
● 移除自定义属性
● element.removeAttribute('属性')
自定义属性目的：为了保存并使用数据；有些数据可以保存到页面而不需要保存到数据库
H5新增
● H5规定，自定义属性要以data-开头为属性名并且赋值
● H5新增的获取自定义属性的方法
● element.dataset.属性名，或者element.dataset['属性值'] (ie11才支持)
● dataset是一个集合，会获得所有以data-开头的自定义属性 (只能获得以data-开头的自定义属性)
● 注意：
● 当自定义属性为data-属性名时，则可以直接用element.dataset.属性名获取
● 当自定义属性的名字很长，由多个横杠连接如：data-list-name时，则要用驼峰命名法来获取--> element.dataset.listName
