zoukankan      html  css  js  c++  java
  • JS创建事件的三种方式(实例)

    1.普通的定义方式

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


    这是最常见的一种定义方式,直接将JS事件定义在需要的对象之上。相关的变形就是调用方法的形式,如下

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

    第二种

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

    这里定义了加载窗口和卸载窗口时的发生的操作。
    如果是针对其他对象的事件,只需要修改for属性的值为对象名,event修改为监视的的事件。如下:

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

    第三种:

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

    这里我们使用注册的形式,将方法注册到指定对象的指定事件。使用对象名来调用。
    完整测试代码如下:

    <!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('请在文本框中输入红色','红色',' 提示框 ');if(Sfont=='红色'){form1.style.fontFamily='黑体';form1.style.color='red';}"/>
    <input type="button" name="test" value="test"/>
    <script>
    function te()
    {
    alert("test");
    }
    test.onclick=te;
    </script>
    
    </form>
    </body>
    </html>

    记录下来,巩固知识,同时方便他人。

    可以联系我进行交流,renhanlinbsl@163.com.

    2016.5.11

    13:52

  • 相关阅读:
    [转]WPF 4 媒体播放器(MediaElement)
    WPF简单的文件资源管理
    shell脚本自动化部署
    Linux知识
    单例模式及其四种实现方式
    支付宝对接步骤 (app)
    《异类》读书摘要(上)
    Linux初级指令
    项目构建基础统一结果,统一异常,统一日志
    git看这一篇就够用了
  • 原文地址:https://www.cnblogs.com/ives/p/5481633.html
Copyright © 2011-2022 走看看