第1章 事件流

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

第2章 事件处理程序

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

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

2-2 DOM0级事件处理程序

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

1 2 3 4 5 6 7 8 <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一下,不起作用;

1 2 3 4 5 6 7 8 9 <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事件处理程序及跨浏览器

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

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

>2.浏览器兼容

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 //将添加和删除事件处理程序封装到对象中并赋值给变量'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);

第3章 事件对象

3-1 DOM中的事件对象

//在触发DOM上的事件时都会产生一个对象==event;

>1.type == 获取事件类型;
>2.target == 获取事件目标;
>3.stopPropagation() == 停止事件冒泡;
>4.preventDefault() == 阻止事件的默认行为;

1 2 3 4 5 6 7 8 9 function showMes(event){ alert(event.type); //onclick;点击事件; alert(event.target.nodeName); 　　//INPUT;input按钮被触发; event.stopPropagation(); //停止事件冒泡; } <a href="event.html" onclick="stopGoto();">跳转</a> function stopGoto(event){ event.preventDefault();　　　　　　　//阻止默认行为; }

3-2 IE中的事件对象

>1.type == 同上;
>2.srcElement属性 == 获取事件目标;
>3.cancleBubble属性 == 阻止冒泡;设置true表示阻止冒泡,false为不组织冒泡;
>4.returnValue属性 == 用于阻止事件的默认行为;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function showMes(event){ //非IE用event,IE8以下用window.event; event = event || window.event; //事件目标兼容; var ele = event.target || event.srcElement; //兼容阻止事件冒泡; if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancleBubble(); }; //兼容取消事件默认行为; if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } }

第4章 QQ面板拖拽效果

>1.封装获取Class方法

1 2 3 4 5 6 7 8 9 10 11 12 function getClass(clsName,parent){ var oParent = parent?document.getElementById(parent):document, eles = [], elements = oParent.getElementsByTagName('*');   for (var i=0,l=elements.length; i<l; i++){ if(elements[i].className == clsName){ eles.push(elements[i]); } } return eles; }

>2.封装拖拽函数