持续创作,加速成长!这是我参与「掘金日新计划 · 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.自定义对象
由开发人员自己创建的对象