JS高级程序设计 表单部分

1,表单

取得表单元素form的引用:
1,通过ID取得,
2,通过document.forms取得页面表单集合,
3,通过document.forms[name]取得名称为name的表单,
4,可以通过document[formName]取得表单,但不建议这种方式

表单元素独有的属性和方法:

  • acceptCharset:服务器能够处理的字符集,等价于HTML中的accept-charset特性

  • action:接受请求的URL,等价于HTML中的action

  • elements:表单中所有控件集合

  • enctype:请求的编码类型

  • length:表单中控件的数量

  • method:要发送的http请求类型,通常为get或post

  • name:表单名称

  • reset():重置表单

  • submit():提交表单

  • target:用于发送请求和接受响应的的窗口名称

(1)提交按钮

定义提交按钮:将input或button元素的type定义为submit都可以定义提交按钮,也可以将input的type定义为image来定义提交按钮;在表单获得焦点并且又提交按钮的前提下,按下回车键即可提交表单;浏览器会在将表单提交给服务器前触发submit事件,可以通过该事件来验证表单数据,通过取消事件的默认行为来阻止表单提交!
也可以通过javascript的submit()方法来提交表单,但是该方法不会触发submit事件事件,因此应在调用该方法之前验证表单!
阻止用户多次提交表单:在第一次提交表单后就禁用提交按钮或利用onsubmit事件处理程序来阻止表单提交!

(2)重置表单

定义重置按钮:将input或button元素的type定义为reset都可以定义提交按钮,重置表单会触发reset事件,可以在必要时通过该事件来阻止表单重置!
也可以通过javascript的reset()方法来重置表单,该方法会触发reset事件!

(3)表单字段

每个表单都有一个elements属性,该属性是表单中所有控件的集合;该集合的顺序与他们出现在标记中的顺序相同,可按照位置或name来访问其中的元素:document.forms[0].elements[0]或者document.forms[0].elements[name];如果有多个表单控件使用同一个name,就会返回一个NodeList!

   1,共有表单字段属性

除了fieldset元素外,所有表单字段都拥有相同的一组属性。由于input元素可以表示多种表单字段,因此有些字段只适用于某些字段,但还有一些属性是所有字段共有的:

  • disabled:布尔值,表示当前字段是否被禁用

  • form:指向当前字段所在表单的指针,只读

  • name:当前字段的名称

  • readOnly:布尔值,表示当前字段是否只读

  • tabIndex:表示当前字段的tab顺序

  • type:当前字段的类型

  • value:当前字段将被提交给服务器的值(对于文件字段,该值为只读)

可以通过触发submit事件后设置disabled属性,以在提交表单后禁用提交按钮,但不能使用click事件来实现,因为不同浏览器的submit触发顺序可能不同,如果如果click事件在submit事件之前发生,此时禁用该按钮,就意味着永远不会提交该表单了!不过此方法不适用于使用javascript的submit()方法设置的表单提交,因为该方法不会触发submit事件!

   2,共有表单字段方法

   每个表单字段都有两个方法:focus()和blur();通常侦听页面的load事件,触发该事件后在表单的某个字段调用focus()方法,已将焦点转移到表单中的该字段,例如百度首页!
   在默认情况吓,只有表单字段能够获得焦点,对于其他元素,如果先将其tabIndex设置为-1,再调用focus()方法,也可以让这些元素获得焦点(opera不支持)。
   blur()方法用于从元素上移开焦点!

   3,共有表单事件

blur:当前字段失去焦点时触发

change:对于input或textarea元素,失去焦点且value改变时触发;对于select则是在其选项改变时触发,并且只要改变选项即使没失去焦点也会触发!

focus:当前字段或得焦点时触发

2,文本框脚本

两种方式创建文本框:
input:type=text,size特性显示的字符个数,maxlength特性设置文本框可接受最大字符数    
textarea:textarea元素始终呈现为一个多行文本框,可以用rows和cols特性指定文本框行数和列数,该元素无法设置可接受最大字符数量!和input一样,用户输入的内容都保存在value属性中!

(1)选择文本

以上文本框都支持select()方法,该方法用于选中文本框内所有文本;一般用于当文本框获得焦点时选中所有默认文本;

   1,选择事件:与select()方法对应的是select事件,在选中文本框中的文本时触发该事件,并且不同浏览器触发该事件的时间不同,在opera ff chrome sf中,只有用户选择了文本,并且释放鼠标才会触发该事件;而在IE中,只要选择了一个字符就会触发该事件;另外在IE FF opera中调用secect()方法也会触发该事件,而sf和chrome则不会!

   2,取得选择的文本:ff为文本框提供了selecttionStart和selectionEnd两个属性,这两个属性分别保存着所选择文本的起始位置和结束位置!可以通过着两个属性配合string的substring()方法取得所选字符串!除IE外的浏览器都支持这两个属性,在IE下有一个*document.selection对象,该对象保存着用户在整个文档区域内所选择的文本信息,但是无法确定用户具体选择页面哪个部分的文本;要取得所选文本需要先创建一个范围:document.selection.createRange(),然后通过text属性即可取得所选内容!
