事件简述

165 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第1天,点击查看活动详情

事件定义

事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。

JavaScript与HTML之间的交互是通过事件实现的。

对于Web应用来说,有下面这些代表性的事件:点击某个元素、将鼠标移动至某个 元素上方、按下键盘上某个键,等等。

由此,我们可以在事件对应的属性中设置一系列js代码,这样当事件被触发时,这些代码将会执行

小例子

<button id = "btn" onclick = "alert("你干嘛,哎呦~");">按钮</button>

这种写法我们称为结构和行为耦合,不方便推护,不推荐使用

为此我们一般使用下面方法,可以为按钮的对应事件指定处理函数的形式来响应事件,这样当事件被触发时,其对应的函数会被调用

<button id = "btn">按钮</button>
<script type = "text/JavaScript">
// 获取按钮对象
var btn = document.getElementById("btn");

// 绑定单击事件
btn.onclick = function(){
alert("你干嘛,哎呦~");
}

</script>

那么上面的函数为单击事件绑定的函数,我们成为单击响应函数,事件被触发的时候执行

文档的加载

<button id = "btn">按钮</button>
<script type = "text/JavaScript">
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("你干嘛~");
};
}

</script>

由之前知道,浏览器加载页面是从上到下,读取到一行就运行一行

onlaod事件在整个页面加载完成后会触发

该事件对应的响应函数将会在预加载完成之后执行

这样可以确保我们的代码执行时所有的D0M对象已经加载完毕了

对象的基本操作

对象的分类:

1.内建对象

由ES标准中定义的对象,在任何的ES的实现中都可以使用 比如,Math`` String`` Number`` Boolean`` Function`` Object

2,宿主对象

由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象 比如B0M,D0M

3.自定义对象

由开发人员自己创建的对象