家有沒有遇到這樣的一個問題,我們在分析一些大型電子商務平臺的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本身存在一些個問題,在日常中,我們尤其需要注意這些問題,應該避開這么使用。下面我來列一下一些常見的點:
img元素標簽可以不用寫alt或title,也能正常顯示。
<img src="photo.jpg"/>
a元素標簽可以不寫href屬性,不過這樣容易出現問題,即使添加塊級元素也不會報錯,但是里面的內容在瀏覽器解析后會發生位置偏移,如果出了問題將很難定位。
<a><h2></h2></a>
并不是所有的標簽都是帶有語義化的,div,i就是比較典型的例子,所以盡量避免在這些標簽里面直接添加文字。實際項目開發中,我們常常把<i>元素標簽當作頁面上的icon圖標來使用。
<div></div>
<i></i>
盡管HTML規范提供了有語義化的列表元素,但我們仍然可以用下面這種方式來定義列表,而且在頁面上也可以正常顯示。
<div>
<span class="list-item">1</span>
<span class="list-item">2</span>
<span class="list-item">3</span>
</div>
先看一段代碼:
<div style="width:100px;height:30px;top:10px;display:relative;"></div>
上面代碼中,隨意添加top屬性也是可以的,只是不生效且不會報錯,加入display:relative;也不會提示錯誤,但是relative并不是display的屬性。
<table>
<thead>table list</thead>
<tr>
<th>list1</th>
</tr>
......
</table>
html定義了table元素,但table是一次性渲染的,如果表格內容較長就比較慢了。
Date:<input type="text" name="name" />
表單輸入項內容不寫label也是沒問題的,<label>可以定義與表單控件間的關系,當用戶選擇該標簽時,瀏覽器會自動將焦點轉到和標簽相關的表單控件上。
這些個不合理的標簽 ,新標準已經棄用了。
<blink></blink>
<marquee></marquee>
<stike></stike>
總結一下:
很顯然,這些糟糕的設計不僅降低了頁面可讀性,拖慢了頁面性能,不利于SEO。而且誤導了初學者對HTML的理解使用,更有可能讓我們在已經出錯的情況下找不到錯誤的原因和方向 。所以,我們必須要避免這些問題的發生。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。