js之DOM事件
目录
一、元素创建事件的两种方式
1、传统方式
2、事件监听 addEventListener W3C推荐
二、删除事件
三、DOM事件流
四、什么是事件对象
1、e.target和this的区别
2、阻止默认行为（比如不让a标签跳转）
3、阻止事件冒泡
五、事件委托
六、禁止选中和禁止右键菜单
七、获得鼠标在页面的坐标
案例：跟随鼠标移动
八、常用的键盘事件
案例：模拟京东按键输入内容
案例:模拟京东快递输入单号
一、元素创建事件的两种方式
1、传统方式
on开头的事件，事件的唯一性，同一个元素同一个事件只能设置一个处理函数，后面的覆盖前面的，下列代码只弹出2。
var btns = document.querySelectorAll('button');
btns[0].onclick = function() {
alert(1);
}
btns[0].onclick = function() {
alert(2);
}2、事件监听 addEventListener W3C推荐
element.addEventListener(type,listener,useCapture)
type:事件类型字符串 click mouseover 不用带on
listener:事件处理函数，事件发生时就会调用该函数
useCapture:可选参数，是一个布尔值，默认false
下列代码依次弹出22，33
btns[1].addEventListener('click', function() {
alert(22);
})
btns[1].addEventListener('click', function() {
alert(33);
})还可以这样写
btns[1].addEventListener('click', fn)
function fn() {
alert(22);
}attachEvent了解 IE9以前的
二、删除事件
removeEventListener
点击div就会弹出，需求是点击一次后不弹出了，删除这个事件。
//传统
var divs = document.querySelectorAll('div');
divs[0].onclick = function() {
alert(1);
divs[0].onclick = null;
}
//
divs[1].addEventListener('click', fn) //里面的fn不需要调用加小括号
function fn() {
alert(2);
divs[1].removeEventListener('click', fn);
}三、DOM事件流
事件流描述的是页面接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程叫做DOM事件流。
分为三个阶段
捕获阶段 逐级
当前目标阶段
冒泡阶段 向上传播
js代码只能执行捕获或者冒泡阶段之一，onclick和attachEvent（）只能得到冒泡阶段
//捕获阶段 如果第三个参数是true 则处于捕获阶段
// var son = document.querySelector('.son')
// son.addEventListener('click', function() {
// alert('son');
// }, true)
// var fa = document.querySelector('.father')
// fa.addEventListener('click', function() {
// alert('fa');
// }, true)
//冒泡阶段 如果第三个参数false 或者省略 gengguanzhu
var son = document.querySelector('.son')
son.addEventListener('click', function() {
alert('son');
}, false)
var fa = document.querySelector('.father')
fa.addEventListener('click', function() {
alert('fa');
}, false)
document.addEventListener('click', function() {
alert('ss');
})捕获阶段依次弹出fa,son
冒泡阶段依次弹出ss fa son(第三个参数为false或者省略的时候）
四、什么是事件对象
event就是一个事件对象，监听函数小括号里面的，可以当形式参数看，事件对象只有有了事件才会存在，就是系统自动创建的，不需要我们传递参数
事件对象是我们一系列相关事件的集合，跟事件相关的，比如鼠标点击就包含了鼠标的相关信息，鼠标坐标等，如果是键盘操作，就会包含按下了哪个键。
div.addEventListener('click',function(event){
console.log(event);
//这个事件对象我们可以自己命名，event evt e
//兼容性问题 ie678通过window.eventb
})
1、e.target和this的区别
e.target返回的是触发事件的对象。this返回的是绑定事件的元素
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// this指向ul
console.log(this); //点击li 打印出ul
console.log(e.target); //打印出li 点击的li
})2、阻止默认行为（比如不让a标签跳转）
e.preventDefault()//DOM推荐的 标准写法
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault(); //dom推荐的 标准写法
})
//传统
// a.onclick = function(e){
// e.preventDefault();//1.
// //低版本
// e.returnValue;//2方法
// return false; //没有兼容 特点 return 后面的不执行了
// }3、阻止事件冒泡
e.stopPropagation()
就不会往上执行了，只会弹出son
// e.cancelBubble = true;//非标准
// if(e && e.stopPropagation){
// e.stopPropagation();
// }else {
// window.event.cancelBubble = true;
// }兼容性写法五、事件委托
原理：不给每个子节点单独设置事件监听器，而是事件监听器设置在父节点上，然后利用冒泡原理影响每个子节点，我们给父节点添加事件，当e.target能拿到触发事件的源头元素，利用冒泡原理，父元素的事件就会被触发。
传统的给每个li都绑定事件。
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', function() {
for (var i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'pink';
})
}利用事件委托，只需要给他们的父节点ul添加，每当e.target被点击，利用冒泡原理，就会触发ul的点击事件，然后再ul里通过e.target就能拿到真正触发事件的li。
ul.addEventListener('click', function(e) {
// alert('知否');
//排他思想
for (var i = 0; i < ul.children.length; i++) {
ul.children[i].style.backgroundColor = '';
}
// e.target可以得到我们点击的对象
e.target.style.backgroundColor = 'pink';
})六、禁止选中和禁止右键菜单
//禁止鼠标右键contextmenu
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
//禁止选中 selectstart 开始选中
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})七、获得鼠标在页面的坐标
document.addEventListener('click', function(e) {
console.log(e.clientX);
console.log(e.clientY);
//得到可视区范围内的坐标 不管有没有滚动条 鼠标在可视区、
console.log(e.pageX);
console.log(e.pageY);
//有滚动条的话，滚动了过后，可视区同一个位置，坐标会不一样
})案例：跟随鼠标移动
八、常用的键盘事件
keyup keydown keypress(和keydown类似，但是不能识别功能键，ctrl,shift...)
keyup弹起了 keydown和keypress都是按下了(特点：按下的时候触发，字还没进去）
执行顺序keydown,keypress,keyup
keyup和keydown不区分大小写，keypress区分
键盘事件对象中的keyCode属性可以得到相应按键的ASCII值
案例：模拟京东按键输入内容
focus()获得焦点
案例:模拟京东快递输入单号