Как получить элемент источника события javaScript?

Есть ли способ получить источник элемента встроенного вызова javaScript?

У меня есть кнопка вроде этого:

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

Примечание:

кнопка создается с сервера
Я не могу изменить процесс генерации
на странице создано несколько кнопок, у меня есть контроль только на стороне клиента.

Что я пробовал:

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

В firebug я получаю событие не определено

Изменить: После некоторых ответов переопределение обработки событий с помощью jQuery очень приемлемо. Моя проблема заключается в том, как вызвать исходную функцию onClick с ее оригинальными prameters и не зная имени функции.

код:

<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..
   */
});

Ответ 1

Вы должны изменить сгенерированный HTML-код, чтобы не использовать встроенный javascript, и вместо этого используйте addEventListener.

Если вы не можете каким-либо образом изменить HTML, вы можете получить атрибуты onclick, используемые функции и аргументы и "преобразовать" его в ненавязчивый javascript, удалив onclick обработчики и использование прослушивателей событий.

Мы начнем с получения значений из атрибутов

$('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 $.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>

Ответ 2

Ваш html должен выглядеть следующим образом:

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

И переименование вашего входного параметра на событие, подобное этому

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

решит вашу проблему.

В качестве побочного примечания я бы предложил взглянуть на jQuery и ненавязчивый javascript

Ответ 3

попробуйте что-то вроде этого

        <html>
        <body>
        <script type="text/javascript">
        function doSomething(event)
        {

        var source = event.target || event.srcElement;
            console.log(source);
        alert('test');
        if(window.event) // IE8 and earlier
            {
            //doSomething
            }
        else if(e.which) // IE9/Firefox/Chrome/Opera/Safari
            {
            //doSomething
            }

        }
        </script>

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

        </body>
        </html>

Ответ 4

Вы можете передать this при вызове функции

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

<script>
    function doSomething(param,me){

    var source = me
    console.log(source);
}
</script>

Ответ 5

Я считаю, что решение @slipset было правильным, но не было готово к перекрестному браузеру.

В соответствии с Javascript.info события (при ссылках на внешние события разметки) являются кросс-браузерными, как только вы заверяете его в этой простой строке: event = event || window.event.

Таким образом, полная функция готовности к кросс-браузеру будет выглядеть так:

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

Ответ 6

USE . live()

 $(selector).live(events, data, handler);

Как и в jQuery 1.7, метод .live() устарел. Используйте .on() для присоединения обработчиков событий.

$(document).on(events, selector, data, handler);