事件

## 事件驱动三要素:  ##
          1 事件  2 事件源  3 事件处理程序


   

#   1  #DOM 0级事件绑定: 
                          脚本直接绑定
                                        button.onclick =function(){};

                          HTML元素中绑定
                                        <input type="button" id="button1" onclick="alert(1)" value="提交"/>
       
# 2 # DOM 2级事件绑定:
                         针对IE obj.attachEvent("on事件","处理程序");添加事件
                                obj.detachEvent("on事件","处理程序");删除事件

                         针对FF/CHROM obj.addEventListener("事件","处理程序",boolean);添加事件
                                      obj.removeEventListener("事件","处理程序",boolean);删除事件

# 针对兼容性问题方法1: #
            function aa(obj,a,b){
            if(obj.attachEvent){
                return obj.attachEvent("on"+a,b);
            }else if(obj.addEventListener){
                return obj.addEventListener(a,b);
            }
        }
        function bb(obj,a,b){
            if(obj.detachEvent){
                return obj.detachEvent("on"+a,b);
            }else if(obj.removeEventListener){
                return obj.removeEventListener(a,b);
            }
        }
# 针对兼容性问题方法2(使用创建对象的方法): #
        var Event={
            add:function(obj,a,b){
                if(obj.attachEvent){
                    return obj.attachEvent("on"+a,b);
                }else if(obj.addEventListener){
                    return obj.addEventListener(a,b);
                }else{
                    obj["on"+a]=b;
                }
            },
            remove:function(obj,a,b){
                if(obj.detachEvent){
                    return obj.detachEvent("on"+a,b);
                }else if(obj.removeEventListener){
                    return obj.removeEventListener(a,b);
                }else{
                    obj["on"+a]=null;
                }
            }

        };
        Event.add(button,"click",a);
        Event.add(button,"click",b);
        Event.remove(button,"click",a);

# 3  事件对象(用来表示当前事件,只在事件发生的过程中才有效,对象的属性和方法包含了当前事件的状态。)        
               var ev = e || window.event;
# 4  #事件对象属性:
## 鼠标事件:   
                                    相对于浏览器位置 clientX:当鼠标事件发生时,鼠标相对于浏览器X轴的位置
                                                    clientY:当鼠标事件发生时,鼠标相对于浏览器Y轴的位置

                                     相对于屏幕位置   screenX:当鼠标事件发生时,鼠标相对于屏幕X轴的位置
                                                    screenY:当鼠标事件发生时,鼠标相对于屏幕Y轴的位置

                                     相对于事件源位置
                                                    针对W3C:
                                                     layerX:当鼠标事件发生时,鼠标相对于事件源X轴的位置
                                                     layerY:当鼠标事件发生时,鼠标相对于事件源Y轴的位置

                                                     针对IE/CHROM:
                                                     offsetX:当鼠标事件发生时,鼠标相对于事件源X轴的位置
                                                     offsetY:当鼠标事件发生时,鼠标相对于事件源Y轴的位置


## 解决  layerX 与 offsetX 的兼容问题
                    var div = document.getElementById("div");
                    var yuanyi={
                    yuanX:function(obj){
                        if(obj.layerX){
                            return obj.layerX;
                        }else if(obj.offsetX){
                            return obj.offsetX;
                        }
                    },
                    yuanY:function(obj){
                        if(obj.layerX){
                            return obj.layerY;
                        }else if(obj.offsetX){
                            return obj.offsetY;
                        }
                    }
        
                };
        
                document.onmousemove=function(e){
                    var ev = e || window.event;
                    div.innerHTML = ev.clientX + " "+ev.clientY+"<br/>"+ev.screenX + " "+
                    ev.screenY+"<br/>"+yuanyi.yuanX(ev) + " "+yuanyi.yuanY(ev);
        
                };
## 示例 ##
           //当鼠标按下时
          div.onmousedown = function(e){
            var ev = e || window.event;
            var ox = yuanyi.yuanX(ev);
            //var ox = ev.offsetX;
            var oy = yuanyi.yuanY(ev);
            //var oy = ev.offsetY;

            //当鼠标移动时
            this.onmousemove=function(e){
                var ev = e || window.event;
            this.style.marginTop = ev.clientY - oy +"px";
            this.style.marginLeft = ev.clientX - ox +"px";
            };

            //当鼠标抬起时
            this.onmouseup = function(){
                this.onmousemove = null;
            }
        };