兼容方法:
function getSelectedText(obj){
 if(document.selection){
   return document.selection.createRange().text;
 } else {
   return obj.value.substring(obj.selectionStart,obj.selectionEnd);
 }
}

   3,选择部分文本:ff为所有文本框添加了一个setSelectionRange()方法,该方法接受两个参数,即要选择的文本的起始和结束索引;除IE外的浏览器都支持该方法,IE则使用范围选择部分文本,为文本框提供了createTextRange()方法,使用方法及兼容code如下:
if(obj.setSelectionRange){
 obj.setSelectionRange(start,end)
} else {
 var range=obj.createTextRange();
 range.collapse(true);
 range.moveStart("character",start);//start为开始位置
 range.moveEnd("character",length);//length为选择的长度
 range.select();
}
obj.focus();//要想看到文本框中的文本被选中的效果,必须让文本框获得焦点!

(2)过滤输入

   1,屏蔽字符:通常通过检测keypress事件对应的charCode,来判断是否是禁止输入的字符,如果是则调用事件的preventDefault()方法来屏蔽按键事件,需要注意的是有些浏览器对于非字符键也会触发keypress事件,另外还要注意复制粘贴等操作

   2,操作剪贴板:除opera外的游览器都支持剪贴板相关事件,HTML5也引入了剪切板事件:

  • beforecopy:在发生复制操作前触发

  • copy在发生复制操作时触发

  • beforecut:在发生剪切操作前触发

  • cut:在发生剪切操作时触发

  • beforepaste:在发生粘贴操作前触发

  • paste:在发生粘贴操作时触发


对于before***的事件,不同浏览器的实现会有所不同(p348)

3,选择框脚本

选择框除了拥有所有表单字段共有的属性和方法外,HTMLSelectElement类型还提供了下面的方法和属性:

  • add(newOption,relOption)向控件中插入新的option元素,参数为要插入的值及位置

  • multiple:布尔值,表示是否允许选择多项,同html的multiple属性

  • options:控件中所有option元素的HTMLCollection

  • remove(index):移除给定位置的选项

  • selectedIndex:基于0的选中项索引,没有选中项则该值为-1,多项选择控件只保存第一个选中项的索引

  • size:选择框中可见的行数,同HTML select元素的size属性

JS高级程序设计 事件部分(4)

内存与性能

1,事件委托

对于事件处理程序过多导致内存占用大,性能下降的解决方案是事件委托,事件委托是利用事件冒泡,只指定一个事件处理程序,就可以管理某一个类型的所有事件

做法:在DOM树中尽量高的层次上绑定事件处理程序,判断该事件对象的事件目标(DOM:event.target或IE:window.event.srcElement)来添加相应的处理程序;所有用到按钮的事件都可以采用事件委托!

如果可以的话,可以考虑为document对象添加一个事件处理程序,用以处理页面上发生的某种特定类型的事件!

2,移除事件处理程序

在通过DOM操作对页面进行removeChild()、replaceChild()、innerHTML等操作时,应提前移除事件处理程序,否则事件处理程序可能会无法被垃圾回收器回收而驻留内存!采用事件委托也有助于解决这个问题!

 

事件模拟

JS高级程序设计 事件部分(3)

测试浏览器是否支持DOM规定的HTML事件:

console.log(document.implementation.hasFeature("HTMLEvent","2.0"));//只有根据DOM2实现这些事件的浏览器才会返回true,非标准方式支持的浏览器则返回false

load事件

当页面完全加载(包括图像 js css等外部资源)完成后在window上面触发;

当图像加载完毕在img上面触发,需要注意的是:在创建新的img元素时,要在指定src属性之前指定该事件,并且如果要想在DOM中添加该新元素必须确定页面加载完成,在页面加载前操作document.body会导致错误;另外,新图像元素只要设置了src属性就会开始下载,而不是添加到页面才开始下载;在未添加到DOM的图像上触发load事件IE不会生产event对象。

在ff,sf3+,chrome和opera中,script元素也会触发load事件,可以以此检测动态加载的js是否加载完成;但是与img元素不同的是,只有设置了script元素的src属性并将其添加到文档,才会开始下载。

IE和opera还支持link元素上面的load事件,可以以此来检测动态加载的css是否加载完成

当所有框架加载完毕在框架集上面触发;

当嵌入的内容加载完毕在object上面触发

 

