Detailed explanation of how javascript creates event definition examples-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed explanation of how javascript creates event definition examples

Jul 22, 2017 pm 04:13 PM

javascript js definition

Common definition method

&lt;input type=&quot;button&quot; name=&quot;Button&quot; value=&quot;确定&quot; 
onclick=&quot;Sfont=prompt(&#39;请在文本框中输入红色&#39;,&#39;红色&#39;,&#39; 提示框 &#39;);
if(Sfont==&#39;红色&#39;){
　　　　form1.style.fontFamily=&#39;黑体&#39;;
　　　　form1.style.color=&#39;red&#39;;
}&quot;
/&gt;

Copy after login

This is the most common definition method, directly defining the JS event on the required object . The relevant transformation is the form of calling the method, as follows

&lt;script&gt;
  function show()
    {
      alert(&quot;show&quot;);
    }
&lt;/script&gt;
&lt;input type=&quot;button&quot; name=&quot;show&quot; onclick=&quot;show()&quot;/&gt;

Copy after login

The second one

&lt;script type=&quot;text/javascript&quot; for=&quot;window&quot; event=&quot;onload&quot;&gt;
  alert(&quot;Welcome!&quot;);
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; for=&quot;window&quot; event=&quot;onunload&quot;&gt;
  alert(&quot;Thanks!&quot;);
&lt;/script&gt;

Copy after login

Here defines the operations that occur when loading and unloading windows.

If it is an event for other objects, you only need to modify the value of the for attribute to the object name and event to the monitored event. As follows:

&lt;script type=&quot;text/javascript&quot; for=&quot;test&quot; event=&quot;onclick&quot;&gt;
alert(&quot;button!&quot;);
&lt;/script&gt;

Copy after login

The third type:

&lt;input type=&quot;button&quot; name=&quot;test&quot; value=&quot;test&quot;/&gt;
&lt;script&gt;
function te()
{
  alert(&quot;test&quot;);
}
test.onclick=te;
&lt;/script&gt;

Copy after login

Here we use the registration form , register the method to the specified event of the specified object. Called using the object name.

The complete test code is as follows:

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;无标题文档&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;script type=&quot;text/javascript&quot; for=&quot;window&quot; event=&quot;onload&quot;&gt;
alert(&quot;Welcome!&quot;);
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; for=&quot;window&quot; event=&quot;onunload&quot;&gt;
alert(&quot;Thanks!&quot;);
&lt;/script&gt;
&lt;form name=&quot;form1&quot; method=&quot;post&quot; action=&quot;&quot;&gt;
JS很好学
&lt;/form&gt;
&lt;formn ame=&quot;form2&quot; method=&quot;post&quot; action=&quot;&quot;&gt;
&lt;input type=&quot;button&quot; name=&quot;Button&quot; value=&quot;确定&quot; onclick=&quot;Sfont=prompt(&#39;请在文本框中输入红色&#39;,&#39;红色&#39;,&#39; 提示框 &#39;);if(Sfont==&#39;红色&#39;){form1.style.fontFamily=&#39;黑体&#39;;form1.style.color=&#39;red&#39;;}&quot;/&gt;
&lt;input type=&quot;button&quot; name=&quot;test&quot; value=&quot;test&quot;/&gt;
&lt;script&gt;
function te()
{
alert(&quot;test&quot;);
}
test.onclick=te;
&lt;/script&gt;

&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

The above is the detailed content of Detailed explanation of how javascript creates event definition examples. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn