JavaScript DOM高级程序设计 4.2 事件类型--我要坚持到底！

对象事件

• load和unload（载入页面的时候调用load，关闭页面的时候调用unload）
• abort和error

对于载入图像时出现错误的情况，可以使用error事件侦听器来进行说明：

ADS.addEvent(window,'load',function(){ //创建一个图像元素

    var image=document.createElement('IMG'); //当图像载入后将其添加到文档主体

    ADS.addEvent(image,'load',function(){ document.body.appendChild(image); }); //如果载入时出错，则添加相应信息

    ADS.addEvent(image,'error',function(){ var message=document.createTextNode('The image failed to load'); document.body.appendChild(message); }); //设置图像的src属性以便浏览器取得图像

    //可以在这边随便添加任何图片的url

    image.setAttribute('src','http://advanceddomscripting.com/images/working.jpg'); //除了下面的这幅图像不存在而且会发生载入错误外，与上面都相同

    var imageMissing=document.createElement('img'); ADS.addEvent(imageMissing,'load',function(){ document.body.appendChild(imageMissing); }); ADS.addEvent(imageMissing,'error',function(){ var message=document.createTextNode('imageMissing failed to load'); document.body.appendChild(message); }); //可以在这边随便添加任何图片的url

    imageMissing.setAttribute('src','http://advanceddomscripting.com/images/missing.jpg'); });

• resize事件（窗口大小调整时该事件被调用）
• scroll事件（适用于具有overflow:auto样式的元素，当元素滚动期间被连续调用。）

鼠标移动事件

• 鼠标移动时候连续调用mousemove
• 移动到新对象mouseover
• 移出新对象mouseout

 

ADS.addEvent(window,'load',function(W3CEvent){ //一个用于将事件类型和对象

    //记录到日志窗口中的方法

    function logit(W3CEvent) { switch(this.nodetype) { case ADS.node.DOCUMENT_NODE: ADS.log.write(W3CEvent.typp+' on document'); break; case ADS.node.ELEMENT_NODE: ADS.log.write(W3CEvent.type+' on box'); break; } } ADS.addEvent(document,'mousemove',logit); ADS.addEvent(document,'mouseover',logit); ADS.addEvent(document,'mouseout',logit); var box=document.getElementById('box') ADS.addEvent(box,'mousemove',logit); ADS.addEvent(box,'mouseover',logit); ADS.addEvent(box,'mouseout',logit); });

鼠标单击事件

• 当按下时，mousedown
• 抬起时mouseup
• 只有鼠标不动的时候才会发生click
• 双击dblclick

ADS.addEvent(window,'load',function(W3CEvent){ //一个用于将事件类型和对象

    //记录到日志窗口中的方法

    function logit(W3CEvent) { switch(this.nodetype) { case ADS.node.DOCUMENT_NODE: ADS.log.write(W3CEvent.typp+' on document'); break; case ADS.node.ELEMENT_NODE: ADS.log.write(W3CEvent.type+' on box'); break; } } ADS.addEvent(document,'mousedown',logit); ADS.addEvent(document,'mouseup',logit); ADS.addEvent(document,'dblclick',logit); var box=document.getElementById('box') ADS.addEvent(box,'mousedown',logit); ADS.addEvent(box,'mouseup',logit); ADS.addEvent(box,'click',logit); ADS.addEvent(box,'dblclick',logit); });

键盘事件

• keydown某个键盘被按下时调用。
• keyup事件相应的键被释放时调用。
• keypress事件紧随keyup事件之后。

表单相关事件

• submit和reset事件

这里有个js代码，验证加拿大邮政编码的，很简单，所以仅仅看看代码。

function isPostalCode(s) { return s.toUpperCase().match(/[A-Z][0-9]\s*[0-9][A-Z][0-9]/i); } ADS.addEvent(window,'load',function(){ ADS.addEvent( document.getElementById('canadianAddress'), 'submit', function(W3CEvent){ var postalCode=document.getElementById('postalCode').value; //使用正则表达式来检查格式是否有效

            if (!isPostalCode(posalCode)) { alert('That\'s not a valid Canadian postal code!'); //提交表单

 ADS.preventDefault(W3CEvent); } } ); });

• blur和focus事件

focus事件会在用户单机一个元素或者通过按Tab键遣换到一个元素时候被调用，而单机元素之外其他地方护着Tab键离开元素，则会在原先调用focus事件元素上调用blur事件

下面是为了邮政编码字段添加blur和focus侦听器的载入事件侦听器

ADS.addEvent(window,'load',function(){ //添加初始样式

    var postalCode=document.getElementById('postalCode'); postalCode.className='inputMissing'; //当获取焦点屎将类修改为编辑

    ADS.addEvent(postalCode,'focus',function(W3CEvent){ //通过修改类来表示用户正在编辑这个字段

        this.className='inputEditing'; }); //当失去焦点时候对信息进行验证，并根据输入的值是否有效重新修改样式

    ADS.addEvent(postalCode,'blur',function(W3CEvent)) { if (this.value=='') { //修改类以表示缺少内容

            this.className='inputMissing'; }else if (!isPostalCode(this.value)) { //修改类以表示内容无效

            this.className='inputInvalid'; }else { //修改样式以表示内容完成

            this.className='inputComplete'; } } });

• change事件

适用于<input>,<select>,<textarea>表单元素，该事件会在focus事件发生后，当用户在focus和blur之间进行修改元素的值时被调用。

//验证表单的同时，还能自动生成表单其他字段的内容

ADS.addEvent(window,'load',function(){ var postalCode=ADS.$('postalCode'); ADS.addEvent(postalCode,'change',function(W3CEvent){ var newPostalCode=this.value if (!isPostalCode(newPostalCode)) { return; } var reg=new XMLhttpRequest(); req.open('POST','server.js?postalCode='+newPostalCode,true); req.onreadystatechange=function(){ if (req.readyState==4) { eval(req.responsetText); if (ADS.$('street').value=='') { ADS.$('street').value=street; } if (ADS.$('city').value=='') { ADS.$('city').value=city; } if (ADS.$('province').value=='') { ADS.$('province').value=province; } } } req.send(); }); });