DOM事件、事件冒泡、捕获、代理
1. 什么是事件
事件是某个行为或者触发，比如点击、鼠标移动
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当用户触发按键时...
2. 常用的事件
onclick:当点击时操作
document.getElementById("myBtn").onclick = function(){
document.getElementById("p1").innerHTML = new Date();
}
onchange：当对象发生变化时，可使用于：<input>/<select>/<texarea>
document.getElementById("input1").onchange = function(){
this.value = this.value.toUpperCase();
}
onmouseover、onmouseleave:当鼠标移入和移除节点时操作
var myname = document.getElementById("name"); myname.onmouseover = function(e){
//console.log(e); this.style.color = "red"; }
onmousemove 事件在鼠标移动到 div 元素上时触发。
mouseenter 事件中有在鼠标指针进入 div 元素时触发。
onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和 span)。
'onmousedown、onmouseup`:鼠标点下不松手时是mousedown，松开手后是mouseup。点击是按下和松开的两个过程之和，mousedown+mouseup=click
document.getElementById('div2').onmousedown=function(){
this.innerHTML="鼠标按下了"; };
document.getElementById('div2').onmouseup=function(){
this.innerHTML="鼠标松开了"; }
resize：当窗口大小变化时
window.onresize=function(）{document.getElementById('p4').innerHTML='width:'+window.screen.width+",height:"+width.screen.height;
}
更多事件参考 这里
3、this的简单使用
在匿名函数内，this代表绑定事件的元素（自己）######
document.getElementById("btn1").click = function(){
this.style.backgroundColor = "red";
};
4、查看事件对象
事件也是个对象，被做为函数的参数传进去
document.getElementById("btn5").onclick=function(e){
console.log(e); // 事件对象
console.log(e.target); //发出事件的元素
console.log(e.x); //事件的位置
console.log(e.type); //事件的类型
}
5、事件绑定和解除绑定
addEventListener和removeEventListener
注意：早期的ie使用element.attachEvent(event, function)和 element.detachEvent(event, function);
addEventListener() 方法用于向指定元素添加事件处理函数。
addEventListener() 方法添加的事件处理函数不会覆盖已存在的事件处理函数。你可以向一个元素添加多个事件处理函数。比如对一个元素添加两个 "click" 事件。
removeEventListener() 方法来移除事件的监听。
document.getElementById("myBtn").addEventListener(事件, 回调函数);
6、事件冒泡和捕获
事件传递有两种方式：冒泡与捕获。
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件
事件冒泡：
document.getElementById('div6').onclick=function(){
alert('div6 click');
}
document.getElementById('btn6').onclick=function(){
alert('btn6 click');
}
addEventListener(event, function, useCapture); useCapture默认值为 false, 是冒泡传递。当useCapture值为 true 时, 事件使用捕获传递。
事件捕获：
document.getElementById('div7').addEventListener('click',function(){ alert('div7 click'); }, true);
document.getElementById('btn7').addEventListener('click', function(){ alert('btn7 click');
}, true);
7、冒泡阻止和取消默认事件
冒泡阻止：e.stopPropagation()
该方法阻止事件冒泡，父元素监听不再监听到事件。
document.getElementById('div8').onclick=function(){ alert('div8 click'); //事件被阻断了，不再响应
}
document.getElementById('btn8').onclick=function(evt){ evt.stopPropagation(); alert('btn8 click');
}
取消默认事件: e.preventDefault();
该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作。
<a id="link" href="http://www.baidu.com">百度</a>
<script type="text/javascript"> document.getElementById('link').onclick=function(e){
e.preventDefault();
}
</script>
