Javascript中的事件处理（事件注册、删除、委托）
一、Javascript中的事件处理
1、事件 ：用户进行的某种操作
2、事件源：产生（触发 ）事件的对象
3、事件处理程序（事件处理函数 ）：当事件被触发后所执行的操作（代码）
4、事件的注册：让浏览器对象能够识别事件
（1）传统的方式注册 ：
元素对象.事件名 = function（）{
事件处理程序
}
特点：事件具有唯一性， 同一个元素同一个事件只能注册一个处理函数 ，后面注册的函数会将前面注册的函数覆盖掉。
（2）事件监听方式：可以给同一个DOM对象同时注册多个事件处理函数（程序）
DOM对象.addEventListener(type,callback,[capture]);
type:事件类型（如click,change,mouserover)
callback：事件处理程序（函数）
capture：可选参数，默认值为false，表示在事件冒泡阶段进行处理，true，表示在事件捕获节点进行处理。
var btn2 = document.querySelector('#btn2')
btn2.addEventListener('click',function(){
alert('标准方式注册事件')
},false);5、事件的删除（移除）
（1）传统方式：DOM对象.事件名 = null;
(2)早期版本的IE浏览器：DOM对象.dataEven（type，callback）；
（3）标准方式：DOM对象.removeEventListener（type，callback）；
6、DOM事件流：是当事件发生时，会在事件发生的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个过程称之为事件流。
（1）捕获方式：网景公司
（2）冒泡方式：微软公司
（3）先捕获后冒泡：W3C规定的事件流方式
7、事件对象（event）：是一个对象：封装了跟事件有关的所有数据；只有当事件发生时才存在，有系统总督创建。是事件处理程序（函数）的默认参数
事件对象的两个属性
（1）e.target:返回触发事件的对象
（2）e.type:事件的类型
btn2.addEventListener('click',function(event){
console.log("触发事件的对象",event.target)
console.log("事件的类型：",event.type)
},false);
（1）e.stopPropagation():阻止事件冒泡
（2）e.preventDefault:阻止默认事件
var link = document.querySelector('a');
link.addEventListener('click',function(event){
event.preventDefault();
})8、事件委托：不给子元素注册事件，给父元素注册事件，
- 西安邮电大学
- 西安财经大学
- 西安石油大学
- 西安科技大学
9、常用事件：
（1）禁止鼠标右键菜单 ： contextmenu
document.addEventListener('contextmenu',function(e){
e.preventDefault();
})（2）禁止鼠标选中 ：selectstart
document.addEventListener('selectstart',function(e){
e.preventDefault();
})10、鼠标事件对象（MouseEvent）的位置属性
（1）clientX：鼠标指针位于当前浏览器窗口的x坐标（水平位置）
（2）clientY：鼠标指针位于当前浏览器窗口的y坐标（垂直位置）
（3）pageX：鼠标指针位于文档的x坐标
（4）pageY：鼠标指针位于文档的y坐标
（5）screenX：鼠标位于屏幕的x坐标
（6）screenY：鼠标位于屏幕的y坐标
案例：鼠标在页面移动时，在指针旁边显示鼠标的坐标值
11、 键盘事件
（1）keypress：当键盘的某个键被按下时触发，不能 识别功能键；保存到的是ASCII值；区分字母大小写；
（2）keydown：键盘按钮被按下时触发；保存点是按键的虚拟键码；不区分字母大小写；
（3) keyup:键盘按键松开时触发；不区分字母大小写；
案例一：
搜素：
案例二：
12、键盘事件对象：KeyBoardEvent