unload事件:当文档被完全卸载在window上面触发;当所有框架集卸载后在框架集上面触发;或当嵌入内容卸载完毕在object上面触发

 

abort:当用户停止下载过程时,如果嵌入的内容没有加载完,则在object上面触发

error:当发生javascript错误时在window上面触发;当无法加载图像时在IMG上面触发;当无法加载嵌入内容时在object上面触发;或当一个或多个框架无法加载时在框架集上面触发

select:当用户选择文本框中一个或多个字符时触发

change:当文本框失去焦点并且值被改变时触发

submit:当用户单击提交按钮提交表单时在form上面触发

reset:当用户单击重置按钮在form上面触发

resize:当窗口或框架的大小发生变化时在window或框架上面触发,该事件的event对象有一个target属性,值为document,而IE则未提供任何属性,窗口最小最大化也会触发该事件,其中FF会在用户停止改变大小时触发该事件,其它浏览器则没改变一个像素就触发一次!

scroll:当用户滚动 带滚动条的元素 时在该元素上面触发 body元素中包含所加载页面的滚动条;该事件在window上面发生,但是实际表示的是页面相应元素的变化!该事件也会在滚动期间被重复触发
混杂模式下可通过body元素的scrollLeft和scrollTop来监控其变化
标准模式下除sf之外所有浏览器都是通过HTML元素来反应该变化(sf仍然基于body跟踪)

focus:当页面或元素获得焦点时在window及相应元素上面触发

blur:当页面或元素失去焦点时在window及相应元素上面触发

 

专有事件

1,上下文菜单事件:contextmenu

该事件在单击鼠标右键时调出上下文菜单,该事件是冒泡的因此可以为document指定一个事件处理程序,用以处理页面上发生的所有此类事件;取消该事件的方法:
在兼容DOM的浏览器中使用:event.preventDefault()
在IE中使用:event.returnValue=false;
该事件属于鼠标事件,因此事件对象中包含事件发生时光标的位置等有关信息;通常使用该事件来自定义上下文菜单,并应click事件来隐藏自定义菜单;

2,卸载前事件:beforeunload

该事件发生在window上,在卸载页面前提示用户是否真的要卸载该页面,该事件对象的returnvalue属性用于设置显示给用户的提示的字符串,IE和ff都支持该事件,sf和chrome也支持,但是不会显示对话框,opera9.5-不支持该事件!

3,鼠标滚轮(mousewheel)和DOMMouseScroll事件

IE6+及sf、chrome、opera都支持mousewheel事件,当用户通过鼠标滚轮与页面交换、在垂直方向上滚动页面时,就会触发该事件,该事件可以在任何元素上面触发,最终会冒泡到document(IE)或window(opera,sf,chrome)对象;该事件的event除包含鼠标事件的所有信息外,还包含一个wheelDelta属性,当用户向前滚动滚轮时,该值为120的倍数,反方向滚动则是-120的倍数,该值可以用来判断滚轮的方向,(opera9.5-的wheelDelat值的正负号是颠倒的)

ff支持一个名为DOMmouseScroll的类似事件,该事件与鼠标滚轮有关的信息保持在detaile属性中,向前滚动时该值为-3的倍数,向后滚动则是-3的倍数;可以将该事件添加到页面任何元素,该事件会冒泡到window对象!

4,DOMContentLoaded事件

该事件在页面形成完整的DOM树之后触发,不理会外部css js img是否下载完毕;可以将该事件添加到document或window;该事件会冒泡到window,事件目标是document;这个事件既可以添加事件处理程序,也可以执行其他DOM操作,并且该事件始终在load事件之前触发!只有ff chrome sf3.1+及opera9+支持该事件

JS高级程序设计 事件部分(3) 键盘事件

   DOM2级事件规范最初规定了键盘事件,但是在最终定稿前有删除了相应内容,结果对键盘事件的支持主要遵循的DOM0,DOM3级事件为键盘事件制定了规范,但目前没有浏览器实现!

有三个键盘事件:

keydown:按下键盘任意键触发,按住不放会重复触发

keypress:按下键盘任意字符键时触发,按住不放会重复触发

keyup:释放键盘上的按键时触发

当按一下键盘上字符键时,会依次触发kedown、keypress、keyup,如果是在文本框中,触发该事件,keydown和keypress都是在文本框发生变化之前被触发的,keyup则在之后触发!

与鼠标事件一样,键盘事件同样支持修改键,键盘事件的event对象中也有ctrlKey、shiftKey、altKey和metaKey(IE不支持)属性。

(1)键码

触发keydown和keyup事件,event对象中的keyCode属性会包含一个代码,与键盘上一个特定的键对应。对于数字字母字符键,该值与ascii码中对应小写字母或数字的编码相同。非字符键盘编码表参阅(P304)!

