事件处理程序其实是元素对象的属性 …. 发生某些事件的时候，会去执行相应的处理程序 …. 上一个视频我们介绍了查看这些事件属性名称的方法 …

先打开网页嵌入的脚本文件 ... 在这个文件里，首先我们可以去获取到想要添加事件处理程序的元素 …

var btn = document.querySelector('.btn');

因为这个文档里面只有一个 .btn 类的元素，所以，找到的结果应该就是这个按钮 .. 然后给它起了个名字，叫做 btn … 下面我们再去设置一下这个对象的相应的事件处理属性 …

先设置一下它的 onclick 这个属性 …

btn.onclick = function () { console.log('被点击了！'); };

这个属性的值是一个函数 …我们用了一个匿名函数。这个函数要做的事，就是在控制台上输出 被点击了 这几个字儿 …

用类似的方法， 我们再设置一下 onmouseover 还有 onmouseout 这两个属性 …

btn.onmouseover = function () { console.log('谁在上面？'); };
btn.onmouseout = function () { console.log('离开了！'); };

保存一下 … 回到浏览器 … 把鼠标放在这个按钮上 … 在控制台上会显示 谁在上面 … 点击这个按钮 … 会显示 被点击了 … 鼠标离开的时候 … 会显示 离开了 …

你可以使用类似的方法，去设置这个元素对象的其它的事件处理器来处理其它的事件 …

window onload

window 这个对象有个比较常用的 load 事件 … 文档里面的所有的资源都准备好以后会触发这个 load 事件 … 也就是 文档里的文字，图片已经都显示了，使用的样式表和脚本文件也已经下载好了 … 这个时候会触发 window 对象的 load 事件 …

一般我们会让应用的代码在这个事件发生以后才去执行 … 这样能保证这些程序的代码可以正常的执行 …

输入 window.onload …. 使用 window 对象的 onload 这个事件处理程序 … 它会在 window 对象发生 load 事件的时候去执行 …

window.onload = function () {}

然后把刚才添加的那些程序代码放在这里面 ….

这样，当文档准备好以后，触发了 window 对象的 load 事件的时候，才会去执行这些代码 …

在下面的视频里，我们可以再去使用绑定事件的方法去处理一下这几个事件 …