javascript 事件绑定

一、最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性。事件属性名称由事件类型外加一个“on”前缀构成。这些属性也被称为事件处理器

<INPUT TYPE="text" NAME="first_name" onChange="convertToUpper(this)">

或者

<INPUT TYPE="text" NAME="first_name" onChange="javascript : js code">

或者

Dom.onclick = function(e){  //todo  }

二、js方法绑定事件

1、dom对象的attachEvent()方法给该dom元素的事件（该方法仅支持冒泡事件——IE绑定事件的方式）

elemObj.attachEvent(事件, func);这个方法有一个值得注意的地方：您不能在元素被载入浏览器之前执行这个语句。该对象的引用在相应的HTML按键元素被浏览器创建之前，都是无效的。因此，要让这样的绑定语句或者在页面的底部运行，或者在BODY元素的onLoad事件处理器调用的函数中运行。

2、dom对象的addEventListener()方法给该dom对象的事件（支持捕捉事件和冒泡事件——w3c绑定事件的方式）

elemObj.addEventListener(on事件, func, captureFlag);这个方法的第一个参数是一个声明事件类型的字符串（不带"on"前缀），比如click，mousedown，和keypress。第二个参数是绑定的函数。第三个参数则是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。

3、捕捉型事件和冒泡型事件：

事件冒泡：事件从当前元素对象触发，然后向上层元素搜索相同对象事件并触发（直搜到document节点）。IE事件默认都只这种类型的事件。

事件捕获：从document节点开始搜索事件，然后向下层搜索相同对象事件并触发，直到当前元素节点。

4、

停止事件冒泡: 

IE: window.event.cancelBubble=false; 

Other: e.stopPropagation(); 

三、事件解除绑定

IE: detachEvent 

Other: removeEventListener 

 四、常用举例

var button = document.getElementById("buttonId");
if(button.addEventListener){
    button.addEventListener("click",eventFunction,false);
}else if(button.attachEvent){
    button.attachEvent("onclick",eventFunction);
} 

 

 

 

五、window.event

1、event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。event的某些属性只对特定的事件有意义。

2、属性：

altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y

 

3、常用属性详细说明：

altKey：检查alt键的状态

shiftKey：检查shift键的状态

ctrlKey：检查ctrl键的状态

keyCode：检测键盘事件相对应的内码

srcElement： 返回触发事件的元素

button：检查按下的鼠标键，仅用于onmousedown，onmouseup和onmousemove事件。对其他事件，不管鼠标状态如何，都返回0（比如onclick）

type：返回事件名

 

4、兼容性

//IE：有window.event对象
//FF：没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)
<script>
  function test(event) {
  var event = event || window.event;
  //do Something
  }
</script>
<input type="button" value="click" onclick="test(event)"/>