三,chrome 调试工具实战
3.1 获取界面对应的 html 和修改样式
我们以博客园为例子来分析.
通过上面的操作就可以定位到对应的 HTML 代码
左侧菜单显示的就是当前指定元素层叠样式的一个情况
上面的图片中的内容是可以随意添加的,但是如果是只操作于一个元素,那么我们直接在最顶层上面添加样式就好.
:hov 按钮可以模拟 hofv 的操作
:cls 可以给元素添加 class
下面我们来演示模拟标题的一个 hover 事件
3.2 快速定位对应元素上面的事件
还是以上面的同一个标题为例:
我们把右侧菜单切换到 Event Listeners 中去,从这界面中我们可以分析到在这个元素上面是没有绑定其他事件的
a 标签中的 href 不属于触发事件的行列之内.
这个操作的一个好处有两点一个就是可以快速的上说别人的代码.另外一个好处就是可以快速定位问题的出处.
举一个比较复杂的例子.
上面这张图是一个按钮上面的事件绑定情况,如图所示.初步看起来视乎好像上面绑定了很多事件,但是其实不然.
我们展开其中的一个 click 看下:
来源: https://www.cnblogs.com/st-leslie/p/8261319.html