事件处理程序

以下上对高程3第13章的一些学习总结。

HTML事件处理程序:
<script type="text/javascript">
    function showMessage(){
        alert("Hello world!");
    }
</script>
<input type="button" value="Click Me" onclick="showMessage()" />

函数中的this指事件的目标元素。变量event可直接访问事件对象。

<input type="button" value="Click Me" onclick="alert(event.type)">
DOM0级事件处理程序:
var btn = document.getElementById("myBtn");
btn.onclick = function(){
    alert(this.id);
};   
var removeBtn = document.getElementById("myRemoveBtn");
removeBtn.onclick = function(){
    btn.onclick = null;  //删除通过dom0级方法指定的事件处理程序
};

this指当前元素。一个事件只支持一个事件处理程序。event对象作为window对象的一个属性存在。

<body>
<a href="http://www.nczonline.net/" id="myLink">Click Me</a>
<script type="text/javascript">
    var link = document.getElementById("myLink");
    link.onclick = function(event){
        event.preventDefault(); //阻止特定事件的默认行为,阻止链接导航调转至href这一默认行为
    };    
</script>
</body
DOM2级事件处理程序: IE9、Opera、Firefox、Chrome和Safari都支持DOM2级事件处理程序。
<body>
<input type="button" id="myBtn" value="Click Me" />
<p>IE中这段代码不起作用</p>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.addEventListener("click", function(){
        alert(this.id);
    }, false);
</script>
</body>

可以添加多个事件处理程序(一个事件上),按添加的顺序触发。与DOM0级方法一样,此事件处理程序也是在其依附的元素的作用域中运行。this为该目标元素。

<body>
<input type="button" value="Click Me" id="myBtn" />
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    document.body.addEventListener("click", function(event){
        alert(event.eventPhase);   //1,捕获阶段调用的事件处理程序,event.eventPhase等于1,若事件处理程序处于目标对象,等于2,冒泡阶段调用的等于3.
    }, true);
</script>
</body>
IE事件处理程序: 支持IE事件处理程序的浏览器有IE(在旧版本IE(代表IE8-)中
指定事件处理程序的方法为attachEvent( ))和Opera。attachEvent()添加的事件处理程序都被添加到了冒泡阶段。
var btn = document.getElementById("myBtn");
   btn.attachEvent("onclick", function(){
       alert("Clicked");
   });

this为window。事件处理程序在全局作用域中运行。可以添加多个事件处理程序(一个事件上),按与添加的顺序相反的顺序触发,即先进后出。

 <body>
<input type="button" id="myBtn" value="Click Me" />
<p>This example only works in Internet Explorer.</p>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        alert(window.event.srcElement === this); //true
    };   
    btn.attachEvent("onclick", function(event){
        alert(event.srcElement === this);  //false,event.srcElement同DOM中的target属性,为实际目标
    }); 
</script>
</body>

DOM2和IE事件处理程序一般都直接调用跨浏览器的事件对象EventUtil了,不怎么分开用。