在浏览器中怎么查看某个HTML元素所绑定的事件
日期：2014-05-16 浏览次数：20535 次
在浏览器中如何查看某个HTML元素所绑定的事件
网上查阅了资料，但都不能解决这问题。
需求是这样：比如我看到某个网页上有个图片的onmouseover事件效果很漂亮，想知道是怎么实现的，背后该事件绑定的function是什么，通过Firebug，chrome的控制台都没能看到该事件。
请问坛里的高手，有这方面的解决方案吗？
以下是我找到的资料，但并不适用。
资料： http://hi.baidu.com/shashadu/blog/item/3366cf2697d1eb198b82a168.html
http://www.bennadel.com/blog/1727-Viewing-jQuery-DOM-Event-Bindings-With-FireBug.htm
示例网站：http://blog.xdite.net/ 网站Logo在Chrome下浏览时鼠标移动到上面会有抖动效果。请问能找到背后的实现代码吗？
以上只是举个例子，这样的效果也不难实现，我想要的结果是当我对某些网站的一些元素事件感兴趣时，可以举一反三。
------解决方案--------------------
网上查阅了资料，但都不能解决这问题。
需求是这样：比如我看到某个网页上有个图片的onmouseover事件效果很漂亮，想知道是怎么实现的，背后该事件绑定的function是什么，通过Firebug，chrome的控制台都没能看到该事件。
请问坛里的高手，有这方面的解决方案吗？
以下是我找到的资料，但并不适用。
资料： http://hi.baidu.com/shashadu/blog/item/3366cf2697d1eb198b82a168.html
http://www.bennadel.com/blog/1727-Viewing-jQuery-DOM-Event-Bindings-With-FireBug.htm
示例网站：http://blog.xdite.net/ 网站Logo在Chrome下浏览时鼠标移动到上面会有抖动效果。请问能找到背后的实现代码吗？
以上只是举个例子，这样的效果也不难实现，我想要的结果是当我对某些网站的一些元素事件感兴趣时，可以举一反三。
------解决方案--------------------
- CSS code
body > header h1 a img:hover { -webkit-animation-name:tp1; -webkit-animation-duration:1.9555s; -webkit-animation-iteration-count:infinite; cursor:pointer }
@-webkit-keyframes tp1 { 0% {
-webkit-transform:translate(-2px, 0px)
}
10% {
-webkit-transform:translate(-2px, 0px) rotate(-1deg)
}
20% {
-webkit-transform:translate(-5px, -5px) rotate(-3deg)
}
30% {
-webkit-transform:translate(-8px, 2px) rotate(-3deg)
}
40% {
-webkit-transform:translate(-5px, -5px) rotate(-1deg)
}
60% {
-webkit-transform:translate(-2px, 0px) rotate(1deg)
}
70% {
-webkit-transform:translate(5px, -5px) rotate(3deg)
}
80% {
-webkit-transform:translate(8px, 2px) rotate(3deg)
}
90% {
-webkit-transform:translate(5px, -5px) rotate(1deg)
}
100% {
-webkit-transform:translate(-2px, 0px)
}
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
