day16-Dom事件操作
一、前言
之前我们用dom操作都是在标签上做一个事件属性，这个都是dom0的做法，而且很low，今天我们用dom1来实现我们想要实现的东西，而且很简单。从而要做到行为、样式、结构相分离的页面。
二、Dom事件操作
2.1、示例一：Dom0的操作
说明：就是在标签上添加一个onclick属性，然后赋值一个函数
<body>
<div id="i1" onclick="t1();">test</div> //采用在标签上使用onclick属性
<script>
function t1(){
var myDiv = document.getElementById("i1");
console.log(myDiv);
}
</script>
</body>
注意：这样使用，就无法是行为和结构相分离
2.2、示例一：Dom1的操作
说明：不在标签直接加属性，利用对象的方式，然后定义一个匿名函数的方式，形式调用。这样可以做到行为和结构相分离。
<body>
<div id="i1" onclick="t1();">test</div>
<script>
var myDiv = document.getElementById("i1");
myDiv.onclick = function(){ //对象的方式，然后定义匿名函数方式实现
console.log(myDiv);
}
</script>
</body>
这样做的好处就是：js和html相分离，耦合度很低。
三、复杂实例
之前我们没有看出来，用对象的方式有啥好处，而且这两个代码量差不多，下面我们就再举个例子来看看，有啥好处。
3.1、示例二：Dom0操作
说明：nomouseover：表示鼠标移动到某个标签事件。onmouseout：表示鼠标离开某个标签后的事件。
<body>
<table border="1" width="300px;">
<tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>3</td></tr> //定义nomouseover属性和onmouseout属性
<tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>3</td></tr>
<tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
function t1(n){
var myTrs = document.getElementsByTagName("tr")[n];
myTrs.style.backgroundColor = "red";
}
function t2(n){
var myTrs = document.getElementsByTagName("tr")[n];
myTrs.style.backgroundColor = "";
}
</script>
</body>
你看这样，如果我有1000行，10000行怎么办呐，我是不是应该每一个都添加一个事件属性，然后每一个都创建对应的函数呐。这样的话，就太low了。下面我们来看看，dom1是怎么处理的。
3.2、示例二：Dom1处理
说明：把nomouseover和nomouseout当做对象。
<body>
<table border="1" width="300px;">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
var myTrs = document.getElementsByTagName("tr");
for(var i=0;i<myTrs.length;i++){
myTrs[i].onmouseover = function(){
this.style.backgroundColor = "red"; //这边的this代指的是myTrs[i]
}
myTrs[i].onmouseout = function(){
this.style.backgroundColor = "";
}
}
</script>
</body>
哇哦，这种方式简直逆天了，简单多了，当然这边注意 this关键字作用： 谁调用这个函数，这个this就指向谁。
3.3、常用事件
onclick 当用户点击某个对象时调用的时间句柄 onfocus 元素获得某个焦点 onblur 元素失去焦点 onmouseover 鼠标移到某元素上 onmouseout 速表从某元素移开
目前为止我们最常用的就是这几个，其他的几个下面再看。
四、绑定事件方式总结
4.1、直接绑定
<标签 onclick="函数名()"></标签>
<script>
function 函数名(){}
</script>
4.2、先获取对象名绑定
document.getElementById("xx").onclick = function(){}
4.3、this关键字
说明：代指当前触发事件的标签
示例一：
<body>
<div onclick="t1(this);">test</div> //放在这边代指当前div标签
<script>
function t1(self){
//this 放在这里代指全局变量 window
var myDiv = self; //self代指当前点击标签
self.style.color = "red";
}
</script>
</body>
示例二：
<body>
<div id="i1" onclick="t1();">test</div>
<script>
var myDiv = document.getElementById("i1");
myDiv.onclick = function(){
this.style.color = "red"; //thiis 代指当前点击的标签
}
</script>
</body>
注意了：这边不能用 myDiv.style.color = "red";因为函数内部的作用域无法达到，在解释的时候就已经生成，所以只能用this代指当前点击的标签。
五、 另外一种绑定方式
需求：如果一个div标签上已经存在了一个onclick事件，但是我现在想在此div上再添加一个onclick事件，多输出内容，用什么方法呐？
5.1、传统方式
<body>
<div id="i1" onclick="t1();">test</div>
<script>
var myDiv = document.getElementById("i1");
myDiv.onclick = function(){
this.style.color = "red";
}
myDiv.onclick = function(){ //如果这样写的话，那上面的功能就会被替换调了，因为变量重新赋值了
console.log("shuaigaogao")
}
</script>
</body>
很显然是不行的，所以我们不能用这种方式。所以我们用w3c给我们提供的函数 addEventListener()
5.2、另外一种绑定方式
说明：用w3c 提供的函数 addEventListener() 来解决这个问题。addEventListener(事件名，匿名函数，事件模型)
<body>
<div id="i1">test</div>
<script>
var myDiv = document.getElementById("i1");
myDiv.addEventListener("click",function(){console.log("aaa")},false);
myDiv.addEventListener("click",function(){console.log("bbb")},false);
</script>
</body>
#输出
aaa
bbb
我们来说下这个事件模型吧，事件模型，分为true 和 false，分别为冒泡模型和捕捉模型。
