如何跟踪某个元素（如textarea）上的每一个事件？

有没有哪位大侠，可以追踪到textarea(id='txtContent')上的每一个事件？
这里的事件，
1.可能是写在元素上的如 onkeyup='xxx',
2.可能是jquery绑定的如 $("#txtContent").keydown(function(){ xxx });
3.可能是父级元素指定的事件，传到了它上面。如： $(document).keyup(function(){ xx });
...

总之，可以影响到它的，操作它可能发生的事件都算。

平时，我们写的js比较简单，很容易直接找到触发的function，但写的js多了，再者引用的组件多了，很难知道在哪一个地方给它加了事件，出错不容易跟踪。

思路：
1. 有没有什么浏览器，可以直接定位到textarea，然后那个元素产生事件时自然地进行跟踪调试？
2. 如果1没有，那有没有什么办法可以遍历出此元素textarea可能触发的所有事件的function(没有定义的不算，比如有onmouseover事件，但没有定义onmouseover对应的function就不算)呢？

12 个解决方案

#1

当然，不要告诉我用什么firebug, 也不要叫我直接找代码，我已经找了一整天了……

#2

没有但是办法还是有

先是谷歌浏览器对于在控制台设置这个标签的 break on... 那么在属性变化的情况下可以断点js

在就比较麻烦了我会吧 textarea的 id改掉然后查看所有报错的地方一个一个的改

#3

我觉得你监听元素的事件是没问题的，但你要求的是跟踪因这个事件产生的相应函数就难了，几乎是不可能吧。
在一个元素上用addEventListener()完全可以知道它什么时候响应了什么事件，比如点击事件，但是由此引发的所有函数应该是无法获取的，因为可能是一大堆的队列事件。

