Dom(五)——事件2. event问题

鼠标，键盘事件

onclick 鼠标单击
ondbclick 鼠标双击
onmouseover 鼠标划入
onmouseout 鼠标划出
onfocus 获取焦点
onblur 失去焦点
onmousedown 鼠标按下
onmouseup 鼠标松开
onmousemove 鼠标移动
onkeydown 按下键盘

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #native{
            background: aqua;
        }
    </style>
</head>
<body>
    <div id="num1">单击事件</div>
    <div id = "num2">双击事件</div>
    <input type="text">
    <input type="text" id="native">
    <div id="main">鼠标点击事件</div>
    <script>
        // onclick单击事件
        var oNum1 = document.getElementById("num1");
        oNum1.onclick = function(){
            alert("曹玉莹最棒哦！");
        }
        // 双击事件
        var Onum2 = document.getElementById("num2")
        Onum2.ondblclick = function() {
        alert('双击666');
        }
        // 获得焦点
        var oInput = document.getElementsByTagName("input")[0];
        // 这里注意类数组问题[0]，因为TagName是类数组
        console.log(oInput);
        oInput.onfocus = function(){
            oInput.style.backgroundColor = "red";
        }
        // 失去焦点
        oInput.onblur = function(){
            oInput.style.backgroundColor = "pink";
        }
        
        // 利用js对样式进行修改
        var Onative = document.getElementById("native");
        Onative.onfocus = function(){
            Onative.className = "native";
        }
        Onative.onblur = function(){
            Onative.className = "";
            // 失去焦点不生效！！！！！！！！！
        }

        // 事件句柄，鼠标操作
        var oMain = document.getElementById("main");
        // 鼠标按下
        oMain.onmousedown = function(){
            console.log("onmousedown")
        }
        // 鼠标弹起
        oMain.onmouseup = function(){
            console.log("onmouseup");
        }
        // 鼠标移动
        oMain.onmousemove = function(){
            console.log("onmousemove");
        }
        // 鼠标移开
        oMain.onmouseover = function(){
            console.log("鼠标划入");
        }
        oMain.onmouseout = function(){
            console.log("鼠标移出");
        }
    </script>
</body>

效果如下

js设置样式

oDiv.style.xxx 设置元素的样式
oDiv.className 设置元素的class

onchange和event的问题

1.onchange()

输入框中的默认值发生改变时，就会触发

<body>
    <input type="text" id="shuru" value="123456">
    <script>
    var oInput = document.querySelector("input")
    console.log(oInput.value)
    oInput.onchange = function(){
        console.log(oInput.value)
    }
    </script>
</body>

当input中没有输入时

当再input中输入时间

2. event问题

<body>
    <input type="text" id="shuru" value="123456">
    <input type="text" id="main">
    <script>
    var oInput = document.querySelector("input")
    var oMain = document.querySelectorAll("input")[1];
    console.log(oInput.value)
    oInput.onchange = function(){
        console.log(oInput.value)
    }
    oMain.onclick = function(e){
        console.log(e)
        e.preventDefault();
        // 阻止浏览器的默认行为
        console.log(e.clientX);
        console.log(e.clientY);
        // 获取当前点击位置的坐标
    }
    </script>

效果如下