Javascript事件实例详解

前端技术 2023/09/05 JavaScript
document是位于html标签之上的，可以说是权力最大的。下面的实例当你单击页面上的任何位置都会弹出“a”,正是运用了document的特性。
复制代码 代码如下:

 <script>       
     document.onclick=function(){
         alert(\'a\');
     };
 </script>
 

获取鼠标位置clientX,clientY---注意这里仅仅只是可视区的鼠标位置
复制代码 代码如下:

 <script>
    document.onclick=function(ev){
        if(ev)
        {
            alert(ev.clientX+\',\'+ev.clientY);
        }
        else{
            alert(event.clientX+\',\'+event.clentY);
        };
    };
</script>
 

或者
复制代码 代码如下:

 <script>
    document.onclick=function(ev){
    /*    if(ev)
        {
            alert(ev.clientX+\',\'+ev.clientY);
        }
        else{
            alert(event.clientX+\',\'+event.clentY);
        };
    };*/
    var oEvent=ev||event;
    alert(oEvent.clientX+\',\'+oEvent.clientY);
    };
</script>
 

事件冒泡---一层一层叠加的元素在一起，形成事件冒泡，比如下面的例子：document的最大范围影响了div的响应。
复制代码 代码如下:

 <script>
    window.onload=function(){
        var obtn=document.getElementById(\'btn1\');
        var odiv=document.getElementById(\'div1\');
        obtn.onclick=function(ev){
            var oEvent=ev||event;
            odiv.style.display=\'block\';
            oEvent.cancelBubble=true;//清除冒泡
        };
        document.onclick=function(){
            odiv.style.display=\'none\';
        };
    };
</script>
</head>
<body>
<input type=\"button\" value=\"显示\" id=\"btn1\"/>
<div id=\"div1\" style=\"width:100px;height:150px;background:#ccc;\"></div>
</body>
 

鼠标移动---在可视区有效
复制代码 代码如下:

 <title>鼠标移动</title>
<script>
    window.onmousemove=function(ev){
        var oEvent=ev||event;
        var odiv=document.getElementById(\'div1\');
        odiv.style.left=oEvent.clientX+\'px\';
        odiv.style.top=oEvent.clientY+\'px\';
    };
</script>
</head>
<body>
<div id=\"div1\" style=\"width:50px;height:50px;background:blue;position:absolute;\"></div>
</body>
 

 键盘改变位置和方向---通过keycode获取键盘的键值来执行相应的操作。
复制代码 代码如下:

 <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<style>
#div1 {width:100px; height:100px; background:#CCC; position:absolute;}
</style>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>无标题文档</title>
<script>
document.onkeydown=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById(\'div1\');

    //←        37
    //右        39

    if(oEvent.keyCode==37)
    {
        oDiv.style.left=oDiv.offsetLeft-10+\'px\';
    }
    else if(oEvent.keyCode==39)
    {
        oDiv.style.left=oDiv.offsetLeft+10+\'px\';
    }
};
</script>
</head>
<body>
<div id=\"div1\"></div>
</body>
</html>
 

鼠标跟随小尾巴
复制代码 代码如下:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<style>
div {width:10px; height:10px; background:red; position:absolute;}
</style>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var aDiv=document.getElementsByTagName(\'div\');
    var i=0;

    document.onmousemove=function (ev)
    {
        var oEvent=ev||event;

        for(i=aDiv.length-1;i>0;i--)
        {
            aDiv[i].style.left=aDiv[i-1].style.left;
            aDiv[i].style.top=aDiv[i-1].style.top;
        }

        aDiv[0].style.left=oEvent.clientX+\'px\';
        aDiv[0].style.top=oEvent.clientY+\'px\';
    };
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

keycode
复制代码 代码如下:

 <script>
document.onkeydown=function (ev)
{
    var oEvent=ev||event;

    alert(oEvent.keyCode);
};
</script>
 

 ctrlKey---可以通过ctrl+enter组合键来提交内容
复制代码 代码如下:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById(\'btn1\');
    var oTxt1=document.getElementById(\'txt1\');
    var oTxt2=document.getElementById(\'txt2\');

    oBtn.onclick=function ()
    {
        oTxt1.value+=oTxt2.value+\'\\n\';
        oTxt2.value=\'\';
    };

    oTxt2.onkeydown=function (ev)
    {
        var oEvent=ev||event;

        if(oEvent.ctrlKey && oEvent.keyCode==13)
        {
            oTxt1.value+=oTxt2.value+\'\\n\';
            oTxt2.value=\'\';
        }
    };
};
</script>
</head>
<body>
<textarea id=\"txt1\" rows=\"10\" cols=\"40\"></textarea><br />
<input id=\"txt2\" type=\"text\" />
<input id=\"btn1\" type=\"button\" value=\"留言\" />
</body>
</html>

本文地址：https://www.stayed.cn/item/14116

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案