【JavaScript】关于原生js中的事件-Event对象、事件冒泡、鼠标事件、键盘事件

最新推荐文章于 2024-05-04 18:47:50 发布

meichaoWen

最新推荐文章于 2024-05-04 18:47:50 发布

阅读量340

点赞数

分类专栏： JS实例文章标签： js javascript

本文链接：https://blog.csdn.net/meichaoWen/article/details/113100415

版权

JS实例专栏收录该内容

60 篇文章 2 订阅

订阅专栏

Event对象

<script>
    window.onload = function(){
        document.onclick = function(ev){
            var oEvent = ev || event //为了兼容低版本的ie和火狐
            alert(oEvent.clientX +','+ oEvent.clientY)
        }
        
    }
</script>

事件冒泡

在一个元素上执行事件，事件会逐层向上传递

<body>
    <input type="button" value="点击" id="btn1">
    <div id="div1"></div>
<script>
    window.onload = function(){
        var oDiv = document.getElementById('div1')
        var oBtn = document.getElementById('btn1')
        oBtn.onclick = function(ev){
            var oEvent = ev || event
            oDiv.style.display = 'block'
            oEvent.cancelBubble = true //取消冒泡事件
        }
        document.onclick = function(ev){
            oDiv.style.display = 'none'
        }
    }
</script>

鼠标事件

<body>
    <div id="div1"></div>
<script>
    function getPos(ev) {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop //可视区的高度 + 滚动高度
        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
        return pos = {
            x: ev.clientX + scrollTop,
            y: ev.clientY + scrollLeft
        }
    }
    var oDiv = document.getElementById('div1')
    document.onmouseover = function (ev) {
        console.log(9)
        var oEvent = ev || event
        var pos = getPos(oEvent)
        oDiv.style.left = pos.x + 'px'
        oDiv.style.top = pos.y + 'px'
    }
</script>
</body>

鼠标跟随实例

<script>
    function getPos(ev) {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop 
        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
        return pos = {
            x: ev.clientX + scrollTop,
            y: ev.clientY + scrollLeft
        }
    }
    document.onmouseover = function (ev) {
        var aDiv = document.getElementsByTagName('div')
        for (var i = aDiv.length - 1; i > 0; i--) { 
            aDiv[i].style.left = aDiv[i - 1].offsetLeft + 'px' //最后一个div跟随前一个div
            aDiv[i].style.top = aDiv[i - 1].offsetTop + 'px'
        }
        var oEvent = ev || event
        var pos = getPos(oEvent)
        aDiv[0].style.left = pos.x + 'px' //第一个div跟随鼠标
        aDiv[0].style.top = pos.y + 'px'
    }
</script>

键盘事件

实例：左右键盘控制元素移动

<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>

实例：ctrl + 回车提交

<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>

ctrl：ctrlKry

shift：shiftKey

alt：altKey

meichaoWen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】关于原生js中的事件-Event对象、事件冒泡、鼠标事件、键盘事件

Event对象<script> window.onload = function(){ document.onclick = function(ev){ var oEvent = ev || event //为了兼容低版本的ie和火狐 alert(oEvent.clientX +','+ oEvent.clientY) } }</script>事件冒泡在
复制链接

扫一扫