搜索

首页 >web前端 >js教程 >分享一篇JavaScript事件的实例代码

分享一篇JavaScript事件的实例代码

零下一度
零下一度原创
2017-06-27 09:39:411265浏览
<!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(&#39;onload&#39;);
        }

        window.onfocus = function () {
            alert(&#39;onfocus&#39;);
        }

        window.onblur = function () {
            alert(&#39;onblur&#39;);
        }

        window.onscroll = function () {
            alert(&#39;onscroll&#39;);
        }

        window.onresize = function () {
            alert(&#39;onresize&#39;);
        }
        */
    </script>
    <script type="text/javascript">
        var msg = "";
        var myAlert = function () {
            msg += " Click Event End\n";
            alert(msg);
        }
    </script>
</head>
<body 
onclick="javascript:msg+=&#39;-->Body Event&#39;;myAlert();">
    <table border="1" 
    onclick="javascript:msg+=&#39;-->Table Event&#39;;myAlert();event.cancelBubble=true;">
    <tr 
    onclick="javascript:msg+=&#39;-->TR Event&#39;;myAlert();">
        <td 
        onclick="javascript:msg+=&#39;-->TD Event&#39;;myAlert();">
            我是单元格
            <p 
            onclick="javascript:msg+=&#39;-->P Event&#39;;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?1.1.11" 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("提交内容" + $(&#39;MyButton&#39;).value);
        }
    </script>
</head>
<body>
<input type="text" id="txt" size="15"/>
<input type="button" value="加长" onclick="changeSize(&#39;txt&#39;,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(&#39;myButton onclick&#39;);
    };
    */
    //$("myButton").onclick = onclickEvent;

    /*
    $("myButton").addEventListener(&#39;click&#39;
    , function () {
        alert("first click Event");
    }, false);

    $("myButton").addEventListener(&#39;click&#39;
    , function () {
        alert("second click Event");
    }, false);

    $("myButton").addEventListener(&#39;click&#39;
    , function () {
        alert("third click Event");
    }, false);
    */

    EventUtil.addHandler(
    $("myButton")
    ,&#39;click&#39;
    , function () {
        alert("I am compatible1 click Event");
    });

    EventUtil.addHandler(
    $("myButton")
    , &#39;click&#39;
    , 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?1.1.11" 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("提交内容" + $(&#39;MyButton&#39;).value);
        }
    </script>
</head>
<body>
<input type="text" id="txt" size="15"/>
<input type="button" value="加长" onclick="changeSize(&#39;txt&#39;,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(&#39;myButton onclick&#39;);
    };
    */
    //$("myButton").onclick = onclickEvent;

    /*
    $("myButton").addEventListener(&#39;click&#39;
    , function () {
        alert("first click Event");
    }, false);

    $("myButton").addEventListener(&#39;click&#39;
    , function () {
        alert("second click Event");
    }, false);

    $("myButton").addEventListener(&#39;click&#39;
    , function () {
        alert("third click Event");
    }, false);
    */

    EventUtil.addHandler(
    $("myButton")
    ,&#39;click&#39;
    , function () {
        alert("I am compatible1 click Event");
    });

    EventUtil.addHandler(
    $("myButton")
    , &#39;click&#39;
    , 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
    $(&#39;div1&#39;).onmouseover = function () {
        $(&#39;div1&#39;).className = &#39;blueStar&#39;;
    };

    $(&#39;div1&#39;).onmouseout = function () {
        $(&#39;div1&#39;).className = &#39;whiteStar&#39;;
    };

    //星星2
    $(&#39;div2&#39;).onmouseover = function () {
        $(&#39;div1&#39;).className = &#39;blueStar&#39;;
        $(&#39;div2&#39;).className = &#39;blueStar&#39;;
    };

    $(&#39;div2&#39;).onmouseout = function () {
        $(&#39;div1&#39;).className = &#39;whiteStar&#39;;
        $(&#39;div2&#39;).className = &#39;whiteStar&#39;;
    };

    //星星3
    $(&#39;div3&#39;).onmouseover = function () {
        $(&#39;div1&#39;).className = &#39;blueStar&#39;;
        $(&#39;div2&#39;).className = &#39;blueStar&#39;;
        $(&#39;div3&#39;).className = &#39;blueStar&#39;;
    };

    $(&#39;div3&#39;).onmouseout = function () {
        $(&#39;div1&#39;).className = &#39;whiteStar&#39;;
        $(&#39;div2&#39;).className = &#39;whiteStar&#39;;
        $(&#39;div3&#39;).className = &#39;whiteStar&#39;;
    };

    //星星4
    $(&#39;div4&#39;).onmouseover = function () {
        $(&#39;div1&#39;).className = &#39;blueStar&#39;;
        $(&#39;div2&#39;).className = &#39;blueStar&#39;;
        $(&#39;div3&#39;).className = &#39;blueStar&#39;;
        $(&#39;div4&#39;).className = &#39;blueStar&#39;;
    };

    $(&#39;div4&#39;).onmouseout = function () {
        $(&#39;div1&#39;).className = &#39;whiteStar&#39;;
        $(&#39;div2&#39;).className = &#39;whiteStar&#39;;
        $(&#39;div3&#39;).className = &#39;whiteStar&#39;;
        $(&#39;div4&#39;).className = &#39;whiteStar&#39;;
    };

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

    $(&#39;div5&#39;).onmouseout = function () {
        $(&#39;div1&#39;).className = &#39;whiteStar&#39;;
        $(&#39;div2&#39;).className = &#39;whiteStar&#39;;
        $(&#39;div3&#39;).className = &#39;whiteStar&#39;;
        $(&#39;div4&#39;).className = &#39;whiteStar&#39;;
        $(&#39;div5&#39;).className = &#39;whiteStar&#39;;
    };

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

　　

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

　　

<!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?1.1.11" 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(&#39;btn1&#39;);
            EventUtil.addHandler(oBtn1, &#39;click&#39;,
            function () {
                alert(oBtn1.value)
            });

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

        var myClass = {
            name: &#39;Nick.Chung&#39;,
            name1: function () {
                return &#39;Nick.Chung&#39;;
            },
            action: function () {
                alert(&#39;eating...&#39;);
            }
        };
    </script>
</head>
<body>
<input type="text" id="btn1" value="button1" />
<input type="button" id="btn1" value="button1" 
onclick = "doClick(&#39;btn1&#39;)"/>
<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?1.1.11" type="text/javascript"></script>
    <script type="text/javascript">
        //当HTML文档内容加载完成
        window.onload = function () {
            //获取按钮对象
            var oBtn =
            document.getElementById(&#39;btn&#39;);

            //获取复选框对象
            var oChk =
            document.getElementById(&#39;chk&#39;);

            //为复选框添加单击事件
            EventUtil.addHandler(oChk, &#39;click&#39;,
            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?1.1.11" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function () {
            var oBtn1 = document.getElementById(&#39;btn1&#39;);
            var oBtn2 = document.getElementById(&#39;btn2&#39;);
            var oBtn3 = document.getElementById(&#39;btn3&#39;);
            var oBtn4 = document.getElementById(&#39;btn4&#39;);
            var oBtn5 = document.getElementById(&#39;btn5&#39;);

            EventUtil.addHandler(
            oBtn1,
            &#39;click&#39;,
            function () {
                var o = EventUtil.getEvent().srcElement;
                alert(o.value);
            });

            EventUtil.addHandler(
            oBtn2,
            &#39;click&#39;,
            function () {
                var o = EventUtil.getEvent().srcElement;
                alert(o.value);
            });

            EventUtil.addHandler(
            oBtn3,
            &#39;click&#39;,
            function () {
                var o = EventUtil.getEvent().srcElement;
                alert(o.value);
            });

            EventUtil.addHandler(
            oBtn4,
            &#39;click&#39;,
            function () {
                var o = EventUtil.getEvent().srcElement;
                alert(o.value);
            });

            EventUtil.addHandler(
            oBtn5,
            &#39;click&#39;,
            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>

　　

以上是分享一篇JavaScript事件的实例代码的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：JavaScript事件方法实例详解下一篇：JavaScript入门实例源码案例

相关文章

查看更多