keyup和keydown事件都会存在的特殊情况:

1,在ff和opera中,分号键的keycode为59,为ascii中的编码,IE和sf中返回186,即键盘中的按键编码,chrome未测试~~~

2,sf3以下版本中上下左右箭头和pageup pagedown返回大于3600的值;不会因为按下tab、ctrl、shift、alt而触发keyup和keydown事件。

3,opera9.5以前版本,会将非数字字母键的keycode设置为等于相应字符的ASCII编码。

(2)字符编码

在ff、chrome、sf的event对象中都包含一个charCode属性,该属性只有在发生keypress事件时才包含值,值为按下的那个字符的ascii编码,此时的keycode通常为0或所按键的键码,而IE和opera则是在keyCode中保存字符的ascii编码,跨浏览器取得字符编码,可向eventutil中添加方法:

getCharCode:function(event){

   if(typeof event.charCode==="number"){

       return event.charCode

   }  else {

   return event.keyCode;

   }

}

(3)textInput事件

DOM3级事件中规范中引入的一个新事件,当用户在可编辑区域中输入字符时触发,该方法用于替代keypress,区别是:只有在可编辑区域按下能够输入实际字符的键才能触发textInput事件。(chrome和sf3支持)

该事件的event对象中有一个data属性,保存着所按下键的字符!

JS高级程序设计 事件部分(2) 鼠标事件

事件类型

DOM2级事件规定了5种事件:

  • UI事件:用户与页面上的元素交互时发生

  • 鼠标事件

  • 键盘事件

  • HTML事件:浏览器窗口发生变化或发生特定的客户端/服务器交互交互时触发

  • 变动事件:当底层的DOM结构发生变化时触发

1,UI事件主要与元素的焦点相关,但是支持UI事件的浏览器非常少,因此不推荐使用,有3个UI事件:

DOMActive:表示元素已经被用户操作(通过键盘或鼠标)激活

DOMFocusIn:表示元素已经获得焦点

DOMFocusOut:表示元素已经失去焦点

2,鼠标事件,DOM定义了7个鼠标事件

click:当用户单击主鼠标按钮或按下回车键时触发,mousedown+mouseup等于一次click

dblclick:当用户双击主鼠标按钮时触发,两次click相当于一次dblclick

mousedown:用户按下鼠标任意键时触发,不能通过键盘触发

mouseout:鼠标指针移除元素时触发,可能是移动到外部元素或子元素,不能通过键盘触发

mouseover:鼠标移动到某个元素的边界之内时触发,不能通过键盘触发

mouseup:用户释放鼠标按钮时触发,不能通过键盘触发

mousemove:鼠标在元素内部移到是重复触发,不能通过键盘触发

   页面所有元素都支持鼠标事件,所有鼠标事件都会冒泡,也可以取消冒泡,而取消鼠标事件将会影响浏览器的默认行为。取消鼠标事件还会影响到其他事件,click和dblclick事件都会依赖于其他先行事件的触发,而mousedown和mouseup则不受其他事件影响

(1)客户区坐标位置

鼠标事件都是在浏览器视口上的特定位置上发生的,这个坐标位置保存在event对象的clientX和clientY属性中,所有浏览器都支持该属性,这些值不包括页面滚动的距离!

(2)屏幕坐标位置

保存在event对象中的screenX和screenY属性中

(3)修改键

包括shift,ctrl,alt和meta(windows中的win键盘或者apple的cmd键)四个键,DOM为此规定了4个属性,分别保存在event对象中的shiftKey,ctrlKey,altKey和metaKey中,当用户操作鼠标事件同时按下对应键,则该属性值为true,默认为false。其中IE不支持metaKey属性。

(4)相关元素

onmouseover事件的目标元素是获得光标的元素,而相关的元素失去光标的元素

onmouseout则相反,事件的目标元素是失去光标的元素,相关元素则是获得光标的元素

DOM规定event对象的relatedTarget属性包含相关元素的信息,该属性只在onmouseover和onmouseout事件才包含值,其他事件该属性为null

IE不支持该属性,但提供了另外两个属性:

omouseover事件的相关元素保存在fromElement属性中

onmouseout事件相关元素保存在toElement属性中

可向EventUtil添加如下方法兼容:

getRelatedTarget:function(event){

   if(event.relateTarget){

       return event.relateTarget;

   } esle if(event.toElement){

       return event.toElement;

   } else if(event.formElement){

       return event.formElement;

   }

}

(5)鼠标按钮

1,只有主鼠标按钮按下才会触发click事件

2,对于mouseup和mousedown事件中,event对象中有一个button属性,该鼠标的值表示按下的按钮,该属性可能有0,1,2三个值,分别为主鼠标按钮,滚轮和鼠标右按钮

IE中的button属性:0 没有按下按钮,1 按下主鼠标按钮,2 按下次鼠标按钮,3 同时按下主、次按钮,4 按下中间按钮,5 同时按下主按钮和中间按钮, 6 同时按下中间按钮和次按钮,7 同时按下3个按钮

因为同时按下多个鼠标按钮的情况很少见,可将IE模型规范化为DOM的方法,因此可以向eventUtil添加以下兼容方法

getButton:function(event){

    //因为两种模型有着同名属性,无法使用能力检测,但是支持DOM版鼠标事件的浏览器可以通过hasFeature()方法来检测

   if(document.implementation.hasFeature("MouseEvents","2.0")){

       return event.button;

   } esle {

       switch(event.button){

           case 0:

           case 1:

           case 3:

           case 5:

           case 7:

           return 0;

           case 2:

           case 6:

           return 2;

           case 4:

           return 1;

       }

   }

}

发表于 2012/05/08

热度:3

标签:javascript,前端,web,js,

Sublime Text 2 快捷键 (windows)

技术党:

Ctrl+L           选择整行(按住-继续选择下行)                           

Ctrl+KK          从光标处删除至行尾                                      

Ctrl+Shift+K     删除整行                                                

Ctrl+Shift+D     复制光标所在整行,插入在该行之前                        

Ctrl+J           合并行(已选择需要合并的多行时)                        

Ctrl+KU          改为大写                                                

Ctrl+KL          改为小写                                                

Ctrl+D           选词 (按住-继续选择下个相同的字符串)                  

Ctrl+M           光标移动至括号内开始或结束的位置                        

Ctrl+Shift+M     选择括号内的内容(按住-继续选择父括号)                 

Ctrl+/           注释整行(如已选择内容,同“Ctrl+Shift+/”效果)        

Ctrl+Shift+/     注释已选择内容                                          

Ctrl+Space       自动完成(win与系统快捷键冲突,需修改)                 

Ctrl+Z           撤销                                                    

Ctrl+Y           恢复撤销                                                

Ctrl+Shift+V      粘贴并自动缩进(其它兄弟写的,实测win系统自动缩进无效)

Ctrl+M           光标跳至对应的括号                                      

Alt+.            闭合当前标签                                            

Ctrl+Shift+A     选择光标位置父标签对儿                                  

Ctrl+Shift+[     折叠代码                                                

Ctrl+Shift+]     展开代码                                                

Ctrl+KT          折叠属性                                                

Ctrl+K0          展开所有                                                

Ctrl+U           软撤销                                                  

Ctrl+T           词互换                                                  

Tab              缩进                                                    

Shift+Tab        去除缩进                                                

Ctrl+Shift+UP    与上行互换                                              

Ctrl+Shift+DOWN  与下行互换                                              

Ctrl+K Backspace 从光标处删除至行首                                      

Ctrl+Enter       插入行后                                                

Ctrl+Shift Enter 插入行前                                                

F9               行排序(按a-z)           

发表于 2012/04/28

转载自:技术党

热度:2

css隱藏網頁元素方法匯總

{display:none;}/*不占用空間,無法點擊*/

{visibility:hidden;}/*占用空間,無法點擊*/

{position:relative;top:-999em;}/*占用空間,無法點擊*/

{position:absolute;top:-999em;}/*不占空間,無法點擊*/

{position:absolute;visibility:hidden;}/*不占空間,無法點擊*/

{height:0;overflow:hidden;}/*不占空間,無法點擊*/

{opacity:0;filter:Alpha(opacity=0);}/*占用空間,可以點擊*/

{position:absolute;opacity:0;filter:Alpha(opacity=0);}/*不占用空間,可以點擊,但是有層疊的問題啊~*/

{

zoom:0.001;

-moz-transform:scale(0);

-webket-transform:scale(0);

-o-transform:scale(0);

transform:scale(0);

}/*IE6、7、9不占用空間,IE8、ff、chrome、opera占用空間,均無法點擊*/

{

position:absolute;

zoom:0.001;

-moz-transform:scale(0);

-webket-transform:scale(0);

-o-transform:scale(0);

transform:scale(0);

}/*不占用空間,無法點擊*/

发表于 2012/04/23

热度:3

标签:javascript,前端,css,web,

JS高级程序设计 事件部分(1)

js与HTML之间的交互是通过事件实现的

1.事件流

事件冒泡:即事件开始时是由最具体的元素接受,然后逐级向上传播到较为不具体的节点
所有现代浏览器都支持事件冒泡:IE5.5-会跳过html元素,从body直接跳到document,ff chrome safari则将事件一直冒泡至window对象!

事件捕获:事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收事件。其用意在于在事件到达预订目标之前捕获它。规范要求事件应该从document对象开始传播,但是sf ff chrome 和opera都是从window对象开始捕获事件的!

dom事件流:dom2级事件规定事件流包括3个阶段:事件捕获阶段,处于目标阶段和事件冒泡阶段,规定事件捕获阶段不会涉及事件目标,但sf ff chrome 和opera9.5+都会在捕获阶段触发事件对象上的事件。其结果是有两个机会在目标对象上面操作事件。

2.事件处理程序
HTML事件处理程序:某个元素支持的每种事件都可以使用一个与相应事件处理程序同名的HTML特性来指定,该特性的值是能够执行的js代码,并且在该值中不能使用未经转义的HTML语法字符,例如<>&""等等!
在HTML中指定事件的缺陷:
·时差问题:即用户在触发该事件时,事件处理程序可能还不具备执行条件。
·HTML与JS代码紧密耦合

DOM0级事件处理程序:即将一个函数赋值给一个事件处理程序属性!
每个元素都有自己的事件处理程序,包括window与document!
使用DOM0级方法指定的事件处理程序被认为是元素的方法,因此这时候的事件处理程序是在元素的作用域中运行,即this引用当前元素!
删除DOM0级方法指定的事件:obj[event]=null即可,直接在元素上面指定的事件也可以这样删除

DOM2级事件处理程序:

DOM2级事件定义了两个方法,添加和移除事件处理程序:
addEventListener(event,function,t/f)和removeEventListener(event,function,t/f)
参数说明:要处理的事件名(不带on),要执行的匿名函数或函数引用(不带括号),在捕获阶段(true)还是冒泡阶段(false)调用
使用这种方法可以添加多个事件处理程序,移除事件的参数与添加事件时的参数一样,*使用匿名函数会导致删除事件时对应的匿名函数无法删除!
ff sf chrome opera都支持DOM2级事件处理程序

IE事件处理程序:

和DOM中类似的两个方法:attachEvent(event,function)和detacthEvent(event,function)
参数:事件处理程序名(带on),要执行的匿名函数或函数引用(不带括号),由于IE只支持事件冒泡,所有添加的事件都会被添加到冒泡阶段,这种方法也可以添加多个事件,并且以相反的顺序被触发,即同一个对象最后定义的事件最先触发!
**在使用attachEvent()时,事件处理程序会在全局作用域中运行,即this===window


2.事件对象

在触发DOM上的某个事件时,会产生一个事件对象event,该对象包含着所有与事件相关的信息
DOM中的事件对象:
兼容DOM的浏览器会将一个event对象传入到事件处理程序中,无论事件处理程序使DOM2还是0级,该对象包含(与创建它的特定事件有关的)属性和方法,即触发事件类型不同,可用的属性和方法亦不同!
但是所有事件都会有如下属性或方法:

bubbles    booleam    事件是否冒泡

cancelable Booleam    是否可以取消事件默认行为

currentTarget    Element    当前处理事件的那个元素的引用

detail    Integer    与事件相关的细节信息

eventPhase    integer    在什么阶段调用的事件处理程序:1捕获,2处于目标,3冒泡

preventDefaule()    Function    取消事件默认行为,cancelble为true时可用

stopPropagation()    Function    取消事件进一步捕获冒泡,bubbles为true时可用

target    Element    事件目标

type    String    被触发的事件类型

view    AbstractView    与事件关联的抽象试图,等同于发生事件的window对象*

在事件处理程序内部,this始终等于currentTarget,而target则包含事件实际目标,如果直接将事件处理程序指定给了目标元素则这三者都包含相同的值。但是如果事件处理程存在与某元素的父节点中,则这些值是不同的,例如

<div id="test"><input type="button" value="test"></div>

document.getElementById("test").onclick=function(){

alert(event.target+ " "+event.currentTarget);//单击div和单击按钮时返回值是不同的

}

在需要通过一个函数处理多个事件时,可以使用type判断事件来指定不同的处理程序

preventDefault()用于阻止特定事件的默认行为,例如链接的单击事件会跳转到指定URL,通过链接的单击事件处理程序可以取消它。只有在cancelable为true时才有效。

stopPropagation()方法用于立即停止事件在dom中的传播,即取消事件进一步捕获或者冒泡。

eventPhase属性用来确定事件当前位于事件流的哪个阶段。

只有在事件处理程序执行期间event对象才会存在,事件处理程序执行完毕该对象即被销毁。

IE中的事件对象:

访问IE中的event对象方式取决于指定事件处理程序的方法,在使用dom0级方法指定事件时候,event对象作为window的一个属性存在,即访问方式为:

window.event.xxx

而使用attacheEvent()添加的事件处理程序,则会有一个event对象作为参数传入事件处理函数中,通过HTML属性添加的事件同样可以通过event来访问该对象,例如:

