dom事件类型

最新推荐文章于 2024-03-28 18:59:29 发布

颖颖丫

最新推荐文章于 2024-03-28 18:59:29 发布

阅读量132

点赞数

文章标签： html

本文链接：https://blog.csdn.net/l_y_h___/article/details/120308465

版权

window.onload:用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法

window.unonload:在用户退出页面时发生

window.onresize:当浏览器窗口被调整到一个新的高度或者宽度时，会触发

window.onscroll:当用户滚动带滚动条的元素中的内容时,重复被激发

        window.onload = function(){
            var a1 = document.getElementById('a1');
            console.log(a1);//用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法
        }
        window.onunload = function(){
            console.log(111);
        }//在用户退出页面时发生
        window.onresize = function(){
            console.log('我被改变了');
        }
        window.onscroll = function(){
            console.log('我被拖动');
        }

onchange:在select的下拉列表的选中的选项更改的时候触发

onselect:当用户选择文本框（<input>,<textarea>）中的一个或多个字符时

onblur:元素失去焦点的时候触发

onfocus:元素获得焦点的时候触发，不支持冒泡

onmousemove:鼠标在元素内部移动的时候重发触发

onmouseenter:鼠标光标从元素外部首次移动到元素范围内激发，不冒泡

onmouseleave:鼠标光标从元素内部首次移动到元素外部激发，不冒泡

onmouseover:鼠标位于元素外部，将其首次移入另一个元素边界之内时触发,冒泡

onmouseout:在位于元素上方的鼠标光标移入到另外一个元素中,冒泡

<body>
    <select name="" id="s1">
        <option value="0">上海</option>
        <option value="1">北京</option>
        <option value="2">苏州</option>
    </select>
    <input type="text" value="hello" id="t1">
    <div style="height: 100px;width: 100px;background-color: blueviolet;" id="d1">
        <div style="height: 50px;width: 50px;background-color: gray;" id="d2"></div>
    </div>
    <script>
        var s1 = document.getElementById('s1');
        s1.onchange = function(e){
            console.log('选择了某一个值：'+e.target.innerHTML)
            console.log(e.target.value);
        }
        var t1 = document.getElementById('t1');
        t1.onselect = function(){
            console.log('选择了某1个值：')
        }
        t1.onblur = function(){
            console.log('失去焦点')
        }
        t1.focus();//自动获取焦点
        t1.onfocus = function(){
            console.log('获得焦点')
        }

        var d1 = document.getElementById('d1');
        d1.onmousemove = function(e){
             console.log(e.pageX+','+e.pageY);
         }
        d1.onmouseenter = function(){
            console.log('移入')
        }//不冒泡
        d1.onmouseleave = function(){
             console.log('移出')
         }
         d1.onmouseover = function(){
             console.log('移入')
         }//冒泡
         d1.onmouseout = function(){
             console.log('移出')
         }
    </script>
</body>

事件的冒泡

事件的向上传导，当后代元素上的事件被触发时，其祖先元素上的相同事件也会触发

取消冒泡：通过事件对象cancelBubble

s1.onclick = function(event){
    event = event || window.event
    event.cancelBubble = true
}//取消冒泡

颖颖丫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