• 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

  • 相关阅读:
    ubuntu下android开发工作环境搭建
    ADB命令行控制界面开关
    chromium os系统编译与环境搭建
    完整代理的简单实现
    OC协议、代理的简单使用
    OC字典的使用
    OC数组的简单使用、NSArray
    OC中NSString的使用、字符串的使用
    OC内存管理、非ARC机制、MRR机制
    OC中重写set和get方法、懒加载
  • 原文地址:https://www.cnblogs.com/ives/p/5481633.html
Copyright © 2020-2023  润新知