<div onclick=“alert(event.type)”>test</div>

IE下的所有event对象都包含以下方法:

cancelBubble    Boolean类型    可读写    默认为false,设置为true取消事件冒泡,同DOM的stopPropagation

returnValue    Boolean类型    可读写    默认为true,设置为false即可取消事件的默认行为,同DOM的preventDefault

srcElement    Element    只读    事件目标,同DOM的target

type    String    只读    被触发的事件类型

在DOM0级指定的事件处理程序中,srcElement属性等于this,使用attachEvent指定的事件时,这二者的是不同的。

 

 

跨浏览器的事件对象

var eventUtil ={
 addHander:function(obj,type,fun){//添加事件
     if(obj.addEventListener){  //DOM1
         obj.addEventListener(type,fun,false);
     } else if(obj.attachEvent) {  //IE
         obj.attachEvent("on"+type,fun);
     } else {  //DOM0
         obj["on"+type]=fun;
     }
 },
getEvent:function(event){//返回事件对象
     return event ? event : window.event;
 },
getTarget:function(event){  //返回事件目标
     return event.target||event.srcElement;
 },
preventDefault:function(event){  //取消事件默认动作
     if(event.preventDefault){
         event.preventDefault();
     } else {
         event.returnValue=false;
     }
 },
 removeHandler:function(obj,type,fun){  //取消对象的事件绑定
      if(obj.removeEventListener){
         obj.removeEventListener(type,fun,false);
     } else if(obj.detachEvent){
         obj.detachEvent("on"+type,fun);
     } else {
         obj["on"+type]=null;
     }
},
 stopPropagation:function(event){  //取消事件冒泡
     if(event.stopPropagation){
         event.stopPropagtion();
     } else {
         event.cancelBubble=true;
     }
 }
};

发表于 2012/04/10

热度:1

标签:javascript,js,web,前端,

可能 问 不可能 道:“你住在什么地方呢?”

他回答说:“在那无能为力者的梦境里!”

有时候,人所需要的是真正的绝望

美文日赏:

文 刘瑜

