JavaScript——异步编码

举报
yd_221104950 发表于 2020/12/03 01:29:28 2020/12/03
2.3k+ 0 0
【摘要】 以响应事件的方式组织代码是另一种代码编写方式。要以这种方式编写代码,需要考虑可能发生的事件和代码应如何响应这些事件。通常响应事件式的编码就是异步编码。 网页加载完成后执行的动作,我们可以把动作写在一个函数里,然后把函数赋给window对象的onload属性。 window.onload = init; function init(){ alert("What do...

以响应事件的方式组织代码是另一种代码编写方式。要以这种方式编写代码,需要考虑可能发生的事件和代码应如何响应这些事件。通常响应事件式的编码就是异步编码。

网页加载完成后执行的动作,我们可以把动作写在一个函数里,然后把函数赋给window对象的onload属性。

window.onload = init;
function init(){
	alert("What do you want for me");
}

  
 

注意:此时函数定义的位置无关紧要,因为网页加载完后,一切都准备好了,不存在找不到函数的问题。

事件对象的工作原理

单击事件处理程序被调用时,将向处理程序传递一个事件对象。事实上,大多数文档对象模型(DOM)事件发生时,都会向相应的处理程序传递一个事件对象。事件对象包含一些有关事件的常规信息,如事件是哪个元素触发的和事件是何时发生的。另外,你还
可以获得事件特有的信息,如用户单击鼠标时,单击位置的坐标。一个事件对象里大概能获得哪些信息:
target:元素对象
type:事件类型,如click、load
clientX:点击位置的横坐标
clientY:点击位置的纵坐标
timeStamp:事件发生的时间

给出一个例子展示这些特点:

<!doctype html>
<html lang="en"> <head> <meta charset="utf-8"> <title>My First JavaScript</title> </head> <body> <script> window.onload = init; function hello(eventObj){ //获取元素对象 var d = eventObj.target; d.innerHTML = "Every dog has its own day!"; //事件类型 alert(eventObj.type); //获取点击的坐标 alert(eventObj.clientX+" "+eventObj.clientY); //获取事件发生的时间 alert(eventObj.timeStamp); } function init(){ var d = document.getElementById("hel"); d.onclick = hello; } </script> <p id="hel">Hello , doooooooooo</p> </body>
</html> 
  
 

从上面可以看出我们将函数用作事件处理程序,因为它们让我们能够编写在事件发生时再执行的代码。编写用于处理事件的代码不同于从头到尾执行的代码。事件处理程序的运行时间和运行顺序都是不确定的,所以它们是异步的。

发生在DOM元素上的事件(DOM事件)将导致一个event对象被传递给事件处理程序。

另外,如果在短时间内发生很多事件,导致浏览器无法实时处理,那么这些事件将按发生的顺序存储到事件队列中,让浏览器能够依次调用每个事件的处理程序。

谢谢阅读。

文章来源: blog.csdn.net,作者:WongKyunban,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/weixin_40763897/article/details/88027156

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。