javascript事件基础

最新推荐文章于 2024-03-08 16:41:26 发布

雨中漫步OL

最新推荐文章于 2024-03-08 16:41:26 发布

阅读量133

点赞数 1

分类专栏： IT 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_41626400/article/details/82291521

版权

IT 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.event对象
用来获取事件的详细信息：鼠标位置、键盘按键
2.获取event对象(兼容性写法)
var oEvent=ev||event;
3.获取鼠标位置
oEvent.clientX 横坐标
oEvent.clientY 纵坐标
4. 事件冒泡
是由事件开始最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到根节点。这就是事件冒泡。
5.取消冒泡
oEvent.cancelBubble=true
6.键盘事件
onkeydown
7. 获取键盘的按键
oEvent.keyCode
ctrlKey、shiftKey、altKey 判断用户是否按了ctrl、shift、alt键

案例：
1.一串跟着鼠标的Div

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {width:10px; height:10px; background:red; position:absolute;}
</style>
<script>
<!------获取鼠标的坐标，可消除滚动条的影响---------->
function getPos(ev)
{
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

    return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}

document.onmousemove=function (ev)
{
    var aDiv=document.getElementsByTagName('div');
    var oEvent=ev||event;

    var pos=getPos(oEvent);

    for(var i=aDiv.length-1;i>0;i--)
    {
        aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
        aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
    }

    aDiv[0].style.left=pos.x+'px';
    aDiv[0].style.top=pos.y+'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>
<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>
<div></div>
<div></div>
<div></div>
</body>
</html>

2.仿select下拉框

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:400px; height:300px; background:#CCC; display:none;}
</style>
<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';
        //alert('按钮被点击了');

        oEvent.cancelBubble=true;
    };

    document.onclick=function ()
    {
        oDiv.style.display='none';
        //alert('document被点击了');
    };
};
</script>
</head>

<body>
<input id="btn1" type="button" value="显示" />
<div id="div1">
</div>
</body>
</html>

3.键盘控制移动

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:#CCC; position:absolute;}
</style>
<script>
document.onkeydown=function (ev)
{
    var oEvent=ev||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';
    }
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

4.回车| ctrl+回车提交留言3

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oTxt1=document.getElementById('txt1');
    var oTxt2=document.getElementById('txt2');

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

        if(oEvent.keyCode==13 && oEvent.ctrlKey)
        {
            oTxt2.value+=oTxt1.value+'\n';
            oTxt1.value='';
        }
    };
};
</script>
</head>

<body>
<input id="txt1" type="text" /><br>
<textarea id="txt2" rows="10" cols="40"></textarea>
</body>
</html>

雨中漫步OL

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript事件基础

1.event对象用来获取事件的详细信息：鼠标位置、键盘按键 2.获取event对象(兼容性写法) var oEvent=ev||event; 3.获取鼠标位置 oEvent.clientX 横坐标 oEvent.clientY 纵坐标 4. 事件冒泡是由事件开始最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到根...
复制链接

扫一扫