js事件

一、事件分类

1， 一般事件

①    onfocus  获得焦点

   function clearInput(){

              var username =document.getElementById('username');

              username.value = '';

       }

 

②    onblur   失去焦点

    function getin(){

              var username =document.getElementById('username');

              username.value = '请输入用户名';

       }

 

③    onchange  内容改变

    function change(){

                     var select =document.getElementById("select");

                     var div =document.getElementById("div1");

                     div.style.fontSize =select.value+'px';

              }

 

2， 页面事件

①    onload()  整个文档被加载完之后才触发的事件。

②    setInterval()和setTimeout（）的区别：

setInterval（）每隔多少秒执行某个函数（一直执行）

setTimeout（）多少秒之后执行某个函数（执行一次）

3， 鼠标事件

①    Onmouseover() 鼠标移入

②    Onmouseout()   鼠标移出

③    Onmousemove()  鼠标移动（获得坐标）

④    Onclick()   鼠标点击某个对象

4， 键盘事件

①    onkeydown()    某个键盘的键被按下

    function down(e){

                     if(window.event){

                            alert(e.keyCode);

                     }else if(e.which){

                            alert(e.which);

                     }

              }

 

②    onkeyup()      某个键盘的键被松开

    function show(){

                     //先获得文本域输入的值

                     var text =document.getElementById("text");

                     var content = text.value;

                     var len = content.length;

                     document.getElementById("span1").innerHTML="你已经输入"+len+"个文字";

              }

5， 表单事件

①    onsubmit()    提交按钮被点击

    function validate(){

                     var username =document.getElementById('username').value;

                     var email =document.getElementById("email").value;

                     var reg =/^[a-zA-Z]\w{6,11}/;

                     var reg2 =/\w+@\w+\.(com|cn|org|net)/;

                     if(reg.exec(username) ==null || reg2.exec(email)== null){

                            alert('格式不正确');

                            return false;

                     }else{

                            alert('格式良好');

                            return true;

                     }

              }

注意：

①backgroundColor 是驼峰法（DOM方式操作CSS样式的时候）

普通的CSS文件的时候用background-color

②    onsubmit事件应该绑定在form表单里，而不是submit按钮上。

③    css选择器：可以把css选择器比喻成用来找到某个元素的机器。