家有没有遇到这样的一个问题，我们在分析一些大型电子商务平台的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的理解使用，更有可能让我们在已经出错的情况下找不到错误的原因和方向 。所以，我们必须要避免这些问题的发生。