如何获取javaScript事件源元素？

Question

有没有办法检索内联javaScript调用的元素源？

我有一个这样的按钮:

<button onclick="doSomething('param')" id="id_button">action</button>

注意:

• 该按钮是从服务器生成的
• 我无法修改生成过程
• 页面上生成了几个按钮,我只能在客户端控制.

我尝试过的:

function doSomething(param){
    var source = event.target || event.srcElement;
    console.log(source);
}

在萤火虫上我得到的事件没有定义

编辑:在一些答案之后,使用jQuery覆盖事件处理是非常可接受的.我的问题是如何使用它的原始参数调用原始的onClick函数,并且不知道函数名称.

码:

<button onclick="doSomething('param')" id="id_button1">action1</button>
<button onclick="doAnotherSomething('param1', 'param2')" id="id_button1">action2</button>.
<button onclick="doDifferentThing()" id="id_button3">action3</button>
.
.
and so on..

所以覆盖将是:

$(document).on('click', 'button', function(e) {
  e.preventDefault();
  var action = $(this).attr('onclick');
  /**
   * What to do here to call
   * - doSomething(this, 'param'); if button1 is clicked
   * - doAnotherSomething(this, 'param1', 'param2'); if button2 is clicked
   * - doDifferentThing(this); if button3 is clicked
   * there are many buttons with many functions..
   */
});

Answer 1

你的HTML应该是这样的:

<button onclick="doSomething" id="id_button">action</button>

并将您的输入参数重命名为此类事件

function doSomething(event){
    var source = event.target || event.srcElement;
    console.log(source);
}

会解决你的问题.

作为旁注,我建议看一下jQuery和不引人注目的javascript

Answer 2

您应该将生成的HTML更改为不使用内联javascript,addEventListener而是使用.

如果您无法以任何方式更改HTML,您可以获取所使用的onclick属性,函数和参数,并通过删除onclick处理程序和使用事件侦听器将其"转换"为不显眼的javascript .

我们首先从属性中获取值

$('button').each(function(i, el) {
    var funcs = [];

	$(el).attr('onclick').split(';').map(function(item) {
    	var fn     = item.split('(').shift(),
        	params = item.match(/\(([^)]+)\)/), 
            args;
            
        if (params && params.length) {
        	args = params[1].split(',');
            if (args && args.length) {
                args = args.map(function(par) {
            		return par.trim().replace(/('")/g,"");
            	});
            }
        }
        funcs.push([fn, args||[]]);
    });
  
    $(el).data('args', funcs); // store in jQuery's $.data
  
    console.log( $(el).data('args') );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="doSomething('param')" id="id_button1">action1</button>
<button onclick="doAnotherSomething('param1', 'param2')" id="id_button1">action2</button>.
<button onclick="doDifferentThing()" id="id_button3">action3</button>

这给了我们一个由onclick属性调用的所有和任何全局方法的数组,以及传递的参数,所以我们可以复制它.

然后我们只删除所有内联javascript处理程序

$('button').removeAttr('onclick')

并附上我们自己的处理程序

$('button').on('click', function() {...}

在这些处理程序中,我们将获得存储的原始函数调用及其参数,并调用它们.
我们知道通过内嵌的JavaScript是全球性的调用的任何功能,我们可以把它们带window[functionName].apply(this-value, argumentsArray),所以

$('button').on('click', function() {
    var element = this;
    $.each(($(this).data('args') || []), function(_,fn) {
        if (fn[0] in window) window[fn[0]].apply(element, fn[1]);
    });
});

在单击处理程序中,我们可以在调用原始函数之前或之后添加我们想要的任何内容.

一个工作的例子

$('button').each(function(i, el) {
    var funcs = [];

	$(el).attr('onclick').split(';').map(function(item) {
    	var fn     = item.split('(').shift(),
        	params = item.match(/\(([^)]+)\)/), 
            args;
            
        if (params && params.length) {
        	args = params[1].split(',');
            if (args && args.length) {
                args = args.map(function(par) {
            		return par.trim().replace(/('")/g,"");
            	});
            }
        }
        funcs.push([fn, args||[]]);
    });
    $(el).data('args', funcs);
}).removeAttr('onclick').on('click', function() {
	console.log('click handler for : ' + this.id);
  
	var element = this;
	$.each(($(this).data('args') || []), function(_,fn) {
    	if (fn[0] in window) window[fn[0]].apply(element, fn[1]);
    });
  
    console.log('after function call --------');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="doSomething('param');" id="id_button1">action1</button>
<button onclick="doAnotherSomething('param1', 'param2')" id="id_button2">action2</button>.
<button onclick="doDifferentThing()" id="id_button3">action3</button>

<script>
	function doSomething(arg) { console.log('doSomething', arg) }
    function doAnotherSomething(arg1, arg2) { console.log('doAnotherSomething', arg1, arg2) }
    function doDifferentThing() { console.log('doDifferentThing','no arguments') }
</script>