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)我們工作越來越久后，有時(shí)候我們需要對(duì)某個(gè)元素綁定多個(gè)相同的事件類型：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
如果按照上面的寫法，我們只能輸出第二個(gè)函數(shù)。
這時(shí)候我們需要用到attachEvent方法：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
在一段時(shí)間內(nèi)，你并沒發(fā)現(xiàn)這段代碼有任何錯(cuò)誤。
某一天，一個(gè)名叫firefox的瀏覽器 闖入你的視野，當(dāng)我們把這段代碼放到firefox中執(zhí)行后，
發(fā)現(xiàn)并不能正常運(yùn)行。 問題就這樣，越來越多，然而作為一名JS程序員，這些都是必須面對(duì)的。
為了解決這段代碼的平臺(tái)兼容性問題，我翻翻手冊(cè)，知道了firefox跟ie的區(qū)別：
firefox中注冊(cè)事件使用：addEventListener方法，同時(shí)為了兼容ie，我們必須用到if ... else...
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
此時(shí)，代碼就可以在多個(gè)平臺(tái)上工作了。
但隨著水平的進(jìn)步，你不滿足每次都去判斷，你想把這個(gè)判斷封裝起來，以后可以直接調(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è)事件的兼容性問題。最后我們對(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)我們工作越來越久后，有時(shí)候我們需要對(duì)某個(gè)元素綁定多個(gè)相同的事件類型：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
如果按照上面的寫法，我們只能輸出第二個(gè)函數(shù)。
這時(shí)候我們需要用到attachEvent方法：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
在一段時(shí)間內(nèi)，你并沒發(fā)現(xiàn)這段代碼有任何錯(cuò)誤。
某一天，一個(gè)名叫firefox的瀏覽器 闖入你的視野，當(dāng)我們把這段代碼放到firefox中執(zhí)行后，
發(fā)現(xiàn)并不能正常運(yùn)行。 問題就這樣，越來越多，然而作為一名JS程序員，這些都是必須面對(duì)的。
為了解決這段代碼的平臺(tái)兼容性問題，我翻翻手冊(cè)，知道了firefox跟ie的區(qū)別：
firefox中注冊(cè)事件使用：addEventListener方法，同時(shí)為了兼容ie，我們必須用到if ... else...
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
此時(shí)，代碼就可以在多個(gè)平臺(tái)上工作了。
但隨著水平的進(jìn)步，你不滿足每次都去判斷，你想把這個(gè)判斷封裝起來，以后可以直接調(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è)事件的兼容性問題。最后我們對(duì)注冊(cè)事件的方法進(jìn)行封裝，方便以后使用。
好了，文章寫到這里。希望大家有收獲哦。。。
相關(guān)文章
這篇文章主要介紹了JavaScript異步編程之Promise的初步使用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
Array, Array Constructor, for in loop, typeof, instanceOf
雖然在 JavaScript 中數(shù)組是是對(duì)象，但是沒有好的理由去使用 `for in` 循環(huán) 遍歷數(shù)組。相反，有一些好的理由不去使用 for in 遍歷數(shù)組。2011-09-09
基于JavaScript實(shí)現(xiàn)彈出框效果
彈出框在網(wǎng)站頁(yè)面中是必不可少的一部分，今天借助腳本之家平臺(tái)給大家分享使用js實(shí)現(xiàn)簡(jiǎn)單的彈出框效果，感興趣的朋友一起學(xué)習(xí)吧2016-02-02
JavaScript實(shí)現(xiàn)從數(shù)組中選出和等于固定值的n個(gè)數(shù)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)從數(shù)組中選出和等于固定值的n個(gè)數(shù)的方法,需要的朋友可以參考下2014-09-09
這篇文章主要介紹了JavaScript中的變量定義與儲(chǔ)存介紹,本文先是講解了變量定義的一些技巧,然后對(duì)變量的儲(chǔ)存做了講解,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了Paypal支付不完全指北，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
JS隨機(jī)排序數(shù)組實(shí)現(xiàn)方法分析
這篇文章主要介紹了JS隨機(jī)排序數(shù)組實(shí)現(xiàn)方法,結(jié)合具體實(shí)例形式對(duì)比分析了javascript針對(duì)數(shù)組進(jìn)行隨機(jī)排序的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
JS動(dòng)態(tài)計(jì)算移動(dòng)端rem的解決方案
移動(dòng)設(shè)備分辨率五花八門雖然我們可以通過CSS3的media query來實(shí)現(xiàn)適配，但是這種做法并不能適配所有設(shè)備，這篇文章主要介紹了js動(dòng)態(tài)計(jì)算移動(dòng)端rem的解決方案，非常不錯(cuò)，感興趣的朋友一起看看吧2016-10-10
微信小程序使用第三方庫(kù)Underscore.js步驟詳解
大家都知道Underscore.js是一個(gè) JavaScript 工具庫(kù)，它提供了一整套函數(shù)式編程的實(shí)用功能，但是沒有擴(kuò)展任何 JavaScript 內(nèi)置對(duì)象。那么這篇文章我們就來學(xué)習(xí)下微信小程序如何使用第三方庫(kù)Underscore.js，有需要的可以參考學(xué)習(xí)。2016-09-09
js實(shí)現(xiàn)多個(gè)標(biāo)題吸頂效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)多個(gè)標(biāo)題吸頂效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01