從外部js文件觸發js事件（如onclick）
[英]trigger js events like onclick from an external js file
問題描述
對於這個問題，我確實表示歉意，但這是我用JavaScript編寫代碼的第72個小時，由於我不知道的原因，我找不到該問題的答案。
我需要能夠從外部js文件觸發事件處理程序（如onclick）。 這就是我在HTML中鏈接文件的方式。
<header>
<h1>McMac editing</h1>
<meta charset="utf-8">
<script src="JQuery.js"></script>
<script src="index.js"></script>
</header>
這就是我設置index.js的方式。
var capture = document.getElementById("capture");
capture.onload = function(){console.log="load";};
我最終將使用cordova，並且它說禁用了內聯JS，所以這就是為什么我需要使其正常工作，並且當前在我的控制台中未彈出當前設置“ load”的原因。
再次，我為這個問題表示歉意，但我不知道該怎么辦。
4 個解決方案
解決方案1
2 2016-05-29 10:15:23
您試圖通過使用以下代碼從dom中獲取尚未加載的“ capture”元素時進行訪問var capture = document.getElementById("capture"); 在下capture.onload = function(){}語句中，您編寫了capture.onload = function(){} 。這會導致以下控制台錯誤，因為瀏覽器當時沒有找到任何名為“ capture”的元素，因此它返回null對象以進行capture 。
無法將屬性“ onload”設置為null
您有兩種方法可以修復它
1.在body元素之后加載index.js
<html>
.
.
</body>
<script src="index.js" type="text/javascript"></script>
</html>
2.等待直到所有主體元素都加載到dom中（不使用JQuery）
document.addEventListener("DOMContentLoaded", function(event)
{
//Your code
var capture = document.getElementById("capture");
capture.onload = function()
{
console.log="load";
};
}
解決方案2
0 2016-05-29 09:19:17
我嘗試以其他方式進行操作。希望對您有所幫助。
INDEX.JS
$(document).ready(function(){
console.log("Loaded");
// var capture = document.getElementById("capture");
$("#capture").click(function(){
console.log("load");
alert("Hello!");
});
});
您的HTML
<html>
<head>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<h1>McMac editing</h1>
<meta charset="utf-8">
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="index.js"></script>
</head>
<body ng-app="">
<div id="capture" style="width:100px;height:100px; background-color:#ddd;padding:2; text-align:center; font-weight:bold;">
Click Here For External JS function Trigger.
</div>
</body>
</html>
我使用的是涼亭，因此jquery的路徑是涼亭組件。
解決方案3
0 已采納 2016-05-29 09:30:14
html代碼：
<html>
<head>
<title></title>
<style>
#capture{
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="capture"></div>
<script src="index.js"></script>
</body>
</html>
index.js
var ele = document.getElementById("capture");
ele.onclick = function() {
console.log("click");
}
注意：onload最常在body元素內使用：
html代碼：
<html>
<head>
<title></title>
<style>
</style>
</head>
<body id="capture" >
<script src="index.js"></script>
</body>
</html>
index.js：
var ele = document.getElementById("capture");
ele.onload = function() {
console.log("load");
}
解決方案4
0 2016-05-29 09:52:58
我認為，如果您顯示在其中定義了“捕獲”的html部分，則會更容易獲得快速解決方案。 您的index.js中的javascript代碼聲明是正確的，具體取決於html代碼中的內容。
注意事項：
1）您的index.js應該與HTML文件位於同一文件夾中。
2）在index.js中，您聲明了'var capture = document.getElementById（“ capture”）;'，因此，'capture'應該是html代碼中元素的ID。
3）您在這里使用onload事件。 一旦網頁完全加載了所有內容，onload通常與'body'元素一起使用以執行腳本。
因此，如果capture不是您的html body元素的ID，則可能就是為什么您在控制台中看不到任何東西的原因。 如果需要更具體的答案，請顯示您的html代碼。
我希望這會有所幫助。
外部.js文件上的“ onClick”
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.