{"id":371,"date":"2011-12-20T13:49:39","date_gmt":"2011-12-20T13:49:39","guid":{"rendered":"http:\/\/javascript-tutor.net\/index.php\/"},"modified":"2017-11-16T23:02:36","modified_gmt":"2017-11-16T23:02:36","slug":"lesson-16-events-javascript-part-2","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/","title":{"rendered":"JavaScript Lesson 16: The  onSelect Events and onChange Events"},"content":{"rendered":"<h4 align=\"center\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/\">&lt;Lesson 15&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-17-events-javascript-part-3\/\">&lt;Lesson 17&gt;<\/a><\/strong><\/h4>\n<h3><strong>16.1 The onChange Event<\/strong><\/h3>\n<p>The onChange event occurs when the users alter the input into form elements, such as a text box. In the following example, we shall show you how this event triggers a pop-up message when the user enters something into a textbox and alter its content.<\/p>\n<p>Click on\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example16.1.htm\">Example 16.1<\/a> to see the output.<\/p>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<p>When the user loads the web page that contains the script, a text box will appear at the top of the web page. When enters something into the textbox, alters it and then click outside the textbook, he will see a pop-up dialog then reads &#8220;You have changed the content&#8221;<\/p>\n<h3><strong>16.2 The onSelect Event<\/strong><\/h3>\n<p>The onSelect event occurs when the user selects text by dragging the mouse across a certain part of the text. We can write JavaScript code for this event. In Example 16.2, when the user types some characters into the text area and then select a part of the text, the selected will be shown to the user via a pop-up dialog.<\/p>\n<div class=\"codebg\">\n<h4><strong>Example 16.2<\/strong><\/h4>\n<p>&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text\/html; charset=windows-1252&#8243;&gt;<br \/>\n&lt;title&gt;JavaScript Example 16.1: onChange&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;script&gt;<\/p>\n<p>function SelText()<br \/>\n{<\/p>\n<p>yourtext = document.selection.createRange().text;<\/p>\n<p>window.alert(&#8220;You text you have selected is: &#8220;+yourtext );<br \/>\n}<\/p>\n<p>&lt;\/script&gt;<br \/>\n&lt;Form&gt;<br \/>\n&lt;textarea rows=&#8221;5&#8243; cols=&#8221;20&#8221; onSelect=(SelText(this.form))&gt;&lt;\/textarea&gt;<br \/>\n&lt;\/form&gt;<\/p>\n<p>&lt;\/body&gt;<\/p>\n<p>&lt;\/html&gt;<\/p>\n<\/div>\n<p>Please click on\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example16.2.htm\">Example 16.2<\/a> to test the output.<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h4 align=\"center\"><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/\">&lt;Lesson 15&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-17-events-javascript-part-3\/\">&lt;Lesson 17&gt;<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 15&gt; [Contents] &lt;Lesson 17&gt; 16.1 The onChange Event The onChange event occurs when the users alter the input into form elements, such as a text box. In the following example, we shall show you how this event triggers a pop-up message when the user enters something into a textbox and alter its content. Click &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 16: The  onSelect Events and onChange Events&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-371","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript events<\/title>\n<meta name=\"description\" content=\"This javascript lesson illustrates how to code that handle events in javascript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript events\" \/>\n<meta property=\"og:description\" content=\"This javascript lesson illustrates how to code that handle events in javascript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-16T23:02:36+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/\",\"url\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/\",\"name\":\"JavaScript events\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2011-12-20T13:49:39+00:00\",\"dateModified\":\"2017-11-16T23:02:36+00:00\",\"description\":\"This javascript lesson illustrates how to code that handle events in javascript\",\"breadcrumb\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 16: The onSelect Events and onChange Events\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript events","description":"This javascript lesson illustrates how to code that handle events in javascript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript events","og_description":"This javascript lesson illustrates how to code that handle events in javascript","og_url":"https:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-16T23:02:36+00:00","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/","url":"https:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/","name":"JavaScript events","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2011-12-20T13:49:39+00:00","dateModified":"2017-11-16T23:02:36+00:00","description":"This javascript lesson illustrates how to code that handle events in javascript","breadcrumb":{"@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-16-events-javascript-part-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 16: The onSelect Events and onChange Events"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=371"}],"version-history":[{"count":21,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/371\/revisions"}],"predecessor-version":[{"id":2495,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/371\/revisions\/2495"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}