HTML事件

HTML事件呢,可以是浏览器做的什么,也可以是人为的什么。
 
这里有几个HTML事件的例子:

  • HTML页面加载完毕
  • HTML表单元素发生了改变
  • HTML按钮被点击

 
通常,当事件发生时,你可能想做点什么。
JavaScript可以让你在某个事件被监测到时执行代码。
HTML允许事件处理属性,加在HTML元素里。属性的值设置为Javascript代码。
 
单引号:

<element event='some JavaScript'>

 
双引号:

<element event="some JavaScript">

 
例如,按钮点击事件:

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

上面的例子中,点击事件发生时,ID为demo的容器里的内容显示为时间详情。
 
下面的例子中,点击事件发生时,按钮本身的文字变成了时间详情。

<button onclick="this.innerHTML = Date()">The time is?</button>

 
但是JavaScript呢,往往都很长。这个时候可以把代码写进函数里,然后在事件属性值那里调取函数。

<button onclick="displayDate()">The time is?</button>
事件语法

下面介绍了三种触发事件的方法:
 
在HTML中:

<element onclick="Javascript代码">

英语不好的同学,element是元素的意思,任意HTML元素,可以把上面的代码看成是:

<button onclick="Javascript代码">

 在Javascript文件中:

object.onclick = function(){
//Javascript代码
};

英语不好的同学,object是对象的意思,任意HTML对象,可以把上面的代码看成是:

a.onclick = function(){
//Javascript代码
};

在Javascript文件中,使用监听的方法

object.addEventListener("click", 
//Javascript代码
);

注意:addEventListener()方法不支持IE8及更早版本的浏览器。addEventListener()就是监听器的意思。这时,事件名称也是不带on的。例如,html元素里用onclick,监听时用click。
可以把上面的代码理解为:
在某个对象上添加监听器,当发生click点击事件时,监听器就会监测到某个元素上产生了点击事件。然后再执行Javascrit代码。
有jQuery基础的同学可以把上面的代码理解为:

$("a").on("click",function(){
//Javascript代码
});

 更多事件描述:请查看第14讲

本篇文章相关标签: