JS浏览器事件⼀、事件
1、什么是事件
事件是可以被JavaScript侦测到的⾏为。
2、常⽤事件
onClick                      单击事件
onMouseOver            ⿏标经过事件
onMouseOut              ⿏标移出事件
onChange                  ⽂本内容改变事件
onSelect                    ⽂本框选中事件blur事件
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 LocaleDateString();
}
</script>
</body>
这⼀⽅法缺点：修改时⿇烦，需要同时修改两处
2、DOM0级事件处理：把⼀个函数赋值给⼀个事件处理程序属性
<body>
<button id="btn">按钮</button>
<script>
var ElementById("btn");
</script>
</body>
这⼀⽅法的缺点是，运⾏多个事件时，新事件会覆盖旧事件
3、DOM2级事件处理：addEventListener("事件名","事件处理函数","布尔值") ture：事件捕获
false：事件冒泡
removeEventListener()  移除监听事件
<body>
<button id="btn">按钮</button>
<script>
var ElementById("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")
}
</script>
</body>
这⼀⽅法可以依次执⾏多个事件，也可移除其中⼀个事件。
4、IE事件处理程序：
attchEvent
detachEvent
⽤法和addEventListener相同，只是⽤在ie8以下的浏览器
下⾯是⼀个兼容各种浏览器的监听事件代码：
<body>
<button id="btn">按钮</button>
<script>
var ElementById("btn");
if(btn.addEventListener){
btn.addEventListener("click",demo);
}else if(btn.attachEvent){
btn.attachEvent("onclick",demo);
}else{
}
function demo(){
alert("hello");
}
</script>
</body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。