Home > Article > Web Front-end > Detailed explanation of how javascript creates event definition examples

Detailed explanation of how javascript creates event definition examples

伊谢尔伦Original: 2017-07-22 16:13:381205browse

Common definition method

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

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

<script>
  function show()
    {
      alert("show");
    }
</script>
<input type="button" name="show" onclick="show()"/>

The second one

<script type="text/javascript" for="window" event="onload">
  alert("Welcome!");
</script>
<script type="text/javascript" for="window" event="onunload">
  alert("Thanks!");
</script>

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:

<script type="text/javascript" for="test" event="onclick">
alert("button!");
</script>

The third type:

<input type="button" name="test" value="test"/>
<script>
function te()
{
  alert("test");
}
test.onclick=te;
</script>

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:

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

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

</form>
</body>
</html>

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：

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

Previous article：Detailed explanation of how to use event attributes to bind event functions in javascriptNext article：Detailed explanation of how to use event attributes to bind event functions in javascript

See more

Detailed explanation of how javascript creates event definition examples

Related articles