前两天有个网友给我写信,问我如何克服寂寞。
她跟我刚来美国的时候一样,英文不够好,朋友少,一个人等着天亮,一个人等着天黑。
“每天学校、家、图书馆、gym、几点一线”。
我说我没什么好办法,因为我从来就没有克服过这个问题。
这些年来我学会的,就是适应它。适应孤独,就像适应一种残疾。
快乐这件事,有很多“不以主观意志为转移”的因素。基因、经历、你恰好碰上的人。
但是充实,是可以自力更生的。
罗素说他生活的三大动力是对知识的追求、对爱的渴望、对苦难的怜悯。
你看,这三项里面,除了第二项,其他两项都是可以自给自足的,都具有耕耘收获的对称性。
我的快乐很少,当然我也不痛苦。
主要是生活稀薄,事件密度非常低,就说昨天一天我都干了什么吧: 10点,起床,收拾收拾,把看了一大半的关于明史的书看完。
下午1点,出门,找个coffee shop,从里面随便买点东西当午饭,然后坐那改一篇论文。
期间凝视窗外的纷飞大雪,花半小时创作梨花体诗歌一首。
晚上7点,回家,动手做了点饭吃,看了一个来小时的电视,回e-mail若干。
10点,看了一张DVD,韩国电影“春夏秋冬春”。
12点,读关于冷战的书两章。
凌晨2点,跟某同学通电话,上网溜达,准备睡觉。
这基本是我典型的一天:一个人。
书、电脑、DVD。
一个星期平均会去学校听两次讲座。
工作日平均会跟朋友吃午饭一次,周末吃晚饭一次。
多么稀薄的生活啊,谁跟我接近了都有高原反应。
孤独的滋味当然不好受,更糟的是孤独具有一种累加效应。
同样重要的东西,你第一分钟举着它和第五个小时举着它,感受当然不同。
孤独也是这样,偶尔偷得半日闲自己去看一场电影,和一年、两年、三年、五年只能自己和自己喝啤酒,后果当然完全不同。
我以前跟一位曾经因为某政治事件而坐过牢的朋友聊天,他描述那几年被单独关押的生活,这样形容:度日如年,度年如日。
说得可真确切。
我曾在日记里大言不惭地写道:出于责任感,我承担了全世界的孤独。
我的意思是,我不但孤独,而且我的孤独品种繁多、形态各异:在女人堆里太男人,在男人堆里太女人;在学者里面太老粗,在老粗里面太学者;在文青里面太愤青,在愤青里面太文青;在中国人里面太西化,在外国人里面太中国....我觉得上帝把我派到人间,很可能是为了做一个认同紊乱的心理实验。
我其实并不孤僻,简直可以说开朗活泼。
但大多时候我很懒,懒得经营一个关系。
还有一些时候,就是爱自由,觉得任何一种关系都会束缚自己。
当然最主要的,还是知音难觅。
我老觉得自己跟大多数人交往,总是只能拿出自己的一个维度,很难找到和自己一样兴趣一望无际的人。
这句话的谦虚版说法是:很难找到一个像我一样神经错乱的人。
有时候也着急。我有有幸生活在“十一届三中全会”之后,没有吃过多少苦,但是在我所经历过的痛苦中,没有什么比孤独更具有破坏力。
这不仅仅是因为错过了亲友之间的饭局谈笑温情,不仅仅是因为一个文学女青年对故事、冲突、枝繁叶茂的生活有天然的向往,还因为一个人思想总是需要通过碰撞来保持。
长期的孤单中,就像一个圆点脱离了坐标系,有时候你不知道自己思考的问题是否真的成其为问题,你时常看不到自己的想法中那个旁人一眼就可以看出的巨大漏洞,你不知道什么是大,因为不能看到别人的小,你不知道什么是白,因为不能看到别人的黑。
总之你会担心,老这样一个人呆着,会不会越来越傻?
好像的确是越来越傻。
但另一些时候,又惊咤于人的生命力。
在这样缺乏沟通、交流、刺激、辩论、玩笑、聊天、绯闻、传闻、小道消息、八卦、MSN...的生活里,没有任何圈子,多年来仅仅凭着自己跟自己对话,我也坚持了思考,保持了表达欲,还能写小说政论论文博客,可见要把一个人意志的皮筋给撑断,也没有那么容易。
“忍受的极限会是什么养的结果?” 让我告诉你,忍受是没有极限的。
年少的时候,我觉得孤单是很酷的一件事情。
长大以后,我觉得孤单是很凄凉的一件事。现在,我觉得孤单不是一件事。
至少,努力不让它成为一件事。
有时候,人所需要的是真正的绝望。
真正的绝望跟痛苦、悲伤没有什么关系。
它让人心平气和,让你意识到你不能依靠别人,任何人,得到快乐。
它让你谦卑,因为所有别人能带给你的,都成了惊喜。
它让你只能返回自己的内心。
每个人的内心都有不同的自我,他们彼此可以对话。
你还可以学习观察微小事物的变化,天气、季节、超市里的蔬菜价格、街上漂亮的小孩,你知道,万事万物都有它值得探究的秘密,只要你真正-我是说真正-打量它。
当然还有书、报纸、电影电视、网络、DVD、CD,那里面有他人的生活、关于这个世界的道理、音乐的美、知识的魔术、爱的可能性、令人愤怒的政治家...
我们九九八十一生都不可能穷尽这些道理、美、爱、魔术的一个小指甲盖,怎么还能抱怨生活给予我们的太少。
绝望不是气馁,它只是“命运的归命运,自己的归自己”这样一种事实求是的态度。
就是说,它是自由。
以前一个朋友写过一首诗,叫《一个人要像一支队伍》。
我想象文革中的顾准、狱中的杨小凯、在文学圈之外写作的王小波,就是这样的人。
怀才不遇,逆水行舟,一个人就像一支队伍,对着自己的头脑和心灵招兵买马,不气馁,有召唤,爱自由。
我想自己终究是幸运的,不仅仅因为那些外在的所得,而且因为我还挺结实的。
总是被打得七零八落,但总还能在上帝他老人家数到“九”之前重新站起来,再看到眼前那个大海时,还是一样兴奋,欢天喜地地跳进去。
在辽阔的世界面前,一个人有多谦卑,他就会有多快乐。
当罗素说知识、爱、同情心是他生活的动力时,我觉得简直可以和这个风流成性的老不死称兄道弟。
因为这种幸运,我原谅自己经受的挫折、孤单、原谅自己的敏感、焦虑和神经质,原谅上帝他老人家让X不喜欢我,让我不喜欢Y,让那么多人长得比我美,或者比我智慧,原谅他让我变老变胖。
因为他把世界上最美好的品质给了我:不气馁,有召唤,爱自由。
如果你还在为自己孤单寂寞怀才不遇举世皆浊我独醒而深深叹息的话,那么让我告诉你,你买不到那个彩票的,别再把你时间的积蓄两块、两块地花出去,回到你的内心,寻找你自己,与心灵深处的他、他们一起出发去旅行。
如果你有足够的好奇心,你可以足不出户而周游世界,身无分文而腰缠万贯。
人生若有知己相伴固然妙不可言,但那可遇而不可求,真的,也许既不可遇又不可求,可求的只有你自己,你要俯下身去,朝着幽暗深处的自己伸出手去。

发表于 2012/03/24

转载自:美文日赏

热度:431

Top of Page