moneylcj's Blog

    1 " vim: fdm=marker:
+ -   2 +-- 23 lines: base setting
  2 "base setting{{{1
|   3 set helplang=cn
|   4 set nu! cul ruler
|   5 set nocp showmode
|   6 set nomore nobackup
|   7 set autochdir autoread
|   8 set modeline modelines=4
|   9 set nosplitright nosplitbelow
|  10 set sessionoptions+=unix,slash
|  11 set hlsearch incsearch showmatch
|  12 set viminfo='100,<50,s10,h,rA:,rB:,n~/.vim/.viminfo
|  13 set encoding=utf-8 fileencoding=utf-8 termencoding=utf-8
|  14 set fileencodings=ucs-bom,utf-8,cp936,gb18030,big5,euc-jp,euc-kr,latin1
|  15 set wildmenu "this option open the command-line macth menu above the command-line
|  16 set cpoptions+=I "when this option is seted the autoident of blank line will not be del??
|  17 set formatoptions+=mM2 fileformat=unix autoindent textwidth=78 shiftwidth=4 tabstop=8 expandtab ambiwidth=double
|  18 filetype on
|  19 syntax enable
|  20 colorscheme new
|  21 filetype plugin indent on
|  22 if has("gui_running")
|  23     set guioptions=a
|  24 endif
+ -  25 +--  2 lines: autocmd setting
 25 "autocmd setting {{{1
|  26 au BufNewFile,BufRead vimperator*.tmp set ft=dokuwiki
+ -  27 +-- 29 lines: moneylcj mapping
 27 "moneylcj mapping {{{1
|  28 map <F1> <NOP>
|  29 map <F1> <Esc>:NERDTreeToggle<Cr>
|  30 map <F3> <Esc>:let @/=""<Cr>
|  31 map Q <NOP>
|  32 nnoremap ,j gJ
|  33 map J j
|  34 map K k
|  35 map D d
|  36 map U u
|  37 nmap fc <Esc>:set fdl=0<Cr>
|  38 nmap fo <Esc>:set fdl=9999<Cr>
|  39 nmap f1 <Esc>:set fdl=1<Cr>
|  40 nmap f2 <Esc>:set fdl=2<Cr>
|  41 nmap f3 <Esc>:set fdl=3<Cr>
|  42 nmap f4 <Esc>:set fdl=4<Cr>
|  43 nmap f5 <Esc>:set fdl=5<Cr>
|  44 nmap f6 <Esc>:set fdl=6<Cr>
|  45 nmap f7 <Esc>:set fdl=7<Cr>
|  46 nmap f8 <Esc>:set fdl=8<Cr>
|  47 map <A-1> 1gt
|  48 map <A-2> 2gt
|  49 map <A-3> 3gt
|  50 map <A-4> 4gt
|  51 map <A-5> 5gt
|  52 map <A-6> 6gt
|  53 map <A-7> 7gt
|  54 map <A-8> 8gt
|  55 map <A-9> 9gt
+ -  56 +-- 32 lines: tab-label setting
 56 "tab-label setting{{{1
|  57 set showtabline=2
|  58 set tabline=%!MyTabLine()
|  59 function MyTabLine()
|  60     let s = ''
|  61     for i in range(tabpagenr('$')) "range(4) -> [0,1,2,3,4]
|  62         if i + 1 == tabpagenr()
|  63           let s .= '%#TabLineSel#'
|  64         else
|  65           let s .= '%#TabLine#'
|  66         endif
|  67         let s .= '%' . (i + 1) . 'T' "select which tab to be setted
|  68         let s .= ' %{MyTabLabel(' . (i + 1) . ')} '
|  69     endfor
|  70     let s .= '%#TabLineFill#%T'
|  71     if tabpagenr('$') > 1
|  72     let s .= '%=%#TabLine#%999X'
|  73     endif
|  74     return s
|  75 endfunction
|  76 function MyTabLabel(n)
|  77     let buflist = tabpagebuflist(a:n)
|  78     let winnr = tabpagewinnr(a:n)
|  79     let bname = bufname(buflist[winnr - 1])
|  80     if (bname == '')
|  81        let bname = 'NoName'
|  82     endif
|  83     if(strridx(bname,'/')!=-1)
|  84         let bname = strpart(bname,strridx(bname,'/')+1)
|  85     endif
|  86     return '[' . a:n . ' '. bname  . ']'
|  87 endfunction
+ -  88 +-- 10 lines: statusline setting
 88 "statusline setting {{{1