##键盘事件:   
                                    keyCode 获得键盘码
                                    altKey/ctrlKey/shiftKey 判断是否按,如果按了,由true,否则false
                                    type 输出事件名称
## 示例: 留言板提交内容功能

       var div = document.getElementById("div");
        var textarea = document.getElementById("textarea");

        textarea.onkeydown=function(e){
            var ev = e || window.event;
            if(ev.ctrlKey && ev.type == "keydown" && ev.keyCode == "13"){
                //div.innerHTML = textarea.value;
                var jia = document.createElement("p");
                jia.innerHTML = textarea.value;
                div.appendChild(jia);
                textarea.value = "";
                textarea.focus();
            }
        };

//取得浏览器的型号
        function myBrowser() {
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            var isOpera = userAgent.indexOf("Opera") > -1;
            //判断是否Opera浏览器
            if(isOpera) {
                return "Opera";
            }
            //判断是否Firefox浏览器
            if(userAgent.indexOf("Firefox") > -1) {
                return "FF";
            }
            if (userAgent.indexOf("Chrome") > -1) {
                return "Chrome";
            }
            if (userAgent.indexOf("Safari") > -1) {
                return "Safari";
            }
            if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
                return "IE";
            }
        }
## 滚轮事件: 
              滚轮事件: DOMMouseScroll (FF)  onmousewheel(chrom/IE)
              判断 滚轮向上还是向下  wheelDelta/detail

## 示例: 使图片放大或缩小


       
        var picture = document.getElementById("picture");
        if(myBrowser() == "ff"){
            picture.addEventListener("DOMMouseScroll",fun,false);
        }else{
            picture.onmousewheel=fun;
        }
        function fun(){
            var num = detail ||wheelDelta ;
            if(num>0){
                picture.style.width = picture.offsetWidth*1.2+"px";
            }else{
                picture.style.width = picture.offsetWidth*0.8+"px";

            }
        }
 
 
事件流: 当页面元素触发事件的时候,该元素容器以及整个页面都会按照特定顺序响应元素触发事件,事件传播的顺序叫做事件流.
 
IE:冒泡事件:从点击的地方从内向外执行(由明确的事件源到最不确定事件源泉依次向上触发)
W3C:捕获事件:从外到点击的地方开始执行(使用addEventListener添加事件时boolean值为true则为捕获,否则为冒泡)
注:当有冒泡事件和捕获事件时,捕获事件先发生.
 
阻止事件流:阻止事件流往外传播.
       IE(冒泡):ev.cancdBubble = true;
       W3C(捕获):ev.strpPropagation();
补充:
var ev=e || window.event;(用来表示当前事件,只在事件(比如onclick)发生的过程中才有效,对象的属性和方法包含了当前事件的状态。)
var obj = ev.taget(W3C) || ev.srcElement(IE)触发事件的DOM节点，就是谁触发的这个事件。

##事件委托实例  表格修改

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        input{
            border: 0;
            text-align: center;
        }
        td{
             30px;
            height: 20px;
        }
    </style>
    <script>
            window.onload=function(){
                var tr=document.getElementById("tr1");

                tr.onclick=function(e){
                    var ev=e||window.event;
                    var obj=ev.target||ev.srcElement;
                    if(obj.nodeName=="TH"){
                        return;
                    }
                    if(obj.nodeName=="TD"){
                        var old=obj.innerHTML;
                        var input=document.createElement("input");
                        input.type="text";
                        obj.innerHTML="";
                        obj.appendChild(input);
                        input.focus();
                        input.onblur=input.ondblclick=input.onkeydown=function(e){
                            var ev=e||window.event;
                  if(ev.type == "blur" || ev.type == "dblclick" || (ev.type == "keydown" && ev.keyCode == "13")){
                                var s;
                                if(input.value.trim()==""){
                                   s=old;
                                }
                                else{
                                   s=input.value;
                                }
                               obj.removeChild(input);
                                obj.innerHTML=s;


                            }


                        };


                    }



                    }


                }
    </script>
</head>
<body>
       <table id="tr1" border="1" style="text-align: center"  cellspacing="0">
             <tr>
                  <th> 姓名</th>
                  <th> 年龄</th>
                  <th>科目</th>
                  <th>成绩</th>
                  <th>性别</th>
             </tr>
             <tr  >
                 <td >张三</td>
                 <td>20</td>
                 <td>js</td>
                 <td>80</td>
                 <td>男</td>
             </tr>
       </table>
</body>
</html>