1、事件概述
JS使我们有能力创建动态页面，而事件是可以被JS侦测的行为
简单理解：触发----响应机制
网页中每个元素都可以产生某些可以触发JS的事件，例如点击事件
事件是由三部分组成 事件源 事件类型 事件处理程序称为事件三要素
事件源： 事件被触发的对象 谁被触发
事件类型：如何触发，什么事件例如鼠标点击，鼠标经过，键盘按下等
事件处理程序：通过函数赋值的方式完成
执行事件的步骤：
获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）
<script type="text/javascript">
//第一步：获取按钮对象
var btn=document.getElementById("btn");
//第二步：绑定一个单击事件
//第三步：添加事件处理程序
btn.onclick=function(){//像这种为单击事件绑定的函数，我们称为单击响应函数
alert("你好")
}
</script>常见的事件
| 鼠标事件 | 触发条件 |
| onclick | 当单击鼠标时运行脚本。 |
| onmousedown | 当按下鼠标按钮时运行脚本。 |
| onmouseup | 当松开鼠标按钮时运行脚本。 |
| onmousemove | 当鼠标指针移动时运行脚本。 |
| onmouseover | 当鼠标指针移至元素之上时运行脚本，不可以阻止冒泡。 |
| onmouseout | 当鼠标指针移出元素时运行脚本，不可以阻止冒泡。 |
| onmouseenter | 当鼠标指针移至元素之上时运行脚本，可以阻止冒泡。 |
| onmouseleave | 当鼠标指针移出元素时运行脚本，可以阻止冒泡。 |
| onmousewheel | 当转动鼠标滚轮时运行脚本。 |
| onscroll | 当滚动元素的滚动条时运行脚本。 |
| 键盘事件 | 触发条件 |
| onkeyup | 某个键盘按键被松开时触发** （document，window） |
| onkeydown | 某个键盘按键被按下时触发，通常不会触发事件冒泡，除非特别处理 |
| onkeypress | 某个键盘按键被按下时触发，会触发事件冒泡 |
| 表单事件 | 触发条件 |
| onfocus | 表单获得焦点触发** |
| onblur | 表单失去焦点触发 |
| oninput | 表单每次输入触发** |
| onchange | 表单内容发生改变时触发** |
| onselect | 表单文本被选取时触发 |
| onreset | 表单重置时触发 |
| onsubmit | 表单提交时触发 |
2、操作元素
JS的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等
2.1、改变元素内容
element.innerText 从起始位置到终止位置的内容，会去除html标签，同时空格和换行也会去掉
element.innerHTML 从起始位置到终止位置的全部内容，包括html标签，保留空格和换行
2.1.1 基本使用
<body>
<!-- 需求：点击button，切换内容 -->
<button>点我切换内容</button>
<div>天气炎热</div>
<script>
// 1、获取元素
var btn = document.querySelector("button");
var div = document.querySelector("div");
// 2、绑定事件
//3、事件处理函数
btn.onclick = function () {
//console.log(div.innerText);
//console.log(div.innerHTML);
//方式一、操作元素内容--innerText
// div.innerText = "天气凉爽";
//方式二、操作元素内容--innerHTML
div.innerHTML = "天气凉爽";
};
</script>
</body>2.1.2 两者区别
写：innerText 不识别html标签，innerHTML识别html标签
读：innerText，innerHTML可以获取元素内面的内容，innerText去除空格、换行和标签，innerHTML可以获取到元素里面的标签，同时保留空格和换行
2.2、改变元素其他属性
src、href、id、alt、title等属性
<body>
<!-- 需求：点击对应的按钮，可以切换图片已经更改title值 -->
<button id="dog">小狗</button>
<button id="cat">小猫</button><br /><br />
<img src="./img/pic_01.jpg" title="小狗" />
<script>
// 1、获取元素
var dog = document.querySelector("#dog");
var cat = document.querySelector("#cat");
var img = document.querySelector("img");
//2、绑定事件、处理函数
dog.onclick = function () {
img.src = "./img/pic_01.jpg";
img.title = "小狗";
};
cat.onclick = function () {
img.src = "./img/pic_02.jpg";
img.title = "小猫";
};
</script>
</body>2.3、操作表单元素属性
type、value、checked、selected、disabled等
<body>
<!-- 需求：1、点击按钮，更换input里的显示内容为：‘内容被修改了’
需求2:点击按钮，按钮就被禁用了
-->
<button>按钮</button>
<input type="text" value="请输入内容" />
<script>
// 1、获取元素
var btn = document.querySelector("button");
var int = document.querySelector("input");
// 绑定点击事件，处理函数
btn.onclick = function () {
int.value = "内容被修改了";
btn.disabled = true;
};
</script>
</body>2.4、操作样式属性操作
可以通过JS修改元素的大小、颜色、位置等样式
element.style 行内样式操作
（1）、JS里面的样式采取小驼峰命名发，比如fontSize、backgroundClolor
（2）、JS修改style样式操作，产生的是行内样式，css权重比较高
element.className 类名样式操作
（1）、如果样式修改较多，可以采取操作类名的方式更改元素样式
（2）、class因为是个保留字，因此使用className来操作元素类名属性
（3）、className 会直接更改元素的类名，会覆盖原先的类名，如果想保留原先的类名，再添加更改的时，需要把原先类名加上
<body>
<div class="box">box</div>
<script>
// 需求1：点击div，div颜色变色，用行内样式实现
var box = document.querySelector(".box");
box.onclick = function () {
box.style.backgroundColor = "red";
};
// 需求2:鼠标移入，div的宽高发生变化，字体大小变化，字体加粗
box.onmouseover = function () {
// js里有个this的存在，在不同的情况下，指代不同的内容
//在事件函数里，this指代调用者，也就是指向事件源
this.className = "box1";
};
</script>
</body>2.5、排他思想
如果有同一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想算法
步骤：
清除所有元素的样式
给当前元素设置样式
注意顺序不能颠倒
<body>
<!-- 需求：给当前点击的按钮，添加背景色 -->
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<script>
//1、获取到所有的按钮
var btns = document.querySelectorAll("button");
//2、通过循环，给所有的按钮绑定点击事件，处理函数
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
// 2.1清楚所有按钮的背景色
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = "";
}
//2.2
this.style.backgroundColor = "red";
};
}
</script>
</body>2.6、操作自定义属性
1、获取属性值：
方式一：element.属性 获取属性值（获取元素自身自带的属性，例如id，href，src等）
方式二：element.getAttribute('属性') 主要获取自定义的属性，我们程序员自己家的属性,也可以获取元素自带属性
2、设置属性值
方式一：element.属性='值' 设置属性值
方式二：element.setAttribute('属性','值') 设置自定义属性，也可以设置元素自带属性
3、移除某个属性
element.removeAttribute("属性"); 移除某个属性
<body>
<!-- 需求1：获取a标签对应的href属性值以及index属性值
需求2：设置a标签对应的href属性值为京东，以及修改index属性值为2
需求3：移除abc属性
-->
<a href="https://www.baidu.com/" index="1" abc="123">百度</a>
<br /><br />
<button id="btn1">获取</button>
<button id="btn2">设置</button>
<button id="btn3">移除</button>
<script>
var a = document.querySelector("a");
var btn1 = document.querySelector("#btn1");
var btn2 = document.querySelector("#btn2");
var btn3 = document.querySelector("#btn3");
btn1.onclick = function () {
// 需求1
console.log(a.href, "自带属性");
console.log(a.getAttribute("index"), "自定义属性");
console.log(a.getAttribute("href"), "自带属性");
};
btn2.onclick = function () {
// 需求2
a.href = "https://www.jd.com/";
a.setAttribute("index", "2");
};
btn3.onclick = function () {
// 需求3
a.removeAttribute("abc");
};
</script>
</body>4、设置h5自定义属性
为了区分自定义属性，还是元素自带属性
H5给我们新增了自定义属性规范：
H5规定自定义属性以data-开头作为属性名并附值
获取自定义属性
方式一：element.getAttribute('属性')
方式二：element.dataset.去除掉data-的属性名
<body>
<div data-index="abc" data-last-name="王"></div>
<script>
var div = document.querySelector("div");
//设置自定义属性
div.setAttribute("data-id", "hello");
//获取自定义属性
//方式一：element.getAttribute("自定义属性名")
console.log(div.getAttribute("data-index"));
//方式二：element.dataset.属性名
console.log(div.dataset); //得到一个对象
console.log(div.dataset.index); //读取对象
console.log(div.dataset["id"]); //读取对象
console.log(div.dataset.lastName); //驼峰命名法读取
</script>
</body>