欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-07 11:41:58
...
<!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?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("提交内容" + $('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?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("提交内容" + $('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?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('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?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('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?1.1.11" 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?1.1.11" 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>

  

以上就是分享一篇JavaScript事件的实例代码的详细内容,更多请关注其它相关文章!