肉渣教程

JS 事件

上一节 下一节

HTML事件就是发生在HTML元素上的事情。针对这些事件,可绑定相应的JavaScript代码。

HTML事件(event)

HTML事件(event)既可以是浏览器做了什么事情,也可以是指用户做了什么动作。举一些HTML事件的例子如下:

  • HTML页面加载完毕事件
  • HTML中input元素的值发生变化
  • HTML按钮被用户点击


当事件发生,如果想运行指定JavaScript代码,则可如下:

<element event='要运行的JavaScript语句'>


或者使用双引号,也是等效的:

<element event="要运行的JavaScript语句">


采用单引号和双引号都可以,但是使用单引号时,内部就别再使用单引号了;同理,使用双引号后,内部需要使用引号时,用单引号就可以了。

<button onclick="document.getElementById('demo').innerHTML = Date();">
当前时间是?
</button>

运行一下


this在事件绑定的JavaScript中,代表发生事件的HTML元素,如下所示,将按钮内容改变成当前时间:

<button onclick="this.innerHTML = Date();">
当前时间是?
</button>

运行一下


事件绑定的JS代码可以不只一句JS语句:

<button onclick="alert('神功盖世');alert('反清复明');alert('维护世界和平');">
点我来试试~
</button>

运行一下


把所有的语句都放在一起会显得太长,那就直接封装成一个函数,然后事件那里直接调用指定函数即可:

<script>
function work() {
    alert('神功盖世');
    alert('反清复明');
    alert('维护世界和平');
}
</script>

<button onclick="work();">点我来试试~</button>

运行一下

常用的HTML事件

下表列出常用的HTML事件:

事件 描述
onchange 当HTML元素发生改变
onclick 当HTML元素被点击
onmouseover 当用户使用鼠标移入HTML元素范围内
onmouseout 当用户使用鼠标从HTML元素范围内移出
onhover onmouseover和onmouseout的结合,当用户使用鼠标移入或移出指定HTML元素时
onkeydown 用户按下去某个按键时
onload 被浏览器加载完毕时

JS 事件

上一节 下一节