从外部js文件触发js事件（如onclick）
[英]trigger js events like onclick from an external js file
问题描述
I do sincerely apologize for this question, but this is my 72nd hour of coding in javascript and for reasons unknown to me I can't find the answer to this question. 
对于这个问题，我确实表示歉意，但这是我用JavaScript编写代码的第72个小时，由于我不知道的原因，我找不到该问题的答案。
I need to be able to trigger event handlers like onclick, from an external js file. 我需要能够从外部js文件触发事件处理程序（如onclick）。 This is how I have linked my files in my HTML. 这就是我在HTML中链接文件的方式。
<header>
<h1>McMac editing</h1>
<meta charset="utf-8">
<script src="JQuery.js"></script>
<script src="index.js"></script>
</header>
This is how I set up index.js. 这就是我设置index.js的方式。
var capture = document.getElementById("capture");
capture.onload = function(){console.log="load";};
I will be using cordova eventually, and it says there that inline JS is disabled so this is why I need to get this working and right now with my current setup "load" isn't popping up in my console. 我最终将使用cordova，并且它说禁用了内联JS，所以这就是为什么我需要使其正常工作，并且当前在我的控制台中未弹出当前设置“ load”的原因。
Again, I apologize for the question but I don't know what to do. 再次，我为这个问题表示歉意，但我不知道该怎么办。
4 个解决方案
解决方案1
2 2016-05-29 10:15:23
You are trying to access "capture" element that has not been loaded when you supposed to get it from dom by using this code var capture = document.getElementById("capture"); 您试图通过使用以下代码从dom中获取尚未加载的“ capture”元素时进行访问var capture = document.getElementById("capture"); .In right next statement you have written capture.onload = function(){} .That causes following console error because browser did not find any element named "capture" exist at that time so it returns null object to capture . 在下capture.onload = function(){}语句中，您编写了capture.onload = function(){} 。这会导致以下控制台错误，因为浏览器当时没有找到任何名为“ capture”的元素，因此它返回null对象以进行capture 。
Cannot set property 'onload' of null
You have two ways to fix it 您有两种方法可以修复它
1. load index.js after body element 1.在body元素之后加载index.js
<html>
.
.
</body>
<script src="index.js" type="text/javascript"></script>
</html>
2. Wait until all body elements are loaded in dom (without using JQuery) 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
I tried to do it in a little different way.. Hope it helps. 我尝试以其他方式进行操作。希望对您有所帮助。
INDEX.JS INDEX.JS
$(document).ready(function(){
console.log("Loaded");
// var capture = document.getElementById("capture");
$("#capture").click(function(){
console.log("load");
alert("Hello!");
});
});
YOUR HTML 您的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>
I am using bower hence the path for jquery is of bower components. 我使用的是凉亭，因此jquery的路径是凉亭组件。
解决方案3
0 已采纳 2016-05-29 09:30:14
html code : 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 index.js
var ele = document.getElementById("capture");
ele.onclick = function() {
console.log("click");
}
Note : onload is most often used within the body element : 注意：onload最常在body元素内使用：
html code : html代码：
<html>
<head>
<title></title>
<style>
</style>
</head>
<body id="capture" >
<script src="index.js"></script>
</body>
</html>
index.js : index.js：
var ele = document.getElementById("capture");
ele.onload = function() {
console.log("load");
}
解决方案4
0 2016-05-29 09:52:58
I think it would easier to get a quick solution if you show the html part where 'capture' is defined. 我认为，如果您显示在其中定义了“捕获”的html部分，则会更容易获得快速解决方案。 your javascript code declaration in your index.js is correct depending on what is in your html code. 您的index.js中的javascript代码声明是正确的，具体取决于html代码中的内容。
Things to consider: 注意事项：
1) your index.js should be in the same folder wit your html file. 1）您的index.js应该与HTML文件位于同一文件夹中。
2) In your index.js, you declare 'var capture = document.getElementById("capture");', therefore 'capture' should be an id of an element in your html code. 2）在index.js中，您声明了'var capture = document.getElementById（“ capture”）;'，因此，'capture'应该是html代码中元素的ID。
3) you use the onload event here. 3）您在这里使用onload事件。 onload is normally used with the 'body' element to execute a script once a web page has completely loaded all content. 一旦网页完全加载了所有内容，onload通常与'body'元素一起使用以执行脚本。
so if capture is not an id of your html body element, then probably that's why you are not seeing a thing in your console. 因此，如果capture不是您的html body元素的ID，则可能就是为什么您在控制台中看不到任何东西的原因。 please show your html code, if you need a more specific answer. 如果需要更具体的答案，请显示您的html代码。
I hope this would help. 我希望这会有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.