JS浏览器事件
一、事件
1、什么是事件
事件是可以被JavaScript侦测到的行为。
2、常用事件
onClick 单击事件
onMouseOver 鼠标经过事件
onMouseOut 鼠标移出事件
onChange 文本内容改变事件
onSelect 文本框选中事件
onFocus 光标聚集事件
onBlur 移开光标事件
onLoad 网页加载事件
onUnload 关闭网页事件
二、事件流
1、事件流：
描述的是在网页中接受事件的顺序
2、事件冒泡：
由最具体的元素接受，然后逐级向上传播至最不具体的元素的节点（文档）
3、事件捕获：
最不具体的节点先接受事件，而最具体的节点应该是最后接受事件
三、事件处理
1、HTML事件处理：直接添加到HTML结构中
<body>
<button id="btn" onclik ="btnCliked">按钮</button> //直接添加到HTML结构中
<script>
var mytime=setInterval(function(){
getTime;
},1000);
function getTime(){
var d=new Date();
var t=d.toLocaleDateString();
document.getElementById("ptime").innerHTML=t;
}
</script>
</body>
这一方法缺点：修改时麻烦，需要同时修改两处
2、DOM0级事件处理：把一个函数赋值给一个事件处理程序属性
<body>
<button id="btn">按钮</button>
<script>
var btn=document.getElementById("btn");
btn.onclick=function (){alert("DOM0级事件处理")};
btn.onclick=null; //清除DOM0级事件
</script>
</body>
这一方法的缺点是，运行多个事件时，新事件会覆盖旧事件
3、DOM2级事件处理：addEventListener("事件名","事件处理函数","布尔值")
ture:事件捕获
false:事件冒泡
removeEventListener() 移除监听事件
<body>
<button id="btn">按钮</button>
<script>
var btn=document.getElementById("btn");
btn.addEventListener("click",demo1);
btn.addEventListener("click",demo2);
btn.addEventListener("click",demo3);
function demo1(){
alert("DOM2级事件处理程序1")
}
function demo2(){
alert("DOM2级事件处理程序2")
}
function demo3(){
alert("DOM2级事件处理程序3")
}
btn.removeEventListener("click",demo2)
</script>
</body>
这一方法可以依次执行多个事件，也可移除其中一个事件。
4、IE事件处理程序：
attchEvent
detachEvent
用法和addEventListener相同，只是用在ie8以下的浏览器
下面是一个兼容各种浏览器的监听事件代码：
<body>
<button id="btn">按钮</button>
<script>
var btn=document.getElementById("btn");
if(btn.addEventListener){
btn.addEventListener("click",demo);
}else if(btn.attachEvent){
btn.attachEvent("onclick",demo);
}else{
btn.onclick=demo();
}
function demo(){
alert("hello");
}
</script>
</body>
