event对象和冒泡对象

event对象：用来获取事情的详细信息(低版本不支持)。

给body加事件用document.onclick而不是body，因为body.onclick如果没有内容的话是不会触发事件的。
event对象的使用，解决兼容问题：

window.onload=function(){
    document.onclick=function(e){
        //IE
        //alert(event.clientX+','+event.clientY);
        
        //FF
        //alert(e.clientX+','+e.clientY);
        
        //通用
        var oEvent=e||event;
        alert(oEvent.clientX+','+oEvent.clientY)
    };
};

事件冒泡是典型的事件流。例：
当点击最里层会一直冒泡到最外层。

2018-03-26 at 16.37.gif

取消冒泡：oEvent.cancelBubble = true;//高版本浏览器
参考链接： http://www.jb51.net/article/95208.htm

div跟着鼠标的移动而移动

封装：

键盘的keyCode

document.onkeydown=function(e){
    var oEvent=e||event;
    alert(oEvent.keyCode);
};

用键盘左右键来控制div的移动

#div1 {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
}

document.onkeydown=function(e){
    var oEvent=e||event;
    var oDiv=document.getElementById('div1');
    if(oEvent.keyCode==37){
        oDiv.style.left=oDiv.offsetLeft-10+'px';
    }else if(oEvent.keyCode==39){
        oDiv.style.left=oDiv.offsetLeft+10+'px';
    }
};

把input的值传给textarea

window.onload=function(){
    var oTxt1=document.getElementById('text1');
    var oBtn=document.getElementById('btn1');
    var oTxt2=document.getElementById('text2');
    
    oBtn.onclick=function(){
        if(oTxt1.value==''){
            alert("请输入内容");
        }else {
            oTxt2.value+=oTxt1.value+'\n';
            oTxt1.value='';
        }
    };
};

按下键盘的回车键和Ctrl键，把input的值传给textarea

window.onload=function(){
    var oTxt1=document.getElementById('text1');
    var oTxt2=document.getElementById('text2');
    
    oTxt1.onkeydown=function(e){
        oEvent=e||event;
        if(oEvent.keyCode==13 && oEvent.ctrlKey){
            oTxt2.value+=oTxt1.value+'\n';
            oTxt1.value='';
        }
    };
};