• 周六. 10月 8th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

java 前端–event 事件

admin

11月 28, 2021
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <style>
         div{
              200px;
             height: 200px;
             background: chartreuse;

         }


     </style>

</head>
<body>
     <div id="test"> div框</div>
     <form>
         <input  type="text" />
         <input type="submit" value="提交"/>
     </form>


   <script type="text/javascript">
    window.onload=function(){
        var  oDIV=document.getElementById("test");
        oDIV.onclick=function(e){
           // alert(this.innerHTML);
            console.log(e);
        }
     /*   oDIV.onmouseover=function(){
            alert(this.innerHTML);
        }*/


        var ofrom= document.getElementsByTagName("form")[0];

        var input= document.getElementsByTagName("input");
        ofrom.onsubmit = function(){
            console.log("submit");
            return false;
        }
        input[0].onfocus=function(){
            console.log("onfocus");
        }
        input[0].onblur=function(){
            console.log("onblur");
        }
        input[0].onchange=function(){
            console.log("onchange");
        }
        input[0].oninput=function(){
            console.log("oninput");
        }


    }
   </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
       /* document.onkeypress=function(){
            console.log("keypress");
        }*/
      /*  document.onkeydown=function(){
            console.log("onkeydown");
        }*/
        document.onkeydown=function(e){
            var evt= e||event;
            //console.log(evt.altKey,evt.ctrlKey,evt.shiftKey);
            console.log(evt.keyCode);

        }



    </script>
</head>
<body>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <style type="text/css">

         div{
              400px;
             height: 400px;
             border: 1px solid #c9e2b3;
         }

     </style>
</head>
<body>
   <div></div>
  <input   type="text"/>
  <input type="submit" value="fabu"/>
<script type="text/javascript">
   var oDIV=document.getElementsByTagName("div")[0];
   var  aINPUT=document.getElementsByTagName("input");
  /* aINPUT[1].onclick=commentTxt;*/

   function  commentTxt(){
        oDIV.innerHTML+=aINPUT[0].value;
    }

   aINPUT[1].onkeydown=function(e){
       var evt= e||event;
       //console.log(evt.altKey,evt.ctrlKey,evt.shiftKey);
       console.log(evt.keyCode);
       if (evt.ctrlKey && evt.keyCode==13){
           commentTxt();
       }

   }

</script>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #outer{
             200px;
            height: 200px;
            background: red;
        }
        #inner {
             100px;
            height: 100px;
            background: blue;
        }

    </style>
</head>
<body>
     <div id="outer">
         <div id="inner">
         </div>
     </div>

    <script type="text/javascript">
             var outer =  document.getElementById("outer");
             var inner=document.getElementById("inner");
              outer.onclick=function(){
                  console.log("outer");
              }
             inner.onclick=function(e){

                 var evt=  e || event;
                 console.log("inner");
                // 阻止冒泡   不让起点击inner div 时 ,打印inner和outer
                 // evt.cancelBubble=true;
                 evt.stopPropagation();
             }
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
         li{

             margin: 10px;
             background: red;
         }


    </style>

</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
 <script type="text/javascript">
      var aul=document.getElementsByTagName("ul")[0];
      var ali=document.getElementsByTagName("li");
    /* for(var i=0;i<ali.length;i++){
         ali[i].onclick=function(){
             console.log(this.innerHTML);
         }
     }*/

      // 时间委托
      aul.onclick=function( e ){
          var evt=  e || event;
          var   _target=evt.target ||evt.srcElement;
          if (_target.nodeName.toUpperCase()=="LI"){
              console.log(_target.innerHTML);
          }
      }

         //在 ul 标签后追加 5 li标签
     for(var i=0;i< 5;i++){
      var oli= document.createElement("li");
         oli.innerHTML=i;
         aul.appendChild(oli);
     }

 </script>



</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
</head>
<body>
    <a href="">test</a>
    <form>
    <input  type="text"/>
    <input type="submit" value="sumint"/>
    </form>
    <script type="text/javascript">
    var olink=document.getElementsByTagName("a")[0];
    var oform=document.getElementsByTagName("form")[0];
    var oinput=document.getElementsByTagName("input")[0];
   //阻止跳转
    olink.onclick=function(e){
      var evt= e ||event;
       console.log("aaa");
       evt.returnValue=false;
   }
     //阻止提交
    oform.onsubmit=function(){
     console.log("submit");
     return false;
    }
    //阻止输入文本框
    oinput.onkeydown=function(){
        console.log("input");
        return false;
    }
     //阻止鼠标右键
     document.oncontextmenu=function(){
         console.log("rigth");
         return false;
     }

 </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #outer{
             200px;
            height: 200px;
            background: red;
        }
        #inner {
             100px;
            height: 100px;
            background: blue;
        }

    </style>
</head>
<body>
<div id="outer">
    <div id="inner">
    </div>
</div>

<script type="text/javascript">
    var outer =  document.getElementById("outer");
    var inner=document.getElementById("inner");
    // 和下面的比较是:会覆盖掉一个点击事件     outer.onclick=null 如果移除当前事件。可以赋值null
   /* outer.onclick=foo;
    outer.onclick=foo1;
     */
    // 注意:可以加上两个点击事件,不冲突
    outer.addEventListener("click",foo,false);
    outer.addEventListener("click",foo1,false);
    // 如果移除
    outer.removeEventListener("click",foo);
    outer.removeEventListener("click",foo1);
    function foo(){
        console.log("outer1");
    }
    function foo1(){
        console.log("inner");
    }



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

发表回复

您的电子邮箱地址不会被公开。