Question

我试图在JavaScript中创建一个可以设置HTML按钮的onClick属性的函数。
所以，我说这是我的功能：

function myFunc(action){
    document.getElementById('mybtn').setAttribute("onClick", action);
}

这会将mybtn的属性onClick设置为变量action的内容（应该是一个函数）。

所以，如果我运行这样的函数：

myFunc(function(){
    alert("Hello, World!");
});

然后变量action将设置为

function (){
    alert("Hello, World!");
}

如果我按照图示运行myFunc，它会成功将action的内容添加到按钮的onClick属性中。唯一的问题是，如果我在myFunc运行后单击按钮，我只会收到错误。它说：
未捕获的SyntaxError：意外的令牌（

我认为这是因为在onClick属性中，您无法定义新功能。
如何才能获得变量action中函数内部的内容？

Answer 1

您可以添加事件侦听器，而不是像on this这样更改onclick的属性：

function myFunc(action) {
  document.getElementById('mybtn').addEventListener('click', action);
}

myFunc(function() {
  alert('foo');
});

<button id="mybtn">Foo</button>

Answer 2

属性值只能是字符串。您的函数被字符串化为

'function(){ alert("Hello, World!"); }'

然后事件处理程序将其解析为函数体。这意味着它将被视为函数声明，但函数声明需要一个名称。因此，是的，有一个意外的(：它之前应该有一个名字。 Firefox提供了更有意义的错误

SyntaxError: function statement requires a name

＆＃13;

function() {
  alert("Hello, World!");
}

＆＃13;

如果你真的想使用事件处理程序内容属性，你应该传递一个只包含函数体的字符串：

myFunc('alert("Hello, World!")');

＆＃13;

function myFunc(action){
  document.getElementById('mybtn').setAttribute("onclick", action);
}
myFunc('alert("Hello, World!")');

＆＃13;

<button id="mybtn">Click me</button>

＆＃13;

但我强烈反对事件处理程序内容属性。而是使用事件处理程序IDL属性：

function myFunc(action) {
  document.getElementById('mybtn').onclick = action;
}

＆＃13;

function myFunc(action) {
  document.getElementById('mybtn').onclick = action;
}
myFunc(function (){
  alert("Hello, World!");
});

＆＃13;

<button id="mybtn">Click me</button>

＆＃13;

甚至更好的事件监听器

function myFunc(action) {
  document.getElementById('mybtn').addEventListener('click', action);
}

＆＃13;

function myFunc(action) {
  document.getElementById('mybtn').addEventListener('click', action);
}
myFunc(function (){
  alert("Hello, World!");
});

＆＃13;

<button id="mybtn">Click me</button>

＆＃13;

Answer 3

html onclick事件属性需要字符串，而不是函数。您可以定义要调用的函数，然后将字符串引用函数传递给myFunc

<div id="mybtn">click</div>
<script>
  function myFunc(action) {
    document.getElementById("mybtn").setAttribute("onclick", action);
  }
  
  function clickHandler() {
    alert("Hello, World!");
  }

  myFunc("clickHandler()");
</script>

获取JavaScript函数的内容

3 个答案: