用对象的事件处理程序处理发生的事件

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

国庆活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

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

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

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 事件的时候,才会去执行这些代码 …

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

用对象的事件处理程序处理发生的事件《 JavaScript 基础 》

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点