更多事件处理（实用）_前端use your mouse to click and double click the red-CSDN博客

本文链接：https://blog.csdn.net/zsf0615020117/article/details/4498687

<html>
    <head>
        <title>Mouse Events Example</title>
        <script type="text/javascript" src="detect.js"></script>
        <script type="text/javascript" src="eventutil.js"></script>
        <script type="text/javascript">

            EventUtil.addEventHandler(window, "load", function () {
                var oDiv = document.getElementById("div1");

                EventUtil.addEventHandler(oDiv, "mouseover", handleEvent);
                EventUtil.addEventHandler(oDiv, "mouseout", handleEvent);
               EventUtil.addEventHandler(oDiv, "mousedown", handleEvent);
                EventUtil.addEventHandler(oDiv, "mouseup", handleEvent);
                EventUtil.addEventHandler(oDiv, "click", handleEvent);
                EventUtil.addEventHandler(oDiv, "dblclick", handleEvent);

            });

            function handleEvent() {
                var oEvent = EventUtil.getEvent();

                var oTextbox = document.getElementById("txt1");
                oTextbox.value += "/n>" + oEvent.type;
                oTextbox.value += "/n    target is " + oEvent.target.tagName;
                if (oEvent.relatedTarget) {
                    oTextbox.value += "/n    relatedTarget is " + oEvent.relatedTarget.tagName;
                }
            }

        </script>
    </head>
    <body>

        <p>Use your mouse to click and double click the red square.</p>
        <div style="width: 100px; height: 100px; background-color: red" id="div1"></div>
        <p><textarea id="txt1" rows="15" cols="50"></textarea></p>
    </body>
</html>
--------------------------------说明-----------------------------

上面的红色字体表示要产生事件的某个对象

紫色部分表示事件产生以后要做的相应的处理

粉色部分表示从外界引入两个JS文件（这两个JS文件在我的163的邮箱里面的C盘中，它们跟页面时处于同一个位置）