JavaScript 基础5 事件

1.事件

• 事件是发生并得到处理的操作，即：事情来了，然后处理。
  如：
  1 、电话铃声响起（事件发生）—需要接电话（处理）
  2、学生举手请教问题（有事了）—需要解答（处理）
  3 、咱们班有个同学昨天被虐了（出事了）—去给他报仇（处理）
  4、按钮被点击了，然后对应一个函数来处理

2、事件绑定方式

• 1、内联模式

• 2、外联模式/脚本模式(最多)

• 绑定事件格式：
  元素节点.on + 事件类型 = 匿名函数。

onclick 事件处理的函数

      function btnClick(){
         alert("内联模式")
     }

     window.onload = function(){
         var oBtn = document.getElementById("btn1");
         oBtn.onclick = function(){
             alert("外联模式");
         }
     }

3.事件处理函数

3.1.鼠标事件，页面所有元素都可触发

事件	条件
click	单击
dblclick	双击
mouseover	鼠标移入
mouseout	鼠标移出
mousemove	鼠标移动（会不停的触发）
mousedown	鼠标按下
mouseup	鼠标抬起
mouseenter	鼠标移入
mouseleave	鼠标移出

• 【注】经过子节点会重复触发。
  • mouseover
  • mouseout
• 【注】经过子节点不会重复触发。IE8以后才有。
  • mouseenter
  • mouseleave

3.2.键盘事件

• keydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发。

	onkeydown=function(){
	               alert('Lee');
	};

• keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发

	onkeypress= function(){
	               alert('Lee');
	};

• keyup：当用户释放键盘上的键触发。

	onkeyup=function() {
	               alert('Lee');
	};

3.3HTML事件

1、window事件

• load：当页面完全加载后在 window 上面触发，或当框架集加载完毕后在框架集上触发。
  window.οnlοad=function() { alert(‘Lee’); };
• unload：当页面完全卸载后在 window 上面触发，或当框架集卸载后在框架集上触发。
  window.οnunlοad= function(){ alert(‘Lee’); };
• select：当用户选择文本框(input 或 textarea)中的一个或多个字符触发。
  input.οnselect=function(){ alert(‘Lee’); };
• change：当文本框(input 或 textarea)内容改变且失去焦点后触发。
  input.οnchange=function(){ alert(‘Lee’); };
• focus：当页面或者元素获得焦点时在 window 及相关元素上面触发。
  input.οnfοcus= function(){ alert(‘Lee’); };
• blur：当页面或元素失去焦点时在 window 及相关元素上触发。
  input.οnblur=function(){ alert(‘Lee’); };
• submit：当用户点击提交按钮在元素上触发。
  form.οnsubmit=function(){ alert(‘Lee’); };
• reset：当用户点击重置按钮在元素上触发。
  form.οnreset=function(){ alert(‘Lee’); };
• resize：当窗口或框架的大小变化时在 window 或框架上触发。
  window.οnresize=function(){ alert(‘Lee’); };
• scroll：当用户滚动带滚动条的元素时触发。
  window.οnscrοll=function() { alert(‘Lee’); };

      window.onload = function(){
          var i = 0;
        /*  window.onscroll = function(){
             document.title = i++;
         } */

         window.onresize = function(){
             document.title = i++;
         }
      }

2、表单事件

	window.onload = function(){
     var oInput1 = document.getElementById("input1");
    /*  oInput1.onblur = function(){