事件处理时，javaScript文件引入html中不起作用的解决方法

js文件引入html中不起作用

1. 事件处理的三种方式：

1）方式一：html中直接调用js中的函数

<button id="imageButton" onclick="showImage()" >showImage</button>

function showImage() {
  alert("hi");
}

2)方式二：js中使用element.event=functionName调用函数

<button id="imageButton" >showImage</button>

function showImage() {
  alert("hi");
}
let bt=document.getElementById("imageButton");
bt.onclick=showImage;

3)方式三：js中使用element.addEventListener(type,functionName)调用函数

<button id="imageButton" >showImage</button>

function showImage() {
  alert("hi");
}
let bt=document.getElementById("imageButton");
bt.addEventListener("click",showImage)

2. js引用不起作用的原因——js引用在html文件中放的位置不正确

1）使用方式一进行事件处理时，js引用的位置可以任意放置

a)因为函数是在加载完控件后才被调用的，js中能够获取到控件
b)js引用一般放在标签中

2）使用方式二和方式三进行事件处理时，js引用的位置必须放在控件声明之后

a)因为此时的函数是javaScript文件被加载时调用。如果js引用放在控件声明之前，document.getElementById(“xxx”)根本就没有办法获取到控件，函数根本就不起作用。

b)js引用一般放在html文件的末尾(标签下方）****——此时所有的界面元素已经被完全加载。

我也是弄了一天js代码没有问题，但是事件处理没有响应。最后才发现原来是js引用的位置写错了
写此文前也得到了一个陌生朋友的帮助（A 入门小白）
希望对你有帮助！