#4

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

    <script type="text/javascript">

    function fns() {

    

    }

	var arr = ['onabort', 'onblur', 'onchange', 'onclick', 'ondblclick', 'onerror', 'onfocus', 'onkeydown', 'onkeypress', 'onkeyup', 'onload', 'onmousedown', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onreset', 'onresize', 'onselect', 'onsubmit', 'onunload'];

    function bianli() {

    	var obj = document.getElementById('divId');

    	for(var i in obj) {

    		for(var j=0; j<arr.length; j++) {

    			if('on' + i == arr[j]) {

    				if(obj[i] != null) {

    					alert(obj[i]);

    				}

    			}

    		}

    	}

    }

    window.onload = function() {

    	bianli();

    }

    </script>

    <style type="text/css">


    </style>

    </head>

    <body>

    <div id='divId' onclick='fns()'></div>

    </body>

    </html>

#5

引用 4 楼 veryhunger 的回复:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

    <script type="text/javascript">

    function fns() {

    

    }

	var arr = ['onabort', 'onblur', 'onchange', 'onclick', 'ondblclick', 'onerror', 'onfocus', 'onkeydown', 'onkeypress', 'onkeyup', 'onload', 'onmousedown', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onreset', 'onresize', 'onselect', 'onsubmit', 'onunload'];

    function bianli() {

    	var obj = document.getElementById('divId');

    	for(var i in obj) {

    		for(var j=0; j<arr.length; j++) {

    			if('on' + i == arr[j]) {

    				if(obj[i] != null) {

    					alert(obj[i]);

    				}

    			}

    		}

    	}

    }

    window.onload = function() {

    	bianli();

    }

    </script>

    <style type="text/css">


    </style>

    </head>

    <body>

    <div id='divId' onclick='fns()'></div>

    </body>

    </html>

要饭哥的想法很不错，但还是没有考虑父级元素影响呀……

#6

引用 5 楼 yenange 的回复:

Quote: 引用 4 楼 veryhunger 的回复:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

    <script type="text/javascript">

    function fns() {

    

    }

	var arr = ['onabort', 'onblur', 'onchange', 'onclick', 'ondblclick', 'onerror', 'onfocus', 'onkeydown', 'onkeypress', 'onkeyup', 'onload', 'onmousedown', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onreset', 'onresize', 'onselect', 'onsubmit', 'onunload'];

    function bianli() {

    	var obj = document.getElementById('divId');

    	for(var i in obj) {

    		for(var j=0; j<arr.length; j++) {

    			if('on' + i == arr[j]) {

    				if(obj[i] != null) {

    					alert(obj[i]);

    				}

    			}

    		}

    	}

    }

    window.onload = function() {

    	bianli();

    }

    </script>

    <style type="text/css">


    </style>

    </head>

    <body>

    <div id='divId' onclick='fns()'></div>

    </body>

    </html>

要饭哥的想法很不错，但还是没有考虑父级元素影响呀……

是的，根据事件冒泡，可以再遍历其子元素各个事件，但我写的途中遇到困难，故先把思路写出来，有空再写吧

#7

没有现成的完美的解决方案吧。

自己看看，需要响应哪些事件，就添加监听并处理。

#8

引用 7 楼 u010087908 的回复:

没有现成的完美的解决方案吧。

自己看看，需要响应哪些事件，就添加监听并处理。

捂脸妹…… 哥正是因为未知，才来求助如何跟踪某个元素（如textarea）上的每一个事件？

#9

extjs提供的events有
activate
added
afterrender
autosize
beforeactivate
beforedeactivate
beforedestroy
beforehide
beforerender
beforeshow
beforestaterestore
beforestatesave
blur
boxready
change
deactivate
destroy
dirtychange
disable
enable
errorchange
focus
hide
keydown
keypress
keyup
move
removed
render
resize
show
specialkey
staterestore
statesave
validitychange
writeablechange

你写个Controller，响应需要处理的几个events。
需要我简单讲一下extjs的MVC不？

#10

引用 9 楼 u010087908 的回复:

extjs提供的events有
activate
added
afterrender
autosize
beforeactivate
beforedeactivate
beforedestroy
beforehide
beforerender
beforeshow
beforestaterestore
beforestatesave
blur
boxready
change
deactivate
destroy
dirtychange
disable
enable
errorchange
focus
hide
keydown
keypress
keyup
move
removed
render
resize
show
specialkey
staterestore
statesave
validitychange
writeablechange

你写个Controller，响应需要处理的几个events。
需要我简单讲一下extjs的MVC不？

这是哪跟哪呀? 你就知道我一定用了 extjs, 一定用了MVC?

#11

该回复于2013-05-16 15:03:34被管理员删除

#12

没办法，结贴了，不浪费分吧。。。。

#1

当然，不要告诉我用什么firebug, 也不要叫我直接找代码，我已经找了一整天了……

#2

#3

#4

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

    <script type="text/javascript">

    function fns() {

    

    }

	var arr = ['onabort', 'onblur', 'onchange', 'onclick', 'ondblclick', 'onerror', 'onfocus', 'onkeydown', 'onkeypress', 'onkeyup', 'onload', 'onmousedown', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onreset', 'onresize', 'onselect', 'onsubmit', 'onunload'];

    function bianli() {

    	var obj = document.getElementById('divId');

    	for(var i in obj) {

    		for(var j=0; j<arr.length; j++) {

    			if('on' + i == arr[j]) {

    				if(obj[i] != null) {

    					alert(obj[i]);

    				}

    			}

    		}

    	}

    }

    window.onload = function() {

    	bianli();

    }

    </script>

    <style type="text/css">


    </style>

    </head>

    <body>

    <div id='divId' onclick='fns()'></div>

    </body>

    </html>

#5

引用 4 楼 veryhunger 的回复:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

    <script type="text/javascript">

    function fns() {

    

    }

	var arr = ['onabort', 'onblur', 'onchange', 'onclick', 'ondblclick', 'onerror', 'onfocus', 'onkeydown', 'onkeypress', 'onkeyup', 'onload', 'onmousedown', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onreset', 'onresize', 'onselect', 'onsubmit', 'onunload'];

    function bianli() {

    	var obj = document.getElementById('divId');

    	for(var i in obj) {

    		for(var j=0; j<arr.length; j++) {

    			if('on' + i == arr[j]) {

    				if(obj[i] != null) {

    					alert(obj[i]);

    				}

    			}

    		}

    	}

    }

    window.onload = function() {

    	bianli();

    }

    </script>

    <style type="text/css">


    </style>

    </head>

    <body>

    <div id='divId' onclick='fns()'></div>

    </body>

    </html>

要饭哥的想法很不错，但还是没有考虑父级元素影响呀……

#6

引用 5 楼 yenange 的回复:

Quote: 引用 4 楼 veryhunger 的回复:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

    <script type="text/javascript">

    function fns() {

    

    }

	var arr = ['onabort', 'onblur', 'onchange', 'onclick', 'ondblclick', 'onerror', 'onfocus', 'onkeydown', 'onkeypress', 'onkeyup', 'onload', 'onmousedown', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onreset', 'onresize', 'onselect', 'onsubmit', 'onunload'];

    function bianli() {

    	var obj = document.getElementById('divId');

    	for(var i in obj) {

    		for(var j=0; j<arr.length; j++) {

    			if('on' + i == arr[j]) {

    				if(obj[i] != null) {

    					alert(obj[i]);

    				}

    			}

    		}

    	}

    }

    window.onload = function() {

    	bianli();

    }

    </script>

    <style type="text/css">


    </style>

    </head>

    <body>

    <div id='divId' onclick='fns()'></div>

    </body>

    </html>

要饭哥的想法很不错，但还是没有考虑父级元素影响呀……

是的，根据事件冒泡，可以再遍历其子元素各个事件，但我写的途中遇到困难，故先把思路写出来，有空再写吧

#7

没有现成的完美的解决方案吧。

自己看看，需要响应哪些事件，就添加监听并处理。

#8

引用 7 楼 u010087908 的回复:

没有现成的完美的解决方案吧。

自己看看，需要响应哪些事件，就添加监听并处理。

捂脸妹…… 哥正是因为未知，才来求助如何跟踪某个元素（如textarea）上的每一个事件？

#9

#10

引用 9 楼 u010087908 的回复:

extjs提供的events有
activate
added
afterrender
autosize
beforeactivate
beforedeactivate
beforedestroy
beforehide
beforerender
beforeshow
beforestaterestore
beforestatesave
blur
boxready
change
deactivate
destroy
dirtychange
disable
enable
errorchange
focus
hide
keydown
keypress
keyup
move
removed
render
resize
show
specialkey
staterestore
statesave
validitychange
writeablechange

你写个Controller，响应需要处理的几个events。
需要我简单讲一下extjs的MVC不？

这是哪跟哪呀? 你就知道我一定用了 extjs, 一定用了MVC?

#11

该回复于2013-05-16 15:03:34被管理员删除

#12

没办法，结贴了，不浪费分吧。。。。

秒客网

如何跟踪某个元素（如textarea）上的每一个事件？

12 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

相关文章