Javascript 注冊(cè)事件淺析
更新時(shí)間：2008年08月24日 08:33:26 作者：
JavaScript事件驅(qū)動(dòng)
首先是最常規(guī)的方法：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
當(dāng)某一天，我們知道JavaScript要跟HTML結(jié)構(gòu)實(shí)現(xiàn)分離后，就會(huì)改了一種寫法：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
當(dāng)我們工作越來(lái)越久后，有時(shí)候我們需要對(duì)某個(gè)元素綁定多個(gè)相同的事件類型：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
如果按照上面的寫法，我們只能輸出第二個(gè)函數(shù)。
這時(shí)候我們需要用到attachEvent方法：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
在一段時(shí)間內(nèi)，你并沒(méi)發(fā)現(xiàn)這段代碼有任何錯(cuò)誤。
某一天，一個(gè)名叫firefox的瀏覽器 闖入你的視野，當(dāng)我們把這段代碼放到firefox中執(zhí)行后，
發(fā)現(xiàn)并不能正常運(yùn)行。 問(wèn)題就這樣，越來(lái)越多，然而作為一名JS程序員，這些都是必須面對(duì)的。
為了解決這段代碼的平臺(tái)兼容性問(wèn)題，我翻翻手冊(cè)，知道了firefox跟ie的區(qū)別：
firefox中注冊(cè)事件使用：addEventListener方法，同時(shí)為了兼容ie，我們必須用到if ... else...
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
此時(shí)，代碼就可以在多個(gè)平臺(tái)上工作了。
但隨著水平的進(jìn)步，你不滿足每次都去判斷，你想把這個(gè)判斷封裝起來(lái)，以后可以直接調(diào)用：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
至此，作為一個(gè)程序員的工作就完了。
中間我們從一個(gè)最傳統(tǒng)，最基本的寫法 ， 然后實(shí)現(xiàn)Js和HTML的分離，然后又實(shí)現(xiàn)對(duì)同一個(gè)元素注冊(cè)多個(gè)事件，期間，我們發(fā)現(xiàn)注冊(cè)事件的兼容性問(wèn)題。最后我們對(duì)注冊(cè)事件的方法進(jìn)行封裝，方便以后使用。
好了，文章寫到這里。希望大家有收獲哦。。。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
當(dāng)某一天，我們知道JavaScript要跟HTML結(jié)構(gòu)實(shí)現(xiàn)分離后，就會(huì)改了一種寫法：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
當(dāng)我們工作越來(lái)越久后，有時(shí)候我們需要對(duì)某個(gè)元素綁定多個(gè)相同的事件類型：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
如果按照上面的寫法，我們只能輸出第二個(gè)函數(shù)。
這時(shí)候我們需要用到attachEvent方法：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
在一段時(shí)間內(nèi)，你并沒(méi)發(fā)現(xiàn)這段代碼有任何錯(cuò)誤。
某一天，一個(gè)名叫firefox的瀏覽器 闖入你的視野，當(dāng)我們把這段代碼放到firefox中執(zhí)行后，
發(fā)現(xiàn)并不能正常運(yùn)行。 問(wèn)題就這樣，越來(lái)越多，然而作為一名JS程序員，這些都是必須面對(duì)的。
為了解決這段代碼的平臺(tái)兼容性問(wèn)題，我翻翻手冊(cè)，知道了firefox跟ie的區(qū)別：
firefox中注冊(cè)事件使用：addEventListener方法，同時(shí)為了兼容ie，我們必須用到if ... else...
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
此時(shí)，代碼就可以在多個(gè)平臺(tái)上工作了。
但隨著水平的進(jìn)步，你不滿足每次都去判斷，你想把這個(gè)判斷封裝起來(lái)，以后可以直接調(diào)用：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
至此，作為一個(gè)程序員的工作就完了。
中間我們從一個(gè)最傳統(tǒng)，最基本的寫法 ， 然后實(shí)現(xiàn)Js和HTML的分離，然后又實(shí)現(xiàn)對(duì)同一個(gè)元素注冊(cè)多個(gè)事件，期間，我們發(fā)現(xiàn)注冊(cè)事件的兼容性問(wèn)題。最后我們對(duì)注冊(cè)事件的方法進(jìn)行封裝，方便以后使用。
好了，文章寫到這里。希望大家有收獲哦。。。
相關(guān)文章
在js(jquery)中獲得文本框焦點(diǎn)和失去焦點(diǎn)的方法
文章介紹兩個(gè)方法和種是利用javascript onFocus onBlur來(lái)判斷焦點(diǎn)和失去焦點(diǎn)，加一種是利用jquery $("p").blur(); 或$("p").blur(fn)來(lái)實(shí)現(xiàn)，有需要的朋友可以參考一下2012-12-12
本文詳細(xì)介紹了通過(guò)js+plupload實(shí)現(xiàn)了繞過(guò)服務(wù)器，向又拍云批量上傳圖片的解決方法，十分的巧妙，也節(jié)省了服務(wù)器資源，這里推薦給有需要的小伙伴。2014-12-12
Javascript圖像處理—平滑處理實(shí)現(xiàn)原理
這里直接引用OpenCV 2.4+ C++ 平滑處理和OpenCV 2.4+ C++ 邊緣梯度計(jì)算的相關(guān)內(nèi)容平滑也稱模糊, 是一項(xiàng)簡(jiǎn)單且使用頻率很高的圖像處理方法,需要了解的朋友可以參考下2012-12-12
列表組是靈活又強(qiáng)大的組件,不僅能用于顯示一組簡(jiǎn)單的元素,還能用于復(fù)雜的定制的內(nèi)容。本文給大家介紹Bootstrap列表組組件，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
最近開(kāi)始研究JavaScript的簡(jiǎn)寫方法，下面就是有關(guān)判斷為空的簡(jiǎn)寫方法2014-02-02
這篇文章主要介紹了Bootstrap Validator 表單驗(yàn)證的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
數(shù)組是幾乎所有編程語(yǔ)言的基礎(chǔ)語(yǔ)法，JavaScript因?yàn)檎Z(yǔ)法特性，我們更需要理解數(shù)組知識(shí)。本文從JavaScript中數(shù)組的一些特殊之處入手，通過(guò)這些少有特性的詳細(xì)介紹，加深我們對(duì)數(shù)組的理解2023-04-04
JS實(shí)現(xiàn)的Select三級(jí)下拉菜單代碼
這篇文章主要介紹了JS實(shí)現(xiàn)的Select三級(jí)下拉菜單,涉及javascript動(dòng)態(tài)創(chuàng)建下拉列表的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
本篇文章主要介紹了Webpack 服務(wù)器端代碼打包的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
BootStrap Validator 根據(jù)條件在JS中添加或移除校驗(yàn)操作
這篇文章主要介紹了BootStrap Validator 根據(jù)條件在JS中添加或移除校驗(yàn)的相關(guān)資料,需要的朋友可以參考下2017-10-10