JS中的事件

事件的概念： 

JS事件是由访问 Web 页面的用户引起的一系列操作。当用户执行某些操作的时候，再去执行一系列代码，或者用来获取事件的详细信息，如鼠标位置、键盘按键等…
        JS可以处理的事件类型为：鼠标事件、键盘事件、HTML事件所有的事件处理函数都会都有两个部分组成，即：on + 事件名称
 

事件组成部分：

1.事件源：用户通过哪个标签触发的行为 - 标签

2.事件类型 - 用户的行为的类型

3.事件处理程序 - 函数代码

事件语法：

标签.on事件类型 = 函数代码  ==>  内联代码中绑定事件

事件可以在行内绑定：

<标签 on事件类型="js代码/函数的调用"></标签>

function fn() {

   alert(666)

 }

---

鼠标事件：

单击 - click

双击 - dblclick

移入 - mouseover

移出 - mouseout

mouseover和mouseout，当父子标签同时绑定后，触发子标签的事件，同时会触发父标签的事件

移入 - mouseenter

移出 - mouseleave

移动 - mousemove - 只要鼠标移动就会触发的事件，移动一点点，会触发很多次

按下 - mousedown

弹起 - mouseup

mousedown和mouseup，事件在触发的时候，鼠标的任意按键都可以触发

右击 - contextmenu

滚轮滚动 - mousewheel - 滚动一次滚轮可能会触发很多次

---

键盘事件：

keydown - 键盘按下

keyup - 键盘弹起

keypress - 键盘按下

因为按下事件，键盘按住后会一直触发这个事件，所以我们一般在项目中不用按下事件，通常使用的是弹起事件

---

window事件：

window.onload = function() {

    当网页中所有资源都加载完成的时候会触发事件

}

事件只触发一次

window.onscroll = function() {

    只要滚动条滚动了，就会触发的事件

}

滚动一点点滚动条，就会触发很多次，频繁的触发

window.onresize = funnction() {

    只要浏览器大小发生改变就会触发的事件 - 做媒体查询：通过这个事件，判断浏览器窗口大小，给标签添加不同的样式

}

只要浏览器改变一点点，就会触发很多次

---

表单事件

获取焦点 - focus

失去焦点 - blur

下拉框选项改变 - change

change事件可以适用于所有的表单元素

提交表单 - submit

只要文本框内容发生改变就会触发的事件 - input

 文本框的change事件 - 失去焦点后且内容发生了改变会触发

 text.onchange = function() {

   console.log('文本框改变了');

}

 单选框的change事件 - 只要我们改变了被选中的单选框就会触发事件

 var radios = document.querySelectorAll('[name="sex"]')

 for(var a=0; a<radios.length; a++) {

    radios[a].onchange = function() {

        console.log('单选框改变了');

改变选项后，获取到当前选中的单选框的value值

         console.log(this.value);

     }

 }

下拉框的change事件 - 当下拉框的选项发生改变后会触发的事件

 var province = document.querySelector('[name="province"]')

 下拉框的change事件，事件源一定是select

province.onchange = function() {

   console.log('下拉框选项改变了');

获取当前被选中的option的value值 - 下拉框.value

     console.log( province.value );

 当option没有value属性的时候，获取到的就是option的innerText

 }

---

文本域的change事件 - 当文本域失去焦点且内容改变了会触发

 var message = document.querySelector('textarea')

 message.onchange = function() {

   console.log('文本域改变了');

 }

---

 文件选择器的change事件 - 当选择的文件发生了变化会触发

var file = document.querySelector('[type="file"]')

 file.onchange = function() {

     console.log('文件选择器发生了改变');

 }

---

 submit表示表单提交 - 只有form标签才能提交表单 - submit事件只能给form标签

 var form = document.querySelector('form')

 form.onsubmit = function() {

    alert('将要提交表单了')

 }

submit事件的事件源一定是form标签；这个事件什么时候触发？点击了提交按钮后会触发。必须有form和提交按钮，给form绑定submit事件，通过点击提交按钮触发事件。

---

input事件 - 监听文本框内容变化的

text.oninput = function() {

    console.log(this.value);

}

---