是否可以使用html标记内联事件属性调用对象方法？

Question

我试图理解核心javascript的概念。 众所周知，我们可以为这样的事件调用全局上下文中的函数。

HTML

<span class="name" onclick="clicked()">Name</span>

的JavaScript

function clicked(){
   alert("span clicked");
}

但为什么我们不能调用函数，即如下对象方法：

HTML

<span class="name" onclick="nameobject.clicked()">Name</span>

的javaScript

var nameobject = {
   clicked: function(){
     alert("Clicked");
   }
}

我有什么遗失的吗？有人可以帮我吗？

Answer 1

您可以调用它，但js代码应该在html code之前绑定 您可以查看fiddle

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var nameobject = {
   clicked: function(){
     alert("Clicked");
   }
}
</script>
<span class="name" onclick="nameobject.clicked()">Name</span>

＆＃13;

＆＃13;

＆＃13;

Answer 2

据我所知，没有这种情况。无论哪种方式都可以。

<span class="name" onclick="nameobject.click()">Name</span>
<span onclick="clicked()">Name2</span>
<script>
var nameobject = {
   click: function(){
     alert("span 1 Clicked");
   }
}
var clicked = function(){
  alert("span 2 clicked");
  }
</script>

Answer 3

如果你没有在$（document）.ready（）或window.onload函数中包含你的对象声明，它就可以工作。

示例不带 window.onload：

var nameObject = {
   clicked: function(){
     alert("Clicked");
   }
}

<button onClick="nameObject.clicked()">
Click Me
</button>

示例 with window.onload（抛出错误）

window.onload = function(){
  var nameObject = {
   clicked: function(){
     alert("Clicked");
   }
  }
};

<button onClick="nameObject.clicked()">
Click Me
</button>