下面用几行代码描述一下js的事件处理程序
<input type="button" name="button" value="button" onclick="clickX(event,this)">
<input class="button2" type="button" name="button2" value="button2">
<input class="button3" type="button" name="button3" value="button3">
<script type="text/javascript">
//HTML事件处理程序
//缺点:有时差问题;HTML与js代码紧密耦合
var clickX = function(event,that){
console.log(event); //事件对象
console.log(that.value);
};
// DOM0级事件处理程序:将一个函数赋值给一个事件处理程序属性
// 每个元素都有自己的事件处理程序属性,并且属性通常小写
// 被认为是元素的方法
var button2 = document.querySelector(".button2");
button2.onclick = function(event){
console.log(event);
console.log(this.className);
};
// DOM2级事件处理程序
//true(false)表示的是在捕获阶段(冒泡阶段)调用事件处理程序
//相比DOM0级事件,好处是可以添加多个事件处理函数
// 只能使用 removeEventListener() 函数来移除事件;
//移除时传入的参数与添加处理程序中使用的参数相同;
// 即以上方法对匿名函数是无法移除的,所以下面三个事件无法移除
var button3 = document.querySelector(".button3");
button3.addEventListener("click",function(){
console.log(this);
},false);
button3.addEventListener("mouseover",function(){
this.style.color = "#39f";
},false);
button3.addEventListener("mouseleave",function(){
this.style.color = "#333";
},false);
</script>