|  89 set laststatus=2
|  90 set laststatus=2
|  91 set statusline=
|  92 set statusline+=%f "path to the file in the buffer, relative to current directory
|  93 set statusline+=\ %h%1*%m%r%w%0* " flag
|  94 set statusline+=\ [%{strlen(&ft)?&ft:'none'}, " filetype
|  95 set statusline+=%{&encoding}, " encoding
|  96 set statusline+=%{&fileformat}] " file format
|  97 set statusline+=\ Line:%l/%L
+ -  98 +-- 11 lines: OS depedent setting
 98 "OS depedent setting {{{1
|  99 if (has('win32') || has('win64'))
| 100     if (filereadable(expand("~/.vim/windowsvimrc")))
| 101         source ~/.vim/windowsvimrc
| 102     endif
| 103 else
| 104     if (filereadable(expand("~/.vim/linuxvimrc")))
| 105         source ~/.vim/linuxvimrc
| 106     endif
| 107 endif
| 108 
+ - 109 +--  3 lines: installed plugins setiing
109 "installed plugins setiing {{{1
| 110 let html_dynamic_folds = 1
| 111 "}}}1

在当前主流的浏览器中主要存在三种事件模型:
    原始事件模型( original event model),
    DOM2事件模型,
    IE事件模型.
其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了
IE以外的所有主流浏览器支持.

1.原始事件模型
    该模型和其他两个模型最大的区别在于该模型中没有明确的event对象,可以有
两种方法将事件处理函数跟特定的事件联系起来,

    (1)在html中设置感兴趣的元素的属性 如:
    <for onclick="return vaildateForm();"></form>
    注意调用的函数必须定义返回值,在调用语句的结尾应加上分号.

    (2)在javascript中设置元素对象的属性:如
        docuemnt.getElementById("form1").onsubmite=validateForm;
    这种方法应该注意的是不能在函数调用的末尾加上括号,是把对函数的引用赋
    值给对象,而不是把函数的执行结果赋值给对象.利用这种方法可以最大程度的
    降低js文件和html文件的依赖性,但是不够直观.

浏览器会根据函数的返回值来决定是否激活元素的默认行为--返回true则激活,否
则不激活。

在设置了事件句柄以后还可以通过Javacript代码显式的调用该句柄,但注意如果通
过代码调用,如果该对象还有默认行为的话不会被激活.例如:
        document.form[0].onsubmite()
该代码只会执行onsubmite属性指向的函数体,在执行完毕后直接会返回,而不是像
通过点击来激活该事件的时候还会根据返回值来判断是否提交表单.

由于存在两种设置方式,可能会相互覆盖,可以通过显示的调用来解决这个问题.

通过两种方法中的任意一种设置事件处理函数相当于给该元素定义了一个新方法,
在事件被触发的时候,在处理函数体内this关键字指向的是发出该事件的元素.
    button.onclick= o.mymethod;
    //调用的时候在mymethod内部this指向button而非o
    button.onclick = function( ) { o.mymethod( ); }
    //这是在mymethod的内部this指向o

在利用html的属性来设置事件的句柄时有一个问题者的注意,那就是在执行过程中
会有一个特殊的执行链:
CallObject->触发事件的元素->递归该元素的父节点->document->window(作为全局对象)

2.DOM2事件模型
 这个模型参考了IE的气泡模型而制定的,它是由w3c制定的规范.在原始模型中事件
 一旦发生就直接调用事件句柄,没有其它的事件传播过程.而在DOM2模型中事件有
 一个特殊的传播过程,分为三个阶段:
    (1)capturing phase:事件被从document一直向下传播到目标元素,在这过程中
    如果有哪个祖先元素对该事件感兴趣可以注册自己的处理函数.
    
    (2)target phase:事件到达目标元素,执行目标元素的事件处理函数.

    (3)bubbling phase:事件从目标元素上升一直到达document,虽然所有的事件
    类型都会经历captruing phase阶段但是只有部分事件会经历bubbling phase
    阶段,例如submit事件就不会被上浮.
    
在整个的事件传播过程中可以调用event.stopPropagation()来停止事件的传
播,调用preventDefault()来阻止浏览器的默认行为.

