事件分类<style type="text/css"> <script type="text/javascript">

<style type="text/css">

        input{
          border:1px solid green;
        }
        </style>
    </head>

    <body>
      <div style="width:100px;height:100px;background-color:tomato"></div>
      文本类操作事件
      <input type="text" value="请输入用户名" style="color:#999" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" 
       onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}">

       窗口操作类
       <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<script type="text/javascript">

键盘事件 keydown// keyup// keypress

keydown > keypress > keyup

keydown和keypress的区别

keydown可以响应任意键盘按键，除了fn辅助键，keypress只可以响应字符类键盘按键

例1

document.onkeypress = function(){
    console.log('keypress');
}
document.onkeydown = function(){
    console.log('keydown');
}
document.onkeyup = function(){
    console.log('keyup');
}

事件分类1-06-23 211137.jpg

例2

document.onkeypress = function(e){
    console.log(e);
}
document.onkeydown = function(e){
    console.log(e);
}

keypress返回ASCII码，可以转换成相应字符

例3

document.onkeypress = function(e) {
    console.log(String.fromCharCode(e.charCode));
}//Sting是上面的静态方法fromCharCode，在里面直接放unicode编码（包含ASCII码），直接转换成对应的字符

事件分类，例3--0 221407.jpg

文本类操作事件

input,focus,blur,change

input无论加还是减，变一下就会更新一次事件

var input = document.getElementsByTagName('input')[0];
input.oninput = function(e){
  console.log(this.value);
}

事件分类input-06-24 150512.jpg

change聚焦和失去焦点是否发生改变，发生改变就会触发

var input = document.getElementsByTagName('input')[0];
input.onchange = function(e){
  console.log(this.value);
}

事件分类change-06-24 151006.jpg

窗体操作类(window上的事件)

scroll//滚动条滚动scroll事件触发 load

window.onscroll = function(){
  console.log(window.pageXOffset +" " +window.pageYOffset);
}

window.onload = function(){
  var div = document.getElementsByTagName('div')[0];
  console.log('div');
  div.style.width="100px";
  div.style.height="100px";
  div.style.backgroundColor="skyblue";
}//方法效率慢，不用，要等待整个文档解析完成以后，randomTree构建之后，dom所有文档信息、图片下载完成之后，页面全部就绪的时候，window触发load事件

// IF6没有fixed定位

    </script>
    <!-- <div>ww</div> -->load事件