Programming languages like C, C++ etc are all based on synchronous coding approach i.e. the execution takes place from top to bottom in a linear manner.
诸如C，C ++等编程语言均基于同步编码方法，即执行以线性方式从上到下进行。
But JavaScript follows a different approach, it is based on asynchronous coding. Instead of traversing from top to bottom it executes through event handling.
但是JavaScript采用不同的方法，它基于异步编码。 它不是通过上下移动而是通过事件处理执行。
Events occur and get stacked in browser processor if a handler is associated with it, it is called and executed.
如果处理程序与事件相关联，则会发生事件并将其堆积在浏览器处理器中，然后调用并执行该事件 。
JS has many inbuilt objects with loads of events. In this article, we are going to use one of them i.e. window object and its resize event.
JS有许多内置对象，其中包含大量事件。 在本文中，我们将使用其中之一，即窗口对象及其调整大小事件。
Example: HTML file with internal JS within script tags
示例：在脚本标签中带有内部JSHTML文件
<html lang="en">
<head>
<meta charset="utf-8">
<title>Don't resize me, I'm ticklish!</title>
<script>
function resize() {
var element = document.getElementById("display");
element.innerHTML = element.innerHTML + " that tickles!";
}
</script>
</head>
<body>
<p id="display">
Whatever you do, don't resize this window! I'm warning you!
</p>
<script>
window.onresize = resize;
</script>
</body>
</html>
HTML code is as usual. In the second script tag, I have used an inbuilt object of JS i.e. window that represents the interface of the browser in which you are running the above code. This window has many parameters, methods, events.
HTML代码照常。 在第二个脚本标签中，我使用了JS的内置对象，即window，它表示您在其中运行以上代码的浏览器的界面。 该窗口具有许多参数，方法，事件。
Here its onresize event is being used, whenever you will change the size of your browser's window this event will be generated and get added to browser's processor stack.
在这里，将使用它的onresize事件，只要您更改浏览器窗口的大小，就会生成该事件并将其添加到浏览器的处理器堆栈中。
After that in line number 18 itself, this event has been assigned a handler by the name of resize.
在第18行本身之后，该事件已通过resize名称分配给处理程序。
Remember:
记得：
If no handler is assigned to an event, it still gets added to processor stack but nothing happens in response to it.
如果没有为事件分配处理程序，则该事件仍会添加到处理器堆栈中，但对此没有任何React。
Also, note that resize is nothing but a function defined in the first script tag.
另外，请注意，调整大小不过是第一个脚本标记中定义的功能。
Caution:
警告：
You don’t need brackets in line number 18 after the function resize because you are not calling it, instead, we are just assigning it to an event as an event handler.
调整函数大小后，不需要在行号18中放置括号，因为您没有调用它，而是将其分配给事件作为事件处理程序。
Now, in line number 7, in resize function I have accessed paragraph element of HTML file through id of the paragraph element. via DOM ( DOCUMENT OBJECT MODEL ) created by the browser.
现在，在第7行中，在调整大小功能中，我已经通过段落元素的id访问HTML文件的段落元素。 通过浏览器创建的DOM(DOCUMENT OBJECT MODEL)。
Also, one should be aware that document ( in line number 8 ) is another inbuilt object in js that represents the DOM generated by the browser or in other words we can say that Javascript uses document object to get access to DOM created by the browser. Like any other inbuilt object, it too has many methods in it, one of them being getElementByID.
另外，应该知道文档(第8行)是js中的另一个内置对象，表示由浏览器生成的DOM，换句话说，我们可以说Javascript使用文档对象来访问由浏览器创建的DOM。 像其他任何内置对象一样，它也包含许多方法，其中之一就是getElementByID 。
getElementByID is seen very commonly in the source code of interactive web pages.
getElementByID在交互式网页的源代码中非常常见。
It takes an id as an argument and returns an OBJECT representing HTML tag with that id.
它以一个id作为参数，并返回一个表示具有该IDHTML标签的对象。
Now this DOM object comes with many useful methods giving loads of powers to developers.
现在，此DOM对象带有许多有用的方法，可为开发人员提供各种功能。
Its innerHTML gives access to the text inside that particular tag.
它的innerHTML可以访问该特定标记内的文本。
Hence, appending THAT TICKLES each time the function resize is called or to be more particular the event onresize occurs.
因此，每次调用函数调整大小时，或者更具体地讲，发生onresize事件时，都应添加该标题。
I hope this was a great insight into event handling in js and the most comprehensive explanation of the above-mentioned code.
我希望这对js中的事件处理有很好的了解，并且对上述代码有最全面的解释。
Event handling is a great asset of javascript which can be used to create heavily responsive and dynamic web pages.
事件处理是javascript的重要资产，可用于创建高度响应和动态的网页。
I will be covering many other kinds of events available in js in my upcoming articles so STAY TUNED and keep practicing.
我将在我即将发表的文章中介绍js中可用的许多其他类型的事件，所以请继续学习并继续练习。
翻译自: https://www.includehelp.com/code-snippets/interactive-webpages-event-handling-in-javascript.aspx
5920
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
