生成された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'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>