初识事件.

最新推荐文章于 2024-08-05 22:35:13 发布

YUE玊

最新推荐文章于 2024-08-05 22:35:13 发布

阅读量92

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_66041402/article/details/127988600

版权

事件解绑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>    
<body>
    <button id="btn">抽奖</button>
    
    <script>
        btn.onclick = function(){
            console.log("谢谢惠顾")

            //console.log(this)      
            this.disabled = "disabled"    //点完 禁用                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
        }

//事件解绑dom0   dom节点 。onclick = null
        btn.onclick = function(){
            console.log("谢谢惠顾")
            this.onclick = null
        }

//时间解绑dom2
        function handler(){
            console.log("谢谢惠顾")
            this.removeEventListenner("click",handler)
        }

        btn.addEventListener("click",handler)

//兼容性 低版本 解绑
        function handler(){
            console.log("谢谢惠顾")
            btn.detachEvent("onclick",handler)
        }
        btn.attachEvent("onclick",handler)
    </script>
</body>
</html>

事件类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box3{
            width:100px;
            height:100px;
            background:yellow;
        }
        #child{
            width:100px;
            height:100px;
            background:red;
        }
    </style>
</head>    
<body>
    <button id="btn">click</button>
    <button id="btn2">mouse</button>
    <button id="box3">mouse2</button>
    <div id="box">
        <div id="child"></div>
    </div>


    <script>
//鼠标事件
//click 点击执行
//ablclick 双击执行
        btn.onclick = function(){
        console.log("单机执行")
        }
        btn.onablclick = function(){
        console.log("双机执行")
        }

//contextmenu 右键单击
    //点击按钮 btn.oncontextmenu = function(){  //document是点击页面任意处
        document.oncontextmenu = function(){
        console.log("右键单击，自定义右键菜单")
        }

//mousedown mousemove mouseup
        btn2.onmousedown = function(){
        console.log("鼠标按下")
        }

        box.onmousemove = function(){
        console.log("鼠标移动")
        }

        box.onmouseup = function(){
        console.log("鼠标抬起")
        }

//移入移出 mouseover mouseout 在子元素和父元素之间也会出现移入移出
        box.onmouseover = function(){
        console.log("移入")
        }
        box.onmouseout = function(){
        console.log("移出")
        }


//移入移出 mouseenter mouseleave 在子元素和父元素之间 没有 出现移入移出
        box.onmouseenter = function(){
        console.log("移入")
        }
        box.onmouseleave = function(){
        console.log("移出")
        }


    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>    
<body>
    <input type="text" id="username">
    <script>
//window document 输入框 input

    username.onkeydown = function(){
        console.log("按下键盘"，“判断是不是回车键”)
    }

    username.onkeyup = function(){
        console.log("抬起键盘"，“判断是不是回车键”)
    }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>    
<body>
    <form action="">
        <input type="text" id="username">
        <input type="reset">
        <input type="submit" value="提交">
    </form>
    <script>
//focus blur 表单事件
    username.onfocus = function(){
        console.log("获取焦点")
    }
    username.onblur =function(){
        console.log("失去焦点")
    }

//change 获取焦点，失去焦点的对比里面内容不一样才会触发
    username.onchange =function(){
        console.log("change")
    }

//input     内容不一样

    username.oninput =function(){
        console.log("input")
    }

//submit , reset
    myform.onsubmit =function(){
        console.log("submit","校验表单内容")
        return false
    }

    myform.onreset =function(){
        console.log("reset")
    }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color:blue;
        }
    </style>

</head>    
<body>
    <div id="box"></div>

    <script>
//触摸事件
        box.ontouchstart = function(){
            console.log("touchstart")
        }

        box.ontouchmove = function(){
            console.log("touchmove")
        }

        box.ontouchend = function(){
            console.log("touchend")
        }

        box.ontouchcancel = function(){ //在触摸屏幕时 突然来了一个电话
            console.log("touchcancel")
        }
    </script>
</body>
</html>

事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>    
<body>
    <input type="text" id="username">

    <div id="box"></div>
    <script>
        username.onkeyup = function(evt){
            console.log(evt.keyCode)
            if(evt.keyCode===13){
                console.log("创建节点")
            }
        }

        box.onclick = function(evt){
            console.log(evt)
        }

//兼容性 window.event
        box.onclick = function(evt){
            evt = evt || window.event
            console.log(evt)
        }

    </script>
</body>
</html>

鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>    
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            width: 2000px;
            height: 2000px;
        }
        div{
            width: 200px;
            height: 200px;
            background:skyblue;
            margin:100px;
        }
        p{
            width: 100px;
            height: 100px;
            background:red;
            margin:30px;
        }
        
</head>    
<body>
    <div id="box">
        <p></p?
    </div>
    <script>
//clientX clientY 距离浏览器可视窗口的左上角的坐标值
//pageX pageY 距离页面文档流的左上角的坐标值
//offsetX offsetY 距离触发元素的左上角坐标值
        box.onclick = function(evt){
            console.log(evt.clientX,evt.clientY)
            console.log(evt.pageX,evt.pageY)
            console.log(evt.offsetX,evt.offsetY)

        }
    </script>
</body>
</html>