整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          如何使用chrome瀏覽器進行js調試找出元素綁定的

          如何使用chrome瀏覽器進行js調試找出元素綁定的點擊事件(實用)

          家有沒有遇到這樣的一個問題,我們在分析一些大型電子商務平臺的Web前端腳本時,想找到一個元素綁定的點擊事件,并不是那么容易,因為有些前端腳本封裝的比較隱蔽,甚至有些加密腳本,用傳統的查找元素ID、或者頁面源碼方法去找,可能最后徒勞無功。下面我來介紹利用chrome瀏覽器來查找元素綁定的事件。

          只需要通過chrome瀏覽器以下三個功能就可以輕松找到綁定事件了。

          1.Sources(源碼)

          2.Event Listener Breakpoints(事件監聽斷點)

          3.Call Stack(函數調用棧)

          舉個栗子:

          1.打開某網站,點擊“規格”中的“100x100”選項,按F12,彈出前端調試窗口,切換到Sources標簽。

          2.看右邊的窗口(Event Listener Breakpoints)欄,選擇click選項(監聽點擊事件)。

          3.展開Call Stack(函數調用棧)。

          4.然后點擊如下圖標或按F11,觀察CallStack。

          5.一路按如下圖標或按F11,直至發現事件是直接事件源。

          一路按下去,一定要有耐心。。。。。

          到這里已經發現找到了事件源!!!

          、這個例子可以說是在文章【301】的基礎上加了個按鈕,當點擊按鈕的時候彈出消息框,效果如下動圖:

          圖1

          二、首先,我們先做一個按鈕。

          圖2

          圖3

          三、給按鈕配上一個單擊函數,當然這個函數的名字隨便起。

          圖4

          四、在body里面加入script標簽,javascript只能寫在script標簽里,于是我們把myclick()寫在里面。

          圖5

          五、我們在函數里加入彈出消息框alert,當點擊按鈕的時候,就會執行函數myclick()。

          圖6

          擊右上方紅色按鈕關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!

          我們天天都會寫HTML結構,然而,HTML本身存在一些個問題,在日常中,我們尤其需要注意這些問題,應該避開這么使用。下面我來列一下一些常見的點:

          1、img標簽

          img元素標簽可以不用寫alt或title,也能正常顯示。

          <img src="photo.jpg"/>

          2、a標簽

          a元素標簽可以不寫href屬性,不過這樣容易出現問題,即使添加塊級元素也不會報錯,但是里面的內容在瀏覽器解析后會發生位置偏移,如果出了問題將很難定位。

          <a><h2></h2></a>

          3、語義化

          并不是所有的標簽都是帶有語義化的,div,i就是比較典型的例子,所以盡量避免在這些標簽里面直接添加文字。實際項目開發中,我們常常把<i>元素標簽當作頁面上的icon圖標來使用。

          <div></div>

          <i></i>

          4、用對元素標簽

          盡管HTML規范提供了有語義化的列表元素,但我們仍然可以用下面這種方式來定義列表,而且在頁面上也可以正常顯示。

          <div>

          <span class="list-item">1</span>

          <span class="list-item">2</span>

          <span class="list-item">3</span>

          </div>

          5、屬性的隨意性

          先看一段代碼:

          <div style="width:100px;height:30px;top:10px;display:relative;"></div>

          上面代碼中,隨意添加top屬性也是可以的,只是不生效且不會報錯,加入display:relative;也不會提示錯誤,但是relative并不是display的屬性。

          6、table的問題

          <table>

          <thead>table list</thead>

          <tr>

          <th>list1</th>

          </tr>

          ......

          </table>

          html定義了table元素,但table是一次性渲染的,如果表格內容較長就比較慢了。

          7、label可有無

          Date:<input type="text" name="name" />

          表單輸入項內容不寫label也是沒問題的,<label>可以定義與表單控件間的關系,當用戶選擇該標簽時,瀏覽器會自動將焦點轉到和標簽相關的表單控件上。

          8、不合理的標簽

          這些個不合理的標簽 ,新標準已經棄用了。

          <blink></blink>

          <marquee></marquee>

          <stike></stike>

          總結一下:

          很顯然,這些糟糕的設計不僅降低了頁面可讀性,拖慢了頁面性能,不利于SEO。而且誤導了初學者對HTML的理解使用,更有可能讓我們在已經出錯的情況下找不到錯誤的原因和方向 。所以,我們必須要避免這些問題的發生。


          上一篇:#科技
          下一篇:什么是響應時間測試?
          主站蜘蛛池模板: 2022年亚洲午夜一区二区福利| 国内精品视频一区二区三区| 亚洲中文字幕无码一区| 久久精品一区二区三区资源网| 免费看无码自慰一区二区| 69福利视频一区二区| 激情内射亚州一区二区三区爱妻| AV无码精品一区二区三区| 亚洲日韩激情无码一区| 国产一区玩具在线观看| 中文字幕永久一区二区三区在线观看 | 国产亚洲日韩一区二区三区 | 性无码免费一区二区三区在线| 一区二区在线视频观看| 麻豆精品一区二区综合av| 欧美人妻一区黄a片| 亚洲一区二区观看播放| 亚洲综合色一区二区三区小说| 免费日本一区二区| 国产suv精品一区二区33| 久久精品岛国av一区二区无码| 久久亚洲AV午夜福利精品一区| 中文字幕AV一区中文字幕天堂| 精品久久久久一区二区三区| www一区二区三区| 精品国产亚洲一区二区在线观看 | 国产熟女一区二区三区四区五区| 国产成人精品a视频一区| 久久一区二区免费播放| 国产一区二区高清在线播放| 三上悠亚一区二区观看| 午夜影视日本亚洲欧洲精品一区 | 中文字幕一区二区三区视频在线| 久久综合一区二区无码| 精品国产福利第一区二区三区| 99久久人妻精品免费一区| 日韩毛片基地一区二区三区| 国模吧一区二区三区精品视频| 国产一区二区视频免费| 在线观看国产区亚洲一区成人| 亚洲av无码一区二区三区网站|