前言

(補充:感謝 othree 前輩的指點,指出這其實是在講 DOM 裡面事件傳遞的順序,因此把標題以及內文修正,原標題為:JavaScript 的事件傳遞機制:捕獲與冒泡)

今天為大家帶來的內容是 DOM 裡面的事件傳遞機制,而與這些事件相關的程式碼,相信大家應該不太陌生,就是addEventListener, preventDefaultstopPropagation

簡單來說,就是事件在 DOM 裡面傳遞的順序,以及你可以對這些事件做什麼。

為什麼會有「傳遞順序」這一詞呢?假設你有一個ul元素,底下有很多li,代表不同的 item。當你點擊任何一個li的時候,其實你也點擊了ul,因為ul把所有的li都包住了。

假如我在兩個元素上面都加了eventListener,哪一個會先執行?這時候呢,知道事件的執行順序就很重要。

另外,由於某些瀏覽器(沒錯,我就是在說 IE)的機制比較不太一樣,因此那些東西我完全不會提到,有興趣的可以研究文末附的參考資料。

閱讀更多

前言

前陣子在研究跟 HTTP Cache 有關的一些東西,看得眼花撩亂,不同的 Header 愈看愈混亂,像是Pragma, Cache-Control, Etag, Last-Modified, Expires 等等。找了許多參考資料閱讀之後才有了比較深刻的理解,想說若是從一個比較不同的角度來理解 Cache,說不定會比較容易了解這些 Header 到底在做什麼。

在之前查的資料裡面,很多篇都是逐一解釋各個 Header 的作用以及參數,而我認為其實參數講多了容易造成初學者混淆,想說怎麼有這麼多奇怪的參數,而且每一個看起來都很像。所以這篇文章嘗試一步一步藉由不同的問題來引導出各個 Header 使用的場景以及出現的目的。還有,因為這篇是給初學者看的,所以不會講到所有的參數。

其實關於 Cache 這一部分,很多網路資源的說法都不太一樣,如果碰到有疑義的地方我會盡量以 RFC 上面寫的標準為主。如果有錯誤的話還麻煩不吝指正,感謝。

閱讀更多

前言

一般來說在學習寫網頁的時候,最先碰到的會是 HTML 與 CSS,負責把版面刻出來以及美化版面,當基礎打穩之後,會開始學習 JavaScript,試著做出一點互動性的效果。而「互動」除了使用者跟瀏覽器的互動以外,別忘了還有 Client 端跟 Server 端的互動,也就是必須要學會從瀏覽器用 JavaScript 跟後端 Server 拿資料,否則你的網頁資料都只能是寫死的。

這篇的主要預設讀者是網頁前端的初學者,希望能讓本來不太理解怎麼跟 Server 交換資料或是怎麼串 APi 的讀者看完之後,能夠更了解該怎麼跟後端串接。

閱讀更多

前言

老實說 JavaScript 的原型鍊一直是我很懼怕的一個主題,理由很簡單,因為真的不太好理解。光是一堆名詞跟錯綜複雜的關係就可以把你搞瘋,例如說prototype, __proto__, constructor, Object.prototype, Function.prototype, new等等。

可是呢,這又確實是 JavaScript 很重要的一部分,而且是面試的必考題,就算現在不懂,以後遲早有一天要把它弄懂,不然的話永遠都沒辦法把自己的技術能力往上提高一個檔次。

有關原型鍊的文章你可以在網路上搜到一大堆,每一篇的理解方式都不太一樣,有些直接搬出一大堆專有名詞,嚇都把你嚇死了。而我也是一直到最近,看了幾篇我覺得切入角度比較不錯的文章,才真正對原型鍊有比較深刻的理解。

就趁著現在這個機會,讓我們多瞭解一點 JavaScript 的原型鍊吧!這篇適合對 JavaScript 有一點概念但又不是很清楚的人觀看,如果文章中有講錯的地方,也麻煩不吝在評論中指出,感謝。

閱讀更多

前言

幾個禮拜前我在工作上碰到了一些跟 Cookie 有關的問題,在這之前,我原本想說:Cookie 不就那樣嘛,就算有些屬性不太熟悉,上網找一下資料就好了,哪有什麼跟 Cookie 有關的難題?

然而事實證明我錯了。我還真的碰到了一個讓我解超久的 Cookie 問題。

相信看到這邊,很多人應該躍躍欲試了,那我就先來考一下大家:

什麼情形下,Cookie 會寫不進去?

像是語法錯誤那種顯而易見的就不用說了,除此之外你可能會答說:寫完全不同 domain 的 Cookie。例如說你的網頁在 http://a.com 卻硬要寫 http://b.com 的 Cookie,這種情形當然寫不進去。

或者,你可能會回答:不在 https 卻想加上 Secure flag 的 Cookie。
沒錯,像是這種情形也會寫不進去。

除了這些,你還能想到什麼嗎?

如果想不太到,那就聽我娓娓道來吧!

閱讀更多

前言

最近剛好碰到一些 CSRF 的案例,趁著這次機會好好研究了一下。深入研究之後才發現這個攻擊其實滿可怕的,因為很容易忽略它。但幸好現在有些 Framework 都有內建防禦 CSRF 的功能,可以很簡單的開啟。

但儘管如此,我認為還是有必要瞭解一下 CSRF 到底在幹嘛,是透過怎樣的手段攻擊,以及該如何防禦。就讓我們先來簡單的介紹一下它吧!

CSRF 是一種 Web 上的攻擊手法,全稱是 Cross Site Request Forgery,跨站請求偽造。不要跟 XSS 搞混了,他們兩種是不同的東西,那到底什麼是 CSRF 呢?先從我自身的一個案例談起好了。

閱讀更多

前言

最近剛好在做直播相關的東西,雖然說是做前端,但還是必須懂一些直播的原理
至少要知道有哪些格式,以及各種格式的優缺點是什麼,做起來也會比較踏實

這篇就簡單記錄一些心得跟資料,如果想比較深入了解 hls 的,可以參考下面這兩篇文章:

  1. 直播协议的选择:RTMP vs. HLS
  2. 在线视频之HLS协议—学习笔记:M3U8格式讲解及实际应用分析

閱讀更多

前言

Redis 是一個 in-memory 的 key-value database,因此常常被用在需要快取(Cache)一些資料的場合,可以減輕許多後端資料庫的壓力。這篇就來簡單介紹一下 Redis 提供哪些好用的東西,以及可以應用在什麼地方。

閱讀更多

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×