事件处理时,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 入门小白)
希望对你有帮助!

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值