原生事件的讲解

最新推荐文章于 2024-09-06 09:58:40 发布

weixin_55869763

最新推荐文章于 2024-09-06 09:58:40 发布

阅读量248

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_55869763/article/details/115609942

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>各种事件</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: aqua;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <input type="text" id="int">
</body>
</html>
<script>
    let div = document.getElementById('box')
    let int = document.getElementById('int')
    // console.log(div)
    // js中常用的事件类型和操作行为
    // click / mouseover(mouseenter) / mouseout(mouseleave) 
    //mousemove /  mouseup / mousedown 
    //mousewheel / scroll(window.onscroll)
    //load(window.onload\img.onload) / unload
    //keydown / keyup / keypress /  resize(window.onressize)

    function fun(){
        console.log('fun')
    }
    function fun2(){
        console.log("fun2")
    }

    // div.onclick = fun  点击事件
    // div.onmouseover = fun   鼠标移入
    // div.onmouseout = fun2   鼠标移出
    // div.onmouseenter = fun  鼠标移入    
    // div.onmouseleave = fun2  鼠标移出
    // div.onmousemove = fun   只要鼠标在div上移动就会触发
    // div.onmousedown = fun   鼠标左键按下
    // div.onmouseup = fun2    鼠标左键抬起
    // div.onmousewheel = fun   当鼠标的滚轮在目标范围能滚动时触发
    // window.onscroll = fun    当滚轮滚动时触发
    // window.onload = fun      事件会在页面或图像加载完成后立即触发
    // window.onunload = fun2    当文档或一个子资源正在被卸载时,触发 unload事件    
    // int.onkeydown = fun      当键盘按下时触发
    // int.onkeyup = fun2      当键盘抬起触发
    // int.onkeypress = fun    当键盘按下触发
    // window.onresize = fun      事件会在窗口或框架被调整大小时发生
</script>