event对象和冒泡对象

2018-03-26 本文已影响0人 db366da20578

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)
    };
};

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

<!DOCTYPE html>
<html onclick="alert('html')">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
        </script>
        <style>
            div {
                padding: 100px;
            }
        </style>
    </head>
    <body onclick="alert('body')">
        <div style="background: red" onclick="alert(this.style.background)">
            <div style="background: gray" onclick="alert(this.style.background)">
                <div style="background: yellow" onclick="alert(this.style.background)"></div>
            </div>
        </div>
    </body>
</html>

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            window.onload=function(){
                var oBtn=document.getElementById('btn1');
                var oDiv=document.getElementById('div1');
                
                oBtn.onclick=function(e){
                    var oEvent=e||event;

                    if(oDiv.style.display=='block'){
                        oDiv.style.display='none';
                    }else {
                        oDiv.style.display='block';
                    }
//                  alert("按钮点击事件");
                    oEvent.cancelBubble=true;  //高版本浏览器 
                    //如果不加上cancelBubble取消冒泡的话，点击按钮就会触发到document，所以div才会hide掉。
                };
                document.onclick=function(){
                //点击body隐藏div
                if(oDiv.style.display='block') {
                    oDiv.style.display='none';
                }
//                  alert("document点击事件");
                };
            };
        </script>
        <style>
            #div1 {
                width: 100px;
                height: 100px;
                background: red;
                display: none;
            }
        </style>
    </head>
    <body>
        <input id="btn1" type="button" value="显示"/>
        <div id="div1"></div>
    </body>
</html>

div跟着鼠标的移动而移动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1 {
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
            }
        </style>
        <script>
            document.onmouseover=function(e){
                var oDiv=document.getElementById('div1');
                var oEvent=e||event;
                var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
                var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
                
                oDiv.style.left=oEvent.clientX+scrollLeft+'px';
                oDiv.style.top=oEvent.clientY+scrollTop+'px';
                
            };
        </script>
    </head>
    <body style="height: 2000px;">
        <div id="div1"></div>
    </body>
</html>

封装：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1 {
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
            }
        </style>
        <script>
            function getPos(e){
                var oEvent=e||event;
                var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
                var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
                return{x:oEvent.clientX+scrollLeft,y:oEvent.clientY+scrollTop}
            }
            document.onmouseover=function(e){
                var oDiv=document.getElementById('div1');
                
                oDiv.style.left=getPos().x+'px';
                oDiv.style.top=getPos().y+'px';
                
            };
        </script>
    </head>
    <body style="height: 2000px;">
        <div id="div1"></div>
    </body>
</html>

键盘的keyCode

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

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

<div id="div1"></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

<input id="text1" type="text" />
<input id="btn1" type="button" value="发布"/><br />
<textarea id="text2" cols="30" rows="10"></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

<input id="text1" type="text" /><br />
<textarea id="text2" cols="30" rows="10"></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='';
        }
    };
};