事件冒泡与事件铺获的解析
面向对象：
1.单例模式
2.工厂模式
3.构造函数 （1，2，3的目的都是生成对象）
js天生自带的类 object（基类）
子类：function（函数） array（数组） number（数字） math（数字） string（字符串） RegExp（正则） Boolean（布尔） date（日期）
1。事件对象
浏览器客户端的行为都称为事件
所有的事件都是天生自带的不需要我们去绑定，只需要我们去触发
通过obj.事件名=function（）{}
事件名有：onclick(点击) onmouseenter(鼠标进入) onmouseover(鼠标悬浮) onmouseleave(鼠标离开) onfocus(表单聚焦) onblur(失去焦点) onmouseout(鼠标移除) onmousemove(鼠标移动) onmousedown(鼠标按下) onmouseup(鼠标抬起) onchange(表单内容修改) onload(浏览器加载完成) count(计数器)
当用户触发一个事件是，浏览器所有的详细信息都存在一个叫event的对象上，我们把他叫事件对象
如果没有写这个变量，直接输入变量，结果为undefined，那这个变量就是关键字
所有事件绑定一个方法，天生自带一个event的参数
鼠标的坐标：
event.clientX
event.clientY
event的兼容性
在chrome下event是undefined；
在ie低版本下是null ie低版本又称非标准流：主要是针对ie9以下的低版本
火狐下会报错
所以event的最终解决办法（写法）
document.onclick=function(e){
var e=e||window.event
}
事件冒泡机制
当给父元素的同一事件绑定方法时，触发了子元素身上的事件，执行完毕之后，也会触发父元素相同事件，这种传播机制叫事件冒泡；
取消事件冒泡：
event对象有个属性叫cancelBubble,默认值是false 改成true 就取消了当前冒泡
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#a{
width:500px;
height:500px;
background:red;
}
#b{
width:300px;
height:300px;
background:blue;
}
#c{
width:100px;
height:100px;
background:black;
}
</style>
</head>
<body>
<div id="a">
<div id="b">
<div id="c">
</div>
</div>
</div>
</body>
</html>
<script>
var a=document.getElementById("a")
var b=document.getElementById("b")
var c=document.getElementById("c")
a.onclick=function(){
alert(10)
}
b.onclick=function(){
event.cancelBubble=true; //取消事件冒泡
alert(20)
}
c.onclick=function(){
event.cancelBubble=true; //取消事件冒泡
alert(30)
}
</script>
3.事件捕获
ie8及ie8以下没有事件捕获
给一个元素绑定事件，普通的写法是
obj.onclick=function(){}
obj.onclick=function(){} (这就相当于给obj的onclick属性赋值一个道理，这种写法有一点不好，后者会将前面覆盖掉)
事件绑定的第二种写法
标准浏览器用 addEventListener() 这个方法；
ie低版本用 attachEvent（） 这个方法；
addEventListener(参数1，参数2，参数3)
参数1，事件名 （去掉on）
参数2，事件函数
参数3，布尔值，代表捕获不捕获 默认false 不捕获但是冒泡
事件捕获（先触发父级，在触发子级）
1.ie低版本没有
2.普通事件绑定写法没有捕获
事件捕获
案例：
<script>
var a=document.getElementById("a");
var b=document.getElementById("b");
var c=document.getElementById("c")
a.addEventListener("click",function(){
alert(10)
},true);
b.addEventListener("click",function(){
alert(30)
},true);
c.addEventListener("click",function(){
alert(50)
},true);
</script>
给父子元素用addEventListener() 绑定同一个事件，当触发子元素身上的事件，会先触发父元素然后在传递给子元素，这种传播机制叫事件捕获
（普通事件写法不存在事件捕获的） （冒泡和铺获不能同时出现）
attachEvent() 和 addEventlistener() 两者的区别？
1. attachEvent 只用在IE8以下包括ie8；
addEventListener 只用在标准浏览器；
2.attachEvent 的事件名带on
addEventListener 事件名不带on
3.attachEvent 函数里面的this是window
addEventListener 函数里面的this是当前元素对象
4.attachEvent 只有冒泡，没有捕获
addEventListener 有冒泡也有捕获
4.call（）和apply（）
call和apply就是改变函数里面的this指向的方法 xxx.call() 或xxx.apply()
特别强调 xxx必须是function （普通函数，类，构造函数）
call只改变函数的 this
call（）中第一个参数是null的时候，函数里的this还是指向原来的，不变
所有事件都是异步的
获取元素的另一种写法：
案例：
var $=function(idname){
return document.getElementById(idname)
}
$("a").onclick=function(){
this.style.background="blue";
}
