JavaScript事件案例

首页 > 代码库 > JavaScript事件案例

2024-10-12 10:44:01 216人阅读

<!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="http://www.mamicode.com/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="http://www.mamicode.com/加长" onclick="changeSize(‘txt‘,30,this);"/>

<center>
<br>
<p>单击“事件测试”按钮，通过匿名函数处理事件</p>
<form name="myForm" id="myForm">
  <input type="button" name="myButton" id="myButton" value="http://www.mamicode.com/事件测试">
</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="http://www.mamicode.com/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="http://www.mamicode.com/加长" onclick="changeSize(‘txt‘,30,this);"/>

<center>
<br>
<p>单击“事件测试”按钮，通过匿名函数处理事件</p>
<form name="myForm" id="myForm">
  <input type="button" name="myButton" id="myButton" value="http://www.mamicode.com/事件测试">
</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="http://www.mamicode.com/Scripts/EventUtil.js" type="text/javascript"></script>
    <script src="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/button1" />
<input type="button" id="btn1" value="http://www.mamicode.com/button1" 
onclick = "doClick(‘btn1‘)"/>
<input type="button" id="btn3" value="http://www.mamicode.com/button3" />
<input type="button" id="btn4" value="http://www.mamicode.com/button4" />
<input type="button" id="btn5" value="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/我是按钮"/>
</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="http://www.mamicode.com/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="http://www.mamicode.com/button1" />
<input type="button" id="btn2" value="http://www.mamicode.com/button2" />
<input type="button" id="btn3" value="http://www.mamicode.com/button3" />
<input type="button" id="btn4" value="http://www.mamicode.com/button4" />
<input type="button" id="btn5" value="http://www.mamicode.com/button5" />
</body>
</html>

JavaScript事件案例

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > JavaScript事件案例

JavaScript事件案例

看完仍有疑问？有类似问题直接问程序猿