js学习-10（事件）

什么是事件

事件：

​ 指的是文档或浏览器窗口中发生的一些特定的交互 瞬间。对于web应用，主要的事件有：点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。

JavaScript是以事件驱动为核心 的一门语言。JavaScript和HTML之间的交互式通过事件实现的。

事件的三要素：

事件的三要素：

事件源、事件、事件驱动程序。

事件源： 引发后续事件的html标签。

事件： js所定义好的。比如：鼠标单击onclick、鼠标双击ondbclick、获得焦点onfocus等等。

事件驱动程序： 对样式和html的操作，即DOM。

常见的事件：

时间名	说明
onclick	鼠标单击
ondbclick	鼠标双击
onkeyup	按下并释放键盘上的一个键触发
onchange	文本内容或下拉菜单中的选项发生改变
onfocus	获得焦点，表示文本框等获得鼠标光标
onblur	失去焦点，表示文本框等失去鼠标光标
onmouseover	鼠标悬停，即鼠标停留在图片等的上方
onmouseout	鼠标移出，即离开图片等所在的区域
onload	网页文档加载事件
onunload	关闭网页时
onsubmit	表单提交事件
onreset	重置表单时

事件的代码书写步骤：【重要！】

（1）获取事件源：document.getElementById(“box”); document.querySelect(“box”)

（2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };

（3）书写事件驱动程序：关于DOM的操作。

1、获得事件源的方式

获得事件源的常见方式：

 //方式一：通过id获取单个标签
var div1 = document.getElementById("box1");     

  //方式二：通过 标签名 获得 标签数组，所以有s
var arr1 = document.getElementsByTagName("div");   

//方式三：通过 类名 获得 标签数组，所以有s
var arr2 = document.getElementsByClassName("hehe");  

//更加常用的方式
var div1 = document.querySelector(".box1");   //参数是选择器的名  
var div1 = document.querySelectorAll(".box");

2、绑定事件的方式

方式一：直接绑定匿名函数

<div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.querySelector("box1");
    //绑定事件的第一种方式
    div1.onclick = function () {
   
        alert("我是弹出的内容");
    }
</script>

方式二：先单独定义函数，再绑定

 <div id="box1" ></div>

<script type="text/javascript">
    var div1 = document