监听onclick事件[通俗易懂]

小小码 • 2023-08-12 15:30 • 未分类 • 阅读 128

大家好，我是考100分的小小码，祝大家学习进步，加薪顺利呀。今天说一说监听onclick事件[通俗易懂],希望您对编程的造诣更进一步.

监听onclick事件

和onclick的区别区别一写的方法不会被覆盖区别二 false表示冒泡（从里到外触发事件） true表示捕获（从外到里触发事件）

     window.addEventListener('click',function(){
         alert(1)
     })
     window.addEventListener('click',function(){
         alert(2)
     })
     window.addEventListener('click',function(){
         alert(3)
     })
       let div1 = document.getElementById('div1')
    div1.onclick = function (e){
    
复制代码

鼠标在文档（是文档document不是div1）的X轴的位置

        console.log(e.clientX);
        
复制代码

鼠标在文档（是文档document不是div1）的Y轴的位置

        console.log(e.clientY);
         let h1 = document.querySelector('h1')
         
复制代码

鼠标双击

     h1.ondblclick = function(){
         alert('我双击了')
     }
     h1.addEventListener('dblclick',function(){
         alert('我双击了')
     })
     
复制代码

鼠标在指定的区域内移动事件

     h1.onmousemove = function (){
         console.log('我移动了');
     }
     h1.addEventListener('mousemove',function(){
         console.log('我移动了');
     })
     let div1 = document.getElementById('div1')
    div1.onmousedown = function (e){
    
复制代码

按下的时候获取点的位置到盒子边界距离

        let areaX = e.clientX - div1.offsetLeft;
        let areaY =  e.clientY - div1.offsetTop;
        document.onmousemove = function (e){
        
复制代码

移动的时候获取的client的动态距离 – 盒子内点的到边缘的固定距离最后获得的就是盒子到文档的距离

            div1.style.left = e.clientX - areaX + 'px'
            div1.style.top = e.clientY - areaY + 'px'
        }
    }
    div1.onmouseup = function (){
        document.onmousemove = null;
    }
      let t = document.getElementById('t');

    t.onkeydown = function (e){
    
复制代码

兼容写法

        let eobj = e||event;

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
转载请注明出处: https://daima100.com/13844.html

监听onclick事件[通俗易懂]

相关推荐

发表回复