JavaScript----事件

事件

一， 事件介绍

 事件一般是用于浏览器和用户操作进行交互。例如：点击事件

二， 内联模式

   <input type="button" value="按钮" onclick="alert('1111');"  />	

   <input type="button" value="按钮" onclick="box();"  />	

三， 脚本模式

 var input = document.getElementsByTagName('input')[0];	 //得到input对象
  input.onclick = function () {						     //匿名函数执行
	alert('Lee');
  };

四，事件类型

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

click：   ---    当用户单击鼠标按钮时触发。

dblclick： ---    当用户双击主鼠标按钮时触发

mousedown：-----当用户按下了鼠标还未弹起时触发

mouseup： ---   当用户释放鼠标按钮时触发。

mouseover：---   当鼠标移到某个元素上方时触发

mouseout：-----   当鼠标移出某个元素上方时触发。

mousemove：----- 当鼠标指针在元素上移动时触发。 可以触发多次

2.键盘事件

 keydown：  ---- 当用户按下键盘上任意键触发

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

键盘代码：e.keyCode ----- 返回对应键盘代码值

ctrlKey、shiftKey、altKey ----- 返回值为：布尔值，按下就返回true,不按返回false

例如：按下Ctrl + 回车键

e.ctrlKey && e.keyCode==13

3. HTML事件

load：---- 当页面完全加载后在window上面触发 作用于 window

下面针对表单的事件：

select：---   当用户选择文本框(input或textarea)中的字符触发。 作用于 input

change：----  当文本框(input或textarea)内容改变且失去焦点后触发。 作用于 input

focus： ----   当页面或者元素获得焦点时触发   作用于 input

blur： -----   当页面或元素失去焦点时触发  作用于 input

submit：----   当用户点击提交按钮触发    作用于 form

reset：  ----   当用户点击重置按钮触发。  作用于 form

resize： ----    当窗口或框架的大小变化时  作用于 window

scroll： ----    当用户滚动带滚动条的元素时触发 作用于 document

五，事件对象

Event对象 ----- 当【事件】触发时，就会产生一个【事件对象】，称之为【event对象】。
-----它包含了所有与【事件】相关的信息。

1，事件中的普通对象： 节点对象、this对象

2，获取事件对象 ：

   var e = e || window.event ; 

3，事件对象属性：

   clientX  ------  “可视区”屏幕横坐标

   clientY  ------  “可视区”屏幕纵坐标
 
   screenX  ------  “屏幕区”横坐标

   screenY  ------  “屏幕区”纵坐标

4, 滚动条的位移

    scrollTop  -----   滚动条Y轴位移
  
    scrollLeft  -----    滚动条X轴位移

   Document.documentElement.scrollTop    //IE、火狐

   Document,body.scrollTop               //谷歌

5， clientWidth ----- 元素宽度 包含：width + padding

  clientHeight  -----  元素高度   包含：width + padding 


  例如：

   document.documentElement.clientWidth  ----获取“可视区”屏幕宽度

   document.documentElement.clientHeight ----获取“可视区”屏幕高度

6， offsetWidth ----- 元素宽度 包含：width + padding+ border

offsetHeight -----元素高度 包含：height+ padding+ border

   例如： 

    Var box = document.getElementById(‘box’);

    Box.offsetWidth

7， offsetLeft ------ 元素相对于父元素的左侧距离 【元素要有绝对定位设定】

offsetTop ------ 元素相对于父元素的顶部距离 【元素要有绝对定位设定】

如果父元素没有相对点，则默认html节点为参照点
如果父级元素上有相对点，就以此节点为参照点。

8， 获取事件触发的节点 ：var x = e.target || e.srcElement;

9，事件冒泡 event.cancelBubble = true;

	 谁阻止冒泡，就在谁上面使用。

       Box.onclick = function(e) {

         e.cancelBubble = true;   //阻止冒泡
      }