JavaScript事件案例

cyyly 
<!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>
    <title></title>
    <script type="text/javascript">
    /*
        window.onload = function () {
            alert(\'onload\');
        }

        window.onfocus = function () {
            alert(\'onfocus\');
        }

        window.onblur = function () {
            alert(\'onblur\');
        }

        window.onscroll = function () {
            alert(\'onscroll\');
        }

        window.onresize = function () {
            alert(\'onresize\');
        }
        */
    </script>
    <script type="text/javascript">
        var msg = "";
        var myAlert = function () {
            msg += " Click Event End\n";
            alert(msg);
        }
    </script>
</head>
<body 
onclick="javascript:msg+=\'-->Body Event\';myAlert();">
    <table border="1" 
    onclick="javascript:msg+=\'-->Table Event\';myAlert();event.cancelBubble=true;">
    <tr 
    onclick="javascript:msg+=\'-->TR Event\';myAlert();">
        <td 
        onclick="javascript:msg+=\'-->TD Event\';myAlert();">
            我是单元格
            <p 
            onclick="javascript:msg+=\'-->P Event\';myAlert();">
                我是段落
            </p>
        </td>
    </tr>
    </table>
</body>
</html>

　　

<!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>
    <title></title>
    <script src="Scripts/EventUtil.js" type="text/javascript"></script>
    <script type="text/javascript">
        var $ = function (id) {
            return document.getElementById(id);
        }

        var changeSize = function (id, size, obj) {
            var inp = $(id);
            obj.value += size;
            inp.size += size;
        }

        var onclickEvent = function () {
            alert("提交内容" + $(\'MyButton\').value);
        }
    </script>
</head>
<body>
<input type="text" id="txt" size="15"/>
<input type="button" value="加长" onclick="changeSize(\'txt\',30,this);"/>

<center>
<br>
<p>单击“事件测试”按钮，通过匿名函数处理事件</p>
<form name="myForm" id="myForm">
  <input type="button" name="myButton" id="myButton" value="事件测试">
</form>
<script type="text/javascript">
    /*
    $("myButton").onclick = function () {
        alert(\'myButton onclick\');
    };
    */
    //$("myButton").onclick = onclickEvent;

    /*
    $("myButton").addEventListener(\'click\'
    , function () {
        alert("first click Event");
    }, false);

    $("myButton").addEventListener(\'click\'
    , function () {
        alert("second click Event");
    }, false);

    $("myButton").addEventListener(\'click\'
    , function () {
        alert("third click Event");
    }, false);
    */

    EventUtil.addHandler(
    $("myButton")
    ,\'click\'
    , function () {
        alert("I am compatible1 click Event");
    });

    EventUtil.addHandler(
    $("myButton")
    , \'click\'
    , function () {
        alert("I am compatible2 click Event");
    });
</script>
</center>

</body>
</html>

　　

<!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>
    <title></title>
    <script src="Scripts/EventUtil.js" type="text/javascript"></script>
    <script type="text/javascript">
        var $ = function (id) {
            return document.getElementById(id);
        }

        var changeSize = function (id, size, obj) {
            var inp = $(id);
            obj.value += size;
            inp.size += size;
        }

        var onclickEvent = function () {
            alert("提交内容" + $(\'MyButton\').value);
        }
    </script>
</head>
<body>
<input type="text" id="txt" size="15"/>
<input type="button" value="加长" onclick="changeSize(\'txt\',30,this);"/>

<center>
<br>
<p>单击“事件测试”按钮，通过匿名函数处理事件</p>
<form name="myForm" id="myForm">
  <input type="button" name="myButton" id="myButton" value="事件测试">
</form>
<script type="text/javascript">
    /*
    $("myButton").onclick = function () {
        alert(\'myButton onclick\');
    };
    */
    //$("myButton").onclick = onclickEvent;

    /*
    $("myButton").addEventListener(\'click\'
    , function () {
        alert("first click Event");
    }, false);

    $("myButton").addEventListener(\'click\'
    , function () {
        alert("second click Event");
    }, false);

    $("myButton").addEventListener(\'click\'
    , function () {
        alert("third click Event");
    }, false);
    */

    EventUtil.addHandler(
    $("myButton")
    ,\'click\'
    , function () {
        alert("I am compatible1 click Event");
    });

    EventUtil.addHandler(
    $("myButton")
    , \'click\'
    , function () {
        alert("I am compatible2 click Event");
    });
</script>
</center>

</body>
</html>

　　

<!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>
    <title></title>
    <style type="text/css">
     .whiteStar  
     {
         float:left;
         width:64px;
         height:64px;
         background-image:url(/Images/starwhite.png)
     }
     .blueStar  
     {
         float:left;
         width:64px;
         height:64px;
         background-image:url(/Images/starblue.png)
     }
    </style>
    <script type="text/javascript">
        var $ = function (id) {
            return document.getElementById(id);
        }
    </script>
</head>
<body>
<div id="div1" class="whiteStar"></div>
<div id="div2" class="whiteStar"></div>
<div id="div3" class="whiteStar"></div>
<div id="div4" class="whiteStar"></div>
<div id="div5" class="whiteStar"></div>


<script type="text/javascript">
    //星星1
    $(\'div1\').onmouseover = function () {
        $(\'div1\').className = \'blueStar\';
    };

    $(\'div1\').onmouseout = function () {
        $(\'div1\').className = \'whiteStar\';
    };

    //星星2
    $(\'div2\').onmouseover = function () {
        $(\'div1\').className = \'blueStar\';
        $(\'div2\').className = \'blueStar\';
    };

    $(\'div2\').onmouseout = function () {
        $(\'div1\').className = \'whiteStar\';
        $(\'div2\').className = \'whiteStar\';
    };

    //星星3
    $(\'div3\').onmouseover = function () {
        $(\'div1\').className = \'blueStar\';
        $(\'div2\').className = \'blueStar\';
        $(\'div3\').className = \'blueStar\';
    };

    $(\'div3\').onmouseout = function () {
        $(\'div1\').className = \'whiteStar\';
        $(\'div2\').className = \'whiteStar\';
        $(\'div3\').className = \'whiteStar\';
    };

    //星星4
    $(\'div4\').onmouseover = function () {
        $(\'div1\').className = \'blueStar\';
        $(\'div2\').className = \'blueStar\';
        $(\'div3\').className = \'blueStar\';
        $(\'div4\').className = \'blueStar\';
    };

    $(\'div4\').onmouseout = function () {
        $(\'div1\').className = \'whiteStar\';
        $(\'div2\').className = \'whiteStar\';
        $(\'div3\').className = \'whiteStar\';
        $(\'div4\').className = \'whiteStar\';
    };

    //星星5
    $(\'div5\').onmouseover = function () {
        $(\'div1\').className = \'blueStar\';
        $(\'div2\').className = \'blueStar\';
        $(\'div3\').className = \'blueStar\';
        $(\'div4\').className = \'blueStar\';
        $(\'div5\').className = \'blueStar\';
    };

    $(\'div5\').onmouseout = function () {
        $(\'div1\').className = \'whiteStar\';
        $(\'div2\').className = \'whiteStar\';
        $(\'div3\').className = \'whiteStar\';
        $(\'div4\').className = \'whiteStar\';
        $(\'div5\').className = \'whiteStar\';
    };

</script>
</body>
</html>

　　

<!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>
    <title></title>
    <script src="Scripts/EventUtil.js" type="text/javascript"></script>
    <script src="Scripts/KeyCodeList.js" type="text/javascript"></script>
</head>
<body>
    <input type="text" id="txt" />
    <script type="text/javascript">
        var objTxt = document.getElementById(\'txt\');
        EventUtil.addHandler(objTxt, \'keypress\', function () {
            var event = EventUtil.getEvent();
            alert(keyCodeList[event.keyCode]);
        });
    </script>
</body>
</html>

　　

var keyCodeList = {
    65: \'A\',
    66: \'B\',
    67: \'C\',
    68: \'D\',
    69: \'E\',
    70: \'F\',
    71: \'G\',
    72: \'H\',
    73: \'I\'
    //...  
}

　　

<!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>
    <title></title>
    <script src="Scripts/EventUtil.js" type="text/javascript"></script>
    <script type="text/javascript">
        var doClick = function (id) {
            var btn = document.getElementById(id);
            alert(btn.value);
        }

        window.onload = function () {
            var oBtn1 = document.getElementById(\'btn1\');
            EventUtil.addHandler(oBtn1, \'click\',
            function () {
                alert(oBtn1.value)
            });

            //document.write(myClass.name);
            //document.write(myClass.name1());
            //myClass.action();
        }

        var myClass = {
            name: \'Nick.Chung\',
            name1: function () {
                return \'Nick.Chung\';
            },
            action: function () {
                alert(\'eating...\');
            }
        };
    </script>
</head>
<body>
<input type="text" id="btn1" value="button1" />
<input type="button" id="btn1" value="button1" 
onclick = "doClick(\'btn1\')"/>
<input type="button" id="btn3" value="button3" />
<input type="button" id="btn4" value="button4" />
<input type="button" id="btn5" value="button5" />
</body>
</html>

　　

<!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>
    <title></title>
    <!--引入兼容事件类-->
    <script src="Scripts/EventUtil.js" type="text/javascript"></script>
    <script type="text/javascript">
        //当HTML文档内容加载完成
        window.onload = function () {
            //获取按钮对象
            var oBtn =
            document.getElementById(\'btn\');

            //获取复选框对象
            var oChk =
            document.getElementById(\'chk\');

            //为复选框添加单击事件
            EventUtil.addHandler(oChk, \'click\',
            function () {
                
                //如果复选框选中了
                if (oChk.checked) {
                    //禁用按钮
                    oBtn.disabled = true;
                }
                else {
                    //没选中则启动按钮
                    oBtn.disabled = false;
                }
            })


        }
    </script>
</head>
<body>
<input type="checkbox" id="chk" />禁用按钮
<br />
<br />
<input type="button" id="btn" 
disabled="disabled" value="我是按钮"/>
</body>
</html>

　　

<!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>
    <title></title>
    <script src="Scripts/EventUtil.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function () {
            var oBtn1 = document.getElementById(\'btn1\');
            var oBtn2 = document.getElementById(\'btn2\');
            var oBtn3 = document.getElementById(\'btn3\');
            var oBtn4 = document.getElementById(\'btn4\');
            var oBtn5 = document.getElementById(\'btn5\');

            EventUtil.addHandler(
            oBtn1,
            \'click\',
            function () {
                var o = EventUtil.getEvent().srcElement;
                alert(o.value);
            });

            EventUtil.addHandler(
            oBtn2,
            \'click\',
            function () {
                var o = EventUtil.getEvent().srcElement;
                alert(o.value);
            });

            EventUtil.addHandler(
            oBtn3,
            \'click\',
            function () {
                var o = EventUtil.getEvent().srcElement;
                alert(o.value);
            });

            EventUtil.addHandler(
            oBtn4,
            \'click\',
            function () {
                var o = EventUtil.getEvent().srcElement;
                alert(o.value);
            });

            EventUtil.addHandler(
            oBtn5,
            \'click\',
            function () {
                var o = EventUtil.getEvent().srcElement;
                alert(o.value);
            });
        }
    </script>
</head>
<body>
<input type="button" id="btn1" value="button1" />
<input type="button" id="btn2" value="button2" />
<input type="button" id="btn3" value="button3" />
<input type="button" id="btn4" value="button4" />
<input type="button" id="btn5" value="button5" />
</body>
</html>

　　

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode