家有沒有遇到這樣的一個問題，我們在分析一些大型電子商務平臺的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】的基礎上加了個按鈕，當點擊按鈕的時候彈出消息框，效果如下動圖：

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

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

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

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

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

我們天天都會寫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的理解使用，更有可能讓我們在已經出錯的情況下找不到錯誤的原因和方向 。所以，我們必須要避免這些問題的發生。