JavaScript DOM事件(笔记)

第1章 事件流

1-1.事件冒泡:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收;
然后逐级向上传播至最不具体的那个节点(文档);
1-2.事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件;

第2章 事件处理程序

2-1 HTML事件处理程序
//缺点:HTML和JS代码紧密的耦合在一起;

<input type="button" value="按钮" onclick="showMessage()">

2-2 DOM0级事件处理程序

//较传统的方式:把一个函数赋值给一个事件的处理程序属性,用的比较多;
//优点:简单/跨浏览器;

<input type="button" value="按钮" id="btn2"><script>  var btn2 = document.getElementById('btn2'); //取得btn2按钮对象;  btn2.onclick = function () {        //给btn2添加onclick属性;    alert('这是通过DOM0级添加的事件!');  }  btn2.onclick=null;             //删除onclick属性;</script>

2-3 DOM2级事件处理程序

//DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作;
//addEventListener()和removeEventListner();
//接收三个参数:要处理的事件名/事件处理函数和布尔值;
//在IE8一下,不起作用;

<input type="button" value="按钮" id="btn3"><script>  var btn3 = document.getElementById('btn3');  btn3.addEventListener('click',showMessage,false);    //添加事件程序;  btn3.addEventListener('click',function(){        //添加多个事件程序;    alert(this.value);  },false);  btn3.removeEventListener('click',showMessage,false);  //删除事件程序;</script>

2-4 IE事件处理程序及跨浏览器

//接收两个参数:事件处理函数名称和事件处理函数

<script>   var btn3 = document.getElementById('btn3');   btn3.attachEvent('onclick',showMessage);      //添加事件;   btn3.detachEvent('onclick',showMessage);      //删除事件;</script>

>2.浏览器兼容

//将添加和删除事件处理程序封装到对象中并赋值给变量'eventUtil';var eventUtil = {  //添加句柄  addHandler:function(element,type,handler){    //判断DOM2级事件处理程序;    if(element.addEventListener){        element.addEventListener(type,handler,false);    //判断IE浏览器;    }else if(element.attachEvent){      element.attachEvent("on"+type,handler);    //使用DOM0级事件处理程序;    }else{      element['on'+type] = handler;    }  };  //删除句柄  removeHandler:function(element,type,handler){    //判断DOM2级事件处理程序;    if(element.removeEventListener){        element.removeEventListener(type,handler,false);    //判断IE浏览器;    }else if(element.detachEvent){      element.detachEvent("on"+type,handler);    //使用DOM0级事件处理程序;    }else{      element['on'+type] = null;    };  };};//跨浏览器添加事件处理程序;eventUtil.addHandler(btn3,'click',showMessage);