30种事件类型转换！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body id="txt16">
<input type="text" value="" id="txt1">
<input type="button" value="点击" id="btn1">
<br>
<br>
<input type="text" value="" id="txt2">
<input type="button" value="双击" id="btn2">
<br>
<br>
<input type="text" value="" id="txt3">
<input type="button" value="按下" id="btn3">
<br>
<br>
<input type="text" value="" id="txt4">
<input type="button" value="抬起" id="btn4">
<br>
<br>
<input type="text" value="" id="txt5">
<input type="button" value="进入" id="btn5">
<br>
<br>
<input type="text" value="" id="txt6">
<input type="button" value="离开" id="btn6">
<br>
<br>
<input type="text" value="" id="txt7">
<input type="button" value="移动" id="btn7">
<br>
<br>
<!--<input type="text" value="" id="txt8">-->
<h2>键盘控制：</h2>
<input type="text" name="" class="text" id="div7"  placeholder="按下" STYLE="background-color: red;width: 100px;height: 50px;">
<br>
<br>
<input type="text" name="" class="text" id="div8"  placeholder="抬起" STYLE="background-color: red;width: 100px;height: 50px;">
<br>
<br>
<input type="text" name="" class="text" id="div9"  placeholder="抬起" STYLE="background-color: red;width: 100px;height: 50px;">

<h2>表单控件：</h2>
<form action="">
    <input type="text" placeholder="失去焦点" value="" id="txt10" >
    <br>
    <br>
    <input type="text" placeholder="获取焦点" value="" id="txt11">
    <br>
    <br>
    <input type="text" placeholder="输入时，看控制台" value="" id="txt12">
    <br>
    <br>
    <input type="text" value="改变时看控制台"  id="txt13">
    <br>
    <br>
    <input type="reset" value="重置时看控制台"  id="txt14">
    <br>
    <br>
    <input type="submit" value="提交时看控制台"  id="txt15">
</form>
</body>
<script>
    var oTxt1=document.getElementById("txt1")
    var oBtn1=document.getElementById("btn1")
    oBtn1.onclick=function () {
        oTxt1.value="点击一下"
        console.log("点击一下")
    }
    var oTxt2=document.getElementById("txt2")
    var oBtn2=document.getElementById("btn2")
    oBtn2.ondblclick = function (){
        oTxt2.value="双击一下"
        console.log("双击一下")
    }
    var oTxt3=document.getElementById("txt3")
    var oBtn3=document.getElementById("btn3")
    oBtn3.onmousedown = function (){
        oTxt3.value="按下"
        console.log("按下")
    }
    var oTxt4=document.getElementById("txt4")
    var oBtn4=document.getElementById("btn4")
    oBtn4.onmouseup = function (){
        oTxt4.value="抬起"
        console.log("抬起")
    }
    var oTxt5=document.getElementById("txt5")
    var oBtn5=document.getElementById("btn5")
    oBtn5.onmouseover = function (){
        oTxt5.value="进入"
        console.log("进入")
    }
    var oTxt6=document.getElementById("txt6")
    var oBtn6=document.getElementById("btn6")
    oBtn6.onmouseout = function (){
        oTxt6.value="离开"
        console.log("离开")
    }
    var oTxt7=document.getElementById("txt7")
    var oBtn7=document.getElementById("btn7")
    oBtn7.onmousemove = function (){
        oTxt7.value="移动"
        console.log("移动")
    }
//    var oTxt8=document.getElementById("txt8")
//    var oBtn8=document.getElementById("btn7")
//    oBtn8.onkeydown = function(){
//        console.log("按下后触发效果")
//    }
//    div7.onkeydown = function(){
//        console.log("按下后触发效果")
//    }
    var div7 = document.getElementById("div7")
    div7.onkeydown = function(){
        div7.value="按下后触发效果"
        console.log("按下后触发效果")
    }
    var div8=document.getElementById("div8")
    div8.onkeyup=function () {
        console.log("抬起后触发效果")
        div8.value="抬起后触发效果"
    }
    var div9 = document.getElementById("div9")
    div9.onkeypress=function () {
        console.log("按下并抬起触发效果")
        div9.value="按下并抬起触发效果"
    }
    var oTxt10=document.getElementById("txt10")
    oTxt10.onblur=function () {
        console.log("失去焦点")
        oTxt10.value="失去焦点"
    }
    var oTxt11=document.getElementById("txt11")
    oTxt11.onfocus=function () {
        console.log("获取焦点")
        oTxt11.value="获取焦点"
    }
    var oTxt12=document.getElementById("txt12")
    oTxt12.oninput=function () {
        console.log("正在输入中")
//        oTxt12.value="获取焦点"
    }
    var oTxt13=document.getElementById("txt13")
    oTxt13.onchange=function () {
        console.log("正在修改")
//        oTxt12.value="获取焦点"
    }
    var oTxt14=document.getElementById("txt14")
    oTxt14.onreset=function () {
        console.log("重置成功")
        oTxt12.value="获取焦点"
    }
    var oTxt15=document.getElementById("txt15")
    oTxt15.onsubmit=function () {
        console.log("提交成功")
        oTxt12.value="获取焦点"
    }
    var load=document.getElementById("txt16")
    load.onload=function () {
        console.log("页面加载完成")
    }
//    var scroll=document.write("txt16")
//    scroll.onscroll=function () {
//        console.log("页面正在滚动")
//    }未做出来
//    var resize=document.write("txt16")
//    resize.onresize=function () {
//        console.log("页面正在缩小")
//    }未做出来
</script>
</html>
30种事件类型转换！

猜你喜欢
