1.事件的概念

在js中的事件是：用户在页面上操作，然后外面要调用函数来处理。

比如：

1.点击了登录按钮，调用登录函数执行登录操作

2.鼠标拖动，调用函数实现拖动

事件触发：

用户在页面上操作（如点击按钮，鼠标话滚动，鼠标点击，鼠标松开，文本获取焦点等...）,就是事件触发。

2.事件的分类

javaScript可以处理的事件种类右三种：鼠标事件，键盘事件和HTML事件。

鼠标事件

页面所有元素都能触发鼠标事件；

onclick:点击事件

onclick = function() {
        console.log('单击了鼠标'); 
};

ondblclick:双击事件

ondblclick = function() {
        console.log('双击了鼠标'); 
};

onmousedown:按下鼠标不松开触发

onmousedown = function() {
        console.log('按下鼠标'); 
};

onmouseup:松开鼠标按钮时触发

onmouseup = function() {
        console.log('松开了鼠标'); 
};

onmouseover:鼠标移入某个元素触发

onmouseover = function() {
        console.log('鼠标移入了'); 
};

onmouseout:当鼠标移出某个元素触发

onmousemove = function() {
        console.log('鼠标移动了'); 
};

onmoouseenter:当鼠标移入某个元素那一刻触发

onmouseenter = function() {
        console.log('鼠标移入了'); 
};

onmouseleave:当书鼠标移出某个元素那一刻触发

onmouseleave = function() {
        console.log('鼠标移出了'); 
};

onmouseover与onmouseenter的区别是：

前者会影响子元素的触发事件，后者不会影响

键盘事件

keydow n：键盘按下 - 按住不松开一直触发

window.onkeypress = function() {
    console.log('键盘已按下');
}

keyup：键盘弹起 - 弹起的一瞬间，触发一次

window.onkeyup = function() {
    console.log('键盘点击结束');
}

keypress：敲击键盘，其实就是keydown - 按住不松开就一直触发

window.onkeypress = function() {
    console.log('键盘按住中');
}

表单事件

事件	描述
submit	提交表单
focus	获取焦点
blur	失去焦点
change	内容改变并失去焦点
input	input的value值改变

3.阻止事件冒泡事件和默认行为

事件流

事件流是描述的从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候，那么你点击其
中的一个元素，并不是只有当前被点击的元素会触发事件，而层叠在你点击范围的所有元素都会触发
事件。事件流包括两种模式：冒泡和捕获.

事件冒泡

事件冒泡是从里往外逐个触发，事件捕获，是从外往里逐个触发，现代的浏览器默认情况下都是事件
冒泡的模式。

冒泡传递事件

document.onclick=function(){ 
      console.log('我是 document'); 
}; 
document.documentElement.onclick=function() { 
      console.log('我是 html'); 
}; 
document.body.onclick= function(){ 
      console.log('我是 body'); 
};
document.getElementById('box').onclick=function() { 
      console.log('我是 div'); 
}; 
document.getElementsByTagName('input')[0].onclick= function(){
      console.log('我是 input'); 
};

阻止事件冒泡

e.stopPropagation()

阻止事件默认行为

e.preventDefault() //兼容问题
e.returnValue = false //兼容
return false //后续的代码是不会执行 放在最后面
e.preventDefault?e.preventDefault():e.return = false

4.事件委托

事件委托也叫事件代理（看站谁的角度），使用事件委托技术能避免对每个子节点添加事件监听,相反把事件监听委托给父元素即可，这样可提高绑定事件的性能。

var ul = document.querySelector('ul')
ul.onclick = function(e) {
    console.log(e.target.innerText);
}

使用事件委托的好处：

提高性能(事件委托中并没有使用循环给每个节点设置事件，只给一个父元素ul绑定事件)
后续动态添加的节点也有事件的处理

注意：事件委托底层就是通过事件冒泡来完成的，先触发父元素的事件，在通过事件对象的target属性找到具体的目标元素，进而在处理目标元素要执行的业务逻辑。

JavaScript的各类事件