Js的DOM事件

事件：文档或窗口与浏览器的交互事件，js与html就是通过事件进行交互的。eg: 瀑布流的加载、轮播图等

1.理解事件流(Brower v-4.0+)：描述的是从页面中接收事件的顺序

　　　1).事件冒泡(ie事件流)：即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收逐级向上传播到最不具体的节点（文档）元素　　

当用户点击了<div>元素，click事件将按照input#bt->div#box->body->html->DOM的顺序进行传播

　　　2).事件捕获流(js)：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件

当用户点击了<div>元素，click事件将按照先是DOM->html->body->div->input的顺序进行传播

2.使用事件处理程序

1).html事件事件处理程序：

<div id="box">
　　<input type='button' value='按钮' id='btn' onclick="showMessage();">
</div>
<script type="text/javascript">
　　function showMessage(){
　　　　alert('Html事件');
　　}
</script>

2).DOM0级事件处理程序：

优点：一个元素可以添加多个事件；

同时绑定几个不同的事件，但是不能同时绑定多个相同的事件。

</div>
<script type="text/javascript">
　　function showMessage(){
　　　　alert('Html事件');
　　}
　　var btn2 =document.getElementById('btn2');
　　btn2.onclick = function(){
　　　　alert('这是通过DOM0级添加的事件');
　　}
　　// btn2.onclick=null; //删除btn2的onclick事件

</script>

3).DOM2级事件处理程序：

优点：一个元素可以添加多个事件；

同时绑定几个事件（相同或不同），然后顺序执行，不会覆盖。

　　btn3.addEventListener('click',showMessage,false);

　　//btn3.removeEventListener('click',showMessage,false);//删除btn3的click事件
</script>

4).ie事件处理程序：

btn4.attachEvent('onclick',showMessage);

//btn4.detachEvent('onclick',showMessage);//删除btn4的onclick事件

5).跨浏览器事件处理程序：

//跨浏览器事件处理程序
var eventUtil ={
　　//添加句柄
　　addHandler: function(element,type,handler){
　　　　if(element.addEventListener){
　　　　　　element.addEventListener(type,handler,false);
　　　　}else if(element,attachEvent){
　　　　　　element.attachEvent('on'+type,handler,false);
　　　　}else{
　　　　　　element['on'+type]=handler;
　　　　}
　　}
removeHandler: function(element,type,handler){
　　if(element.removeEventListener){
　　　　element.removeEventListener(type,handler,false);
　　}else if(element,detachEvent){
　　　　element.detachEvent('on'+type,handler,false);
　　}else{
　　　　element['on'+type]=null;//element.onclick===element['on'+click];
　　　　}
　　}
}

posted @ 2017-03-17 14:57 米饭！大米饭阅读(131) 评论(0) 收藏举报

刷新页面返回顶部

米饭呀！大米饭

哪里有人喜欢孤独，不过是不喜欢失望罢了

Js的DOM事件