JS和HTML的交互是通过事件来实现的。JS采用异步事件驱动编程模型，当文档，浏览器，元素或者与之相关的对象发生特定事情时，浏览器会产生事件。如果JS关注特定类型事件，那么它可以注册当这类事件发生时要调用的句柄
- 事件是某个行为或者触发，比如点击，鼠标移动。
- 当用户点击鼠标时
- 当网页已经加载时
- 当图像已经加载时
- 当鼠标移动到元素上时
- 当用户触发按键时
事件流
事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的div先触发click事件还是外层先触发？
目前主要有3种模型：
1，IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素。
2，Netscape的事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和时间冒泡相反
3，DOM事件流：DOM2级事件规定事件流包括三个阶段，事件部或阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是目标接收事件，最后是冒泡阶段。
这种分歧是很常见的，举例来说，某个地方出现了抢劫事件，我们有多种处理方式：
1，村里先发现，报告给乡里，乡里报告给县城，县城报告给市里。。
2，市里先知道这个事件，然后交代给县城怎么处理，县城交代给乡里处理，乡里交给村里处理。。。
Opera，Firefox，Chrome，Safari都支持DOM事件流，IE不支持事件流，只支持事件冒泡。
举例说明：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>Click me!</div>
</body>
</html>
对于如上结构，点击div区域有：
1.png
- 事件捕获和事件冒泡的理解举例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
.container {
width: 200px;
height: 200px;
border: 1px solid;
}
.box {
width: 100px;
height: 100px;
background: #8ffe98;
}
</style>
<div class="container">
<div class="box">
<button>Click me!</button>
</div>
</div>
<script>
// document.body.addEventListener('click',function () {
// console.log('body clicked');
// });
// document.querySelector('.container').addEventListener('click',function () {
// console.log('container clicked;')
// })
// document.querySelector('.box').addEventListener('click',function () {
// console.log('box clicked;')
// })
// document.querySelector('.box button').addEventListener('click',function () {
// console.log('button clicked;')
// })
// 点击button时输出结果依次为：
// button clicked;
// box clicked;
// container clicked;
// body clicked
// 这是因为addEventListener的第三个参数默认是false，即忽略事件捕获阶段，从事件冒泡阶段开始
document.body.addEventListener('click',function () {
console.log('body clicked');
},true);
document.querySelector('.container').addEventListener('click',function () {
console.log('container clicked;')
},true)
document.querySelector('.box').addEventListener('click',function () {
console.log('box clicked;')
},true)
document.querySelector('.box button').addEventListener('click',function () {
console.log('button clicked;')
},true)
// 当设置了属性为true的时候，忽略了事件的冒泡阶段，此时输出结果就为：
// body clicked
// container clicked;
// box clicked;
// button clicked;
</script>
</body>
</html>
事件处理程序
事件侦听者（listener），事件就是用户或浏览器自身执行的某种动作。比如click，load，mouseover等，都是事件类型（俗称事件名称），而响应某个事件的方法就叫做事件处理程序或者事件监听器
也就是我们需要提前定义好某些事件发生了该怎么处理，这个过程叫做绑定事件处理程序。
给元素添加事件处理程序的方法：
HTML内联方式：
元素支持的每个事件都可以使用一个相应事件处理程序同名的HTML属性指定。这个值的属性是可执行的JS代码，我们可以为button添加click事件处理程序。
<input type="button" value="click me!" onclick="alert('clicked!');">JavaScript指定事件处理程序
通过JS指定事件处理程序就是吧一个方法赋值给一个元素的事件处理程序。
<input type="button" value="click me!">
<script>
var btn = document.querySelector('input');
btn.onclick = function () {
alert('clicked!');
}
</script>
这样处理，事件处理程序被认为是元素的方法，事件处理程序在元素的作用域下运行，this就是当前元素。
这样删除事件处理程序时，只需要设置onclick属性为null
-
DOM2事件处理程序
DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：
- addEventListener
- removeEventListener
所有的DOM节点都包含这两个方法，并且他们都接收3个参数：
1,事件类型
2,事件处理方法
3，布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理，默认为false
所以针对刚才的例子，还可以写为：
<input type="button" value="click me!">
<script>
var btn = document.querySelector('input');
btn.addEventListener('click',function() {
alert('clicked!!!');
});
</script>
使用addEventListener的好处是可以为事件添加多个程序，因为本质上只是元素在调用函数，可以多次调用，每次传入不同的参数。而JS方法实现的话本质上是给元素的属性赋值，不能添加多个事件处理程序，后面赋值的属性会覆盖前面的。
要移除事件处理程序可以使用removeEventListener,移除时参数与添加的时候相同，这就意味着刚才我们添加的匿名函数无法移除，因为匿名函数虽然方法体一样，但是句柄不相同，所以当我们有移除事件处理程序的时候可以这样写：
<input type="button" value="click me!">
<script>
var btn = document.querySelector('input');
var handler = function () {
alert('clicked!!');
}
// function handler () {
// alert('c');
// }
btn.addEventListener('click',handler);
//要移除click事件，可以这么写
btn.removeEventListener('click',handler);
</script>
关于this和事件的区别
<body>
<div class="box">
<button>click me</button>
</div>
<script>
var btn = document.querySelector('button');
var box = document.querySelector('.box');
btn.addEventListener('click',function (e) {
console.log(this); //<button>click me</button>
console.log(this.innerText);//click me
console.log(e);//MouseEvent {isTrusted: true, screenX: 40, screenY: 80, clientX: 40, clientY: 14, …}
console.log(e.target); // <button>click me</button>
});
box.addEventListener('click',function (e) {
console.log(this); //<div class="box"><button>click me</button></div>
console.log(this.innerText);//click me
console.log(e);//MouseEvent {isTrusted: true, screenX: 40, screenY: 80, clientX: 40, clientY: 14, …}
console.log(e.target); //<button>click me</button>
//这时候的this和e.target就不一样了，this表示谁监听到的就是谁，e.target事件真实的原始触发点，即事件最终到达的元素
});
</script>
</body>
事件兼容，IE兼容
老IE不支持addEventListener()和removeEventListener()，但是有两个类似的方法：
1,attachEvent
2,detachEvent
这两方法都接收2个相同的参数
1，事件处理程序名称
2，事件处理程序方法
由于IE只支持时间冒泡，所以添加的程序会被添加到冒泡阶段，使用attachEvent添加事件处理程序可以如下：
<body>
<div class="box">
<button id="btn">click me</button>
</div>
<script>
var btn = document.querySelector('#btn');
var box = document.querySelector('.box');
var handler = function () {
console.log(this.id); //undefined
}
btn.attachEvent('onclick',handler); // 注意是onclick，attachEvent没有第三个参数,因为IE只支持事件冒泡
</script>
</body>
attachEvent()和addEventListener()的区别
1，参数个数不相同，IE只支持事件冒泡，所以attachEvent只有两个参数。
2，第一个参数意义不同addEventListener()第一个参数是事件类型（比如click,load）,而attachEvent()的第一个参数指明的是事件处理函数名称（onclick，onload）
3，事件处理程序的作用域不同，addEventListener()的作用域是元素本身，this指的是触发元素，而attachEvent()事件处理程序会在全局变量内运行，this是window，所以刚才例子会返回undefined，而不是元素id
4，为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener()添加会按照顺序执行，而attachEvent()添加多个事件处理程序时无规律（添加的多了的话），所以添加多个的时候，如果依赖函数执行顺序，需要自己处理。取消事件冒泡 e.stopPropagation()
var btn = document.querySelector('#btn');
var box = document.querySelector('.box');
box.addEventListener('click',function (e) {
e.stopPropagation();//阻止了事件的继续冒泡
})
- 取消默认事件
<a href="http://www.baidu.com">link</a>
var link = document.querySelector('a');
link.addEventListener('click',function(e) {
e.preventDefault(); // 阻止了默认的跳转
})
事件代理
创建了新节点，不需要另外重复绑定事件，给父节点绑定事件，使用target而不是this来获取点击节点。 还要注意点击到父节点而没有点击到目标节点的情况。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
.container {
margin: 30px auto;
width: 900px;
}
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.container li {
border: 1px solid #cccccc;
line-height: 1.5;
}
#show {
background: #cccccc;
}
</style>
<div class="container">
<ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
</ul>
<input type="text" id="add-ipt"><button id="btn">添加</button>
<div id="show"></div>
</div>
</body>
<script>
var liNodes = document.querySelectorAll('.container ul li');
var show = document.querySelector('#show');
var add = document.querySelector('#btn');
var ul = document.querySelector('ul');
var container = document.querySelector('.container');
var addIpt = document.querySelector('#add-ipt');
// liNodes.forEach(function (node) {
// node.addEventListener('click',function () {
// console.log(node);
// show.innerText = this.innerText;
// })
// })
// add.addEventListener('click',function() {
// var text = document.createElement('li');
// text.innerText = addIpt.value;
// ul.appendChild(text);
// text.addEventListener('click',function () {//新增的节点没有绑定事件，点击不会展示在show里，所以需要另行绑定\
// show.innerText = this.innerText; //但是这样代码很不合理，可以使用事件代理
// })
// })
// 事件代理的写法
// 不是给每个节点绑定事件，而是给其父元素绑定事件，不用this而是用target，这样新建的节点也能使用target
ul.addEventListener('click',function (e) {
var target = e.target; // 不用this而使用target
// 存在问题，点ul不点li会直接出现所有ul的内容
// 所以进行判断，是否是点击到了li上
if (target.tagName.toLowerCase() === 'li') {
show.innerText = target.innerText;
}
})
add.addEventListener('click',function () {
var text = document.createElement('li');
text.innerText = addIpt.value;
ul.appendChild(text);
})
</script>
</html>
常见事件用法
mouseover和mouseenter的区别：
- 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
- 只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
function $(id) {
return document.querySelector(id);
}
function $$(className) {
return document.querySelectorAll(className);
}
// 常见事件
// click dbclick
$('#btn').addEventListener('click',function () {
console.log(this);
})
$('#btn1').addEventListener('dbclick',function () {
console.log(this);
})
// mouseover mouseout
$('#ct').addEventListener('mouseover',function () { //mouseover如果里面还有子元素，每次碰到子元素再回来就会再触发一次
console.log(1);
window.node = this; //由于是回调函数，提前this存起来便于输出
console.log(node); // this仍然代表这个容器
this.classList.add('hover'); //要改变样式，可以css里面写个样式应用
})
$('#ct').addEventListener('mouseover',function () { //和mouseover相对的是mouseout
console.log(2);
window.node = this;
console.log(node);
this.classList.remove('hover'); //鼠标离开时，去除样式
})
// mouseenter mouseleave
// 一般使用mouseenter mouseleave而不是使用mouseover mouseout
$('#ct').addEventListener('mouseenter',function () {
console.log(3);
window.node = this;
console.log(node);
this.classList.add('hover');
})
$('#ct').addEventListener('mouseleave',function () {
console.log(4);
window.node = this;
console.log(node);
this.classList.remove('hover');
})
// input获取焦点focus和失去焦点blur,keyup,change
$('#input-name').addEventListener('focus',function () {
console.log(1);
console.log(this.value);
})
$('#input-name').addEventListener('blur',function () {
console.log(2);
console.log(this.value);
})
$('#input-name').addEventListener('keyup',function () { //键盘松开
console.log(this.value);
this.value = this.value.toUpperCase();
})
$('#input-name').addEventListener('change',function () { //里面内容发生改变时，可以看做是一个blur加上一个判断是否改变的事件
console.log(this.value);
this.value = this.value.toUpperCase();
})
// form的表单提交验证
$('#form').addEventListener('submit',function (e) {
e.preventDefault();//阻止默认提交
if (/\w{6,20}$/.test($('#username').value)) {
$('#form').submit(); //验证成功后提交
}
else {
$('.msg').innerText = '出错了';
$('.msg').style.display = 'block';
console.log('No Submit');
}
})
// scroll
window.addEventListener('scroll',function (e) { //其实稍微滚动一下就会执行很多次
console.log(1);
})
// load
