事件

dom中的事件

1.添加事件的方式有两种:

<html>
 <head>
 </head>
 <body>
      <input type="button" value="点击" id="one"/>
 </body>
   <script>
方式1:
    //1.获得要添加的元素对象
    var one = document.getElementById("one");
    //2.添加事件函数属性
    one.onclick=funciotn(){
        alert("jiushishi");
    }    

方式2:
    //<input type="button" value="点击" id="one" onclick="alert('zaishishi')"/>
   </script>


</html>




2. onblur(失去焦点)和onfocus(获得焦点)
 

<html>
 <head>
 </head>
 <body>
    <input type="text" id="one" />
 </body>
   <script type="text/javascript">
    var one = document.getElementById("one");
    one.onblur=function(){
        alert("失去焦点!");
    }   //光标离开鼠标闪烁处
    one.onfocus=function(){
        alert("得到焦点!");
    }   //得到焦点就是让鼠标的光标在某点闪烁,让你输入内容
   </script>

</html>

3. onchange 域的内容被更改

<html>
 <head>
    <title>onchange事件.html</title>
    <meta http-equiv="content-type" content="text/html; charset=unicode">
 </head>
 <body>
        <input type="text" id="one"  />
          
          <select id="two" >
              <option>大专</option>
              <option>本科</option>
          </select>
 </body>
   <script type="text/javascript">
    var one = document.getElementById("one");
    one.onchange=function(){
        alert("被改变了!");
    }

    var two =document.getElementById("two");
    two.onchange=function(){
        alert("被改变了!");
    }
   </script>

</html>

 4.onkeydown, onkeypress, onkeyup


onkeydown  某个键盘按键被按下
onkeypress 某个键盘按键被按下并松开
onkeyup       某个键盘按键被松开
    




<html>
  <head>
    <title>05-dom中的事件04.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
   
  <body>
          <input type="text" id="one"  />
  </body>
    <script type="text/javascript">
    
    //event => 封装了事件发生的详情
        //keyCode属性 => 按下按键的unicode码
    
            var one = document.getElementById("one");
            
            one.onkeydown=function(event){
                //1 获得摁下的按键
                var key = event.keyCode;
                //2 判断按键按下的是否是回车
                if(key=13 ){
                        //是=>表单提交
                    alert("表单被提交了");                    
                }
            }
            
    </script>
</html>

5.onload 当页面加载完成时触发。当页面加载完之后,在进行一些任务。

原文地址:https://www.cnblogs.com/sjxbg/p/5768408.html