社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > 分享一篇JavaScript事件的实例代码

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

零下一度
发布： 2017-06-27 09:39:41
原创
1252 人浏览过
<!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中文网其他相关文章！

相关标签：
javascript js 事件 案例
来源：php.cn
上一篇：JavaScript事件方法实例详解 下一篇：JavaScript入门实例源码案例
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
仅 CSS 方法可在单击时动态修改图像 src，无需使用 JavaScript 我需要仅使用css更改鼠标单击时图像的src喜欢img:active{}
来自于 2024-04-06 19:25:49
0
1
505
放大 d3.js 时散点图点不会保持值 这是我第一次使用d3.js，所以请耐心等待。我在vue.js文件中将其作为纯JavaScript实现。我正在尝试制作具有缩放功能的散点图。到目前为止，我几乎一切正常，但当我缩放时，...
来自于 2024-04-06 18:16:26
0
1
403
供应商特定伪元素上的 JavaScript 悬停事件 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
来自于 2024-04-06 15:35:24
0
1
274
使用 Javascript / Jquery 提交表单且不带按钮 我试图通过调用JavaScript函数并使用JQUERY/PHP执行表单来提交没有按钮的表单。我希望表单在后端静默执行，而无需重新加载页面。不幸的是，它不断返回JavaScript...
来自于 2024-04-06 14:54:03
0
2
421
使用'折叠显示”类自定义 Bootstrap 手风琴标题的外观 我想设置具有类collapseshow的面板的卡标题样式。在此示例中，它是第一个面板。我尝试使用CSS来使用.accordion.card.card-headerbutton.bt...
来自于 2024-04-06 12:53:11
0
1
376
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板