jquery 如何获取JavaScript事件源元素？

mmvthczy  于 2023-10-17  发布在  jQuery
关注(0)|答案(6)|浏览(117)

有没有一种方法可以检索内联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函数与它的原始参数，而不知道函数名称。
验证码：

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

6条答案

按热度按时间
jm2pwxwz

jm2pwxwz1#

你的HTML应该是这样的：

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

将输入参数重命名为事件，

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

能解决你的问题
顺便说一下，我建议看看jQuery和不显眼的JavaScript

赞(0）分享  回复(0）举报  2023-10-17
cx6n0qe3

cx6n0qe32#

您应该将生成的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]);
    });
});

在click处理程序中，我们可以在调用原始函数之前或之后添加任何我们想要的东西。
一个工作示例

$('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>
赞(0）分享  回复(0）举报  2023-10-17
9wbgstp7

9wbgstp73#

调用函数时可以传递this

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

<script>
    function doSomething(param,me){

    var source = me
    console.log(source);
}
</script>
赞(0）分享  回复(0）举报  2023-10-17
dsf9zpds

dsf9zpds4#

跨浏览器解决方案

我相信@slipset的解决方案是正确的，它不需要jQuery，但是它没有跨浏览器准备好。
根据Javascript.info，事件（当在标记事件之外被引用时）是跨浏览器就绪的，只要你确保它是用下面这行简单的代码定义的：event = event || window.event。
因此，完整的跨浏览器就绪函数看起来像这样：

function logMySource(param){
  event = event || window.event;
  var source = event.target || event.srcElement;
  console.log("sourceID= "+source.id,"\nsourceTagName= "+source.tagName,"\nparam= "+param);
}
<button onclick="logMySource('myVariable')" id="myID">action</button>

试试吧！我已经包括了有用的信息来源的回报。

赞(0）分享  回复(0）举报  2023-10-17
kqqjbcuj

kqqjbcuj5#

试试这样的方法：

<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>
赞(0）分享  回复(0）举报  2023-10-17
gz5pxeao

gz5pxeao6#

使用.live()

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

从jQuery 1.7开始，.live（）方法被弃用。使用.on（）附加事件处理程序。

$(document).on(events, selector, data, handler);
赞(0）分享  回复(0）举报  2023-10-17
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com