事件处理程序

Veröffentlicht am

以下上对高程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了，不怎么分开用。