虽然这个事件模型有些复杂,但是它有助于集中事件处理代码,例如如果希望在<p>
元素上注册onclick事件,可以直接注册在documnet上,而在第一或第三阶段来处理
该事件,利用event的target来判断是否是<p>元素。

在DOM2模型中document中的所有元素和window对象都实现了EventTarget接口,该接
口定义了添加和删除事件处理函数的的方法

addEventListener("eventType","handler","true!false");
//eventType     去掉原始模型中的on前缀
//handler       的执行在它定义的范围内被执行,没有特殊的执行链
//"true|false"  如果为true则在事件传播的第一阶段会执行该处理函数,为false
                //只在事件是直接在该元素上发生或者在bubbling阶段的祖先元
                //素中被执行.
removeEventListner("eventType","handler","true!false");

在事件处理函数的内部this指代什么没有相关标准进行说明,但是各种浏览器的实
现一般把this指向事件发生的targetEleemnt,由于这具有一定的不确定性,所以要
在函数内部引用taragetElement的最好方法是利用event对象的currentTarget。也
可以把对象的方法注册为事件的处理函数：

DOM2中的事件继承关系,Event->UIEvent->MouseEvent[DOM2模型不支持KeyEvent],
具体细节参考JavaScript: The Definitive Guide, 5th Edition 17.2.6

Event接口中的几个者的注意的属性
    target:       事件实际发生的元素
    currentTarget:时间传播过程中时间所传播到的元素,在第一阶段和第三阶段
                  和target是不相同的
    MouseEvent:   接口中的几个者的注意的属性
    button:       用以判断那个鼠标键被按下,0left,1middle,2right,只有在鼠
                  标按键改变的时候才会提供,在mousemove中不会提供
    clientX,
    clientY:      相对于viewport坐标的值,未考虑文档的滚动情形.
    screenX,
    screenY:      屏幕坐标
    relatedTarget:只在mouseover和mouseout中提供,mouseover中指向的是鼠标
                  移入目标对象前经过的对象,mouseout则指的是离开目标后接
                  触到第一个的对象,在其他的事件类型中不提供该属性.

在实现了DOM2的浏览器中,为了提供向后兼容性,通过原始模型设置的事件处理函数
也会得到一个event的引用,可以在函数内部得到并使用,在IE中也一样.


3.IE模型
IE模型也提供了一个Event对象封装了事件的详细信息,但是IE不把该对象传入事件
处理函数,由于在任意时刻只会存在一个事件,所以IE把它作为全局对象window的一
个属性,IE中的事件传播模式对应于DOM2的第二和第三阶段,首先执目标元素的处理
函数,然后向上传播到达document,ie中只能能捕捉鼠标事件,而DOM2中可以捕捉所
有的事件,IE中注册和删除事件处理函数的方法也不同于DOM2.

Event对象
    srcElement:事件发生的对象
    button:   只是鼠标键 1:left 2:right
    clientX,
    clientY:  等同于DOM2 MouseEvent
    offsetX,
    offsetY:  相对于srcElement的坐标系值
    fromElement,
    toElement:分别等同于DOM2 MouseEvent中mouseover和mouseout的relatedTarget
    cancelBubble:是否继续上浮
    returnValue:是否触发浏览器的默认行为

    该事件对象没有与DoM2中的事件对象的currentTarget,在事件上浮过程中没有办法得到正在响应事件的对象
    
dom2和ie中通用的事件处理函数
function portableEventHandler(event)
{
    var e = event || window.event;
    // Body of the event handler goes here
}
事件处理函数的注册和删除是通过元素的
attachEvent( "eventType","handler")
detachEvent("eventType","handler" )

与dom2不同的是eventType有on前缀,但是令人费解的是这两个函数是作为全局函数
被调用的,就是说在处理函数的内部this指代的是window对象.

通过setCapture() releaseCapture()捕捉鼠标事件,所有的document元素都具有这
两个函数,一旦调用了某个元素的setCapture( )函数,所有后续的鼠标事件都会在
上浮之前传到该元素,直到调用了releaseCapture( ),注意在浏览器失去焦点,弹出
对话框或弹出系统菜单时都会使元素失去捕捉能力,这时会有一个onlosecapture事
件发生.最常见的调用setCapture()情况是在onmousedown的处理函数中,以捕捉后
续的mousemove事件