html事件处理缺点,JS—事件处理程序

简单理解

事件是用户或浏览器自身执行的某种动作。诸如click、load

而事件处理程序则是响应某个事件的函数。诸如onclick、onload

也就是当用户与页面上某个元素进行某种交互(click)时，会执行事件处理程序内(onclick)的函数。如果没有为这个元素设立事件处理程序，那么用户与该元素进行的交互不会有反应。

事件处理程序

event、this

这个函数中有一个局部变量event、也就是事件对象，不用自己去定义，也不用从函数的参数列表中读取。

this值等于事件的目标元素。

HTML事件处理程序

上：单击，下：双击

【优点】扩展作用域，我们可以直接在onclick的属性值中使用其他属性。alert(value)

【缺点】1、存在一个时差问题，用户可能会在html元素一出现就触发相应的事件，但是该事件处理程序可能在js脚本内，还没有被解析，就会发生错误。2、扩展事件的处理程序的作用域链在不同浏览器中会导致不同的结果

3、HTML代码与JS脚本代码紧密耦合。

DOM0级事件处理程序

js指定事件处理程序，将一个函数赋值给一个元素的事件处理程序的属性。

//第一步:获得目标元素

var btn=document.getElementById("d1");

//第二步：为元素的事件处理程序属性赋值

btn.οnclick=function(){

alert(this.value);

}

btn.οnclick=null;//将对匿名函数的引用变为0，从而删除。

程序中的this引用当前元素，可以通过this访问元素的任何属性和方法。

【优点】

1、简单

2、具有跨浏览器的优势

【缺点】

1、如果代码位于按钮后面，就有可能一段时间内怎么单击都没有反应。

2、为一个元素添加多个相同事件处理程序前者会被后者覆盖。

DOM2级事件处理程序

定义了两个方法，用于处理指定和用于删除事件处理程序的操作。

addEventListener() removeEventListener()

这两个方法都接受三个参数：要处理的事件名，作为事件处理程序的函数，和一个布尔值。布尔值为true表示在捕获阶段调用时间处理程序，为false表示在冒泡阶段调用。

//第一步:获得目标元素

var btn=document.getElementById("d1");

//第二步：指定事件处理程序

btn.addEventListener('click',function(){

alert(this.value);

},false);

btn.addEventListener('click',function(){

alert(this.id);

},false);

上述代码中，为click事件制定了两个事件处理程序，结果分别按声明顺序执行。

【注意】移除时，如果只把方法名替换了，课达不到删除的效果，因为我们在指定事件处理程序时使用的是匿名函数，每次声明一个匿名函数即使代码一样，但是却是不同的对象。所以我们需要声明一个变量，让他引用这个匿名函数。然后通过这个引用来删除对原来匿名函数的删除。

var handler=function(){

alert(this.value);

};

btn.addEventListener('click',handler,false);

//移除

btn.removeEventListener('click',handler,false)

写完这段笔记后，我想可不可以在html指定事件处理程序时，使用函数的方式。后来我试了一下。

error：不能使用引用，需要一段执行代码。

error：弹出警告框，为undefined。

function handler(){

alert(this);

};

测试：[object window]说明该this并没有指向目标元素。

为什么呢？

当我们这样写的时候，"alert(value)"这行代码被自动加到这样的函数内：

with(document){

with(this){

//元素属性值

}

}

知道了这个原理，我们可能会觉得那么在handler函数里面补上不就可以啦，事实上也是不行的，因为我们添加的函数的his值并不会指向元素

IE事件处理程序

在IE9以前包括IE9的浏览器都支持DOM2级事件处理程序，IE8是最后一个仍然使用其专有事件系统的主要浏览器。

而IE8及更早版本只支持事件冒泡，所以在指定事件处理程序时，就可以不指定采用怎么样的事件流机制啦。

他也是通过两个方法实现指定与移除事件处理程序的，移除时，也是需要先将处理程序函数赋值给一个变量。

//第一步:获得目标元素

var btn=document.getElementById('d1');

//第二步：指定事件处理程序

function handler(){

alert('clicked');

};

btn.attachEvent("onclick",handler);

btn.detachEvent('onclick',handler);

但总是有区别的：

区别1：事件处理程序的作用域不是在所属元素，而是全局对象。

区别2：为一个元素指定多个事件处理程序时，事件处理程序的执行函数与dom2级相反。即与声明顺序相反。

跨浏览器的事件处理程序

var EventUtil={

addHandler:function(element,type,handler){

if(element.addEventListener){

element.addEventListener(type,handler,false);

}else if(element.attachEvent){

element.attachEvent("on"+type,handler);

}else{

element["on"+type]=handler;

}

},

removeHandler:function(element,type,handler){

if(element.removeEventListener){

element.removeEventListener(type,handler,false);

}else if(element.detachEvent){

element.detachEvent("on"+type,handler);

}else{

element["on"+type]=null;

}

}

}

var btn=document.getElementById('d1');

function handler(){

alert('clicked');

};

EventUtil.addHandler(btn,'click',handler);

EventUtil.removeHandler(btn,"click",handler);

因为除去网景，大多数浏览器都是支持冒泡的事件流的，所以在设计跨浏览器代码时，只需要关注冒泡阶段。

解决方法是，创建对象，并在对象内调用方法，这样可以起到一定的封装作用。

针对：DOM0级，DOM2级，IE方法。三种情况。

顺序：普遍优先。

不足：代码中没有针对this作用域的区别加以