JavaScript事件基础

最新推荐文章于 2019-11-06 23:32:05 发布

可芭乐

最新推荐文章于 2019-11-06 23:32:05 发布

阅读量252

点赞数

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.csdn.net/a839371666/article/details/54866320

版权

JavaScript基础专栏收录该内容

37 篇文章 0 订阅

订阅专栏

event对象和事件冒泡

什么是event对象
用来获取事件的详细信息：鼠标位置、键盘按键
例子：获取鼠标位置：clientX
document的本质：document.childNodes[0].tagName
document包含整个网页、页面（body可能撑不开）：
document.childNodes[0].tagName的标签名为！；
document.childNodes[1].tagName的标签名为HTML；
获取event对象（兼容性写法）
var oEvent = ev||event

window.onload = function (){
        document.onclick = function (ev){
            var oEvent = ev||event;
            alert(oEvent.clientX + ',' + oEvent.clientY);
        }
    }

鼠标的坐标

事件流
事件冒泡
取消冒泡：oEvent.cancelBubble = true
例子：仿select控件
DOM事件流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    #div1 {
        width: 400px;
        height: 300px;
        background: #ccc;
        display: none;
    }
</style>
<script type="text/javascript">
    window.onload = function (){
        var oBtn = document.getElementById('btn');
        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 id="btn" type="button" value="显示" />
    <div id="div1"></div>
</body>
</html>

cancelBubble 取消事件流

鼠标事件

鼠标位置
可视区位置：clientX、clientY
例子：跟随鼠标的Div
消除滚动条的影响
滚动条的意义——可视区与页面顶部的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    #div1 {
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
    }
</style>
<script type="text/javascript">
    document.onmousemove = function (ev){
        var oEvent = ev||event;
        var oDiv = document.getElementById('div1');

        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

        oDiv.style.left = oEvent.clientX + 'px';
        oDiv.style.top = oEvent.clientY + scrollTop + 'px';
    }
</script>
</head>
<body style="height:2000px;">
    <div id="div1"></div>
</body>
</html>

当要使用clientX,与clientY时必须要有scrolltop

获取鼠标在页面的绝对位置
封装函数

    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 oEvent = ev||event;
        var oDiv = document.getElementById('div1');
        var pos = getPos(oEvent);

        oDiv.style.left = pos.x + 'px';
        oDiv.style.top = pos.y + 'px';
    }

例子2：一串跟随鼠标的Div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    div {
        width: 10px;
        height: 10px;
        background: red;
        position: absolute;
    }
</style>
<script type="text/javascript">
    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>
</body>
</html>

键盘事件

keyCode
获取用户按下键盘的哪个按键
例子：键盘控制Div移动

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

但是一开始会卡一下

其他属性
CtrlKey、shiftKey、altKey
例子：提交留言
回车提交
ctrl+回车提交
&& oEvent.ctrlKey

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">

</style>
<script type="text/javascript">
window.onload = function (){
    var oTxt1 = document.getElementById('txt1');
    var oTxt2 = document.getElementById('txt2');
    var oBtn = document.getElementById('btn1');

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

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

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

可以通过回车键以及点击按钮发布信息

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

通过Ctrl+回车发布信息；
还有shiftKey与altKey

可芭乐

关注

0
点赞
踩
0

收藏

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

event对象和事件冒泡什么是event对象用来获取事件的详细信息：鼠标位置、键盘按键例子：获取鼠标位置：clientX document的本质：document.childNodes[0].tagName document包含整个网页、页面（body可能撑不开）： document.childNodes[0].tagName的标签名为！； document.childNodes[1
复制链接

扫一扫