JavaScript事件处理详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Fanbin168/article/details/12583123

本文详细介绍了JavaScript中的各种事件处理机制，包括如何通过不同的事件监听器响应用户的交互行为，如鼠标和键盘事件。还展示了如何利用JavaScript操作DOM元素，实现表单验证等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<1>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function checkCookies() {
            if (navigator.cookieEnabled == true) {
                alert("已经启用cookie")
            }
            else {
                alert("未启用cookie");
            }
        }

        function myUpperCase() {
            var x = document.getElementById("tx");
            x.value = x.value.toUpperCase()
        }

        function myElementbyName() {
            //获取这里是表单的name属性
            var inputName = document.getElementsByName("textbox1");
            for (var i = 0; i < inputName.length; i++) {
                var name = inputName[i];
                alert(name.value);
            }
        }

        function myElementbyTagName() {
            //获取页面input表单
            var inputid = document.getElementsByTagName("input");
            //输出页面总共有多少input表单
            alert(inputid.length);
            for (var i = 0; i < inputid.length; i++) {
                var x = inputid[i];
                //输出各个表单的值
                alert(x.value);
            }
        }


        function bntEvent() {
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                var input = inputs[i];
                input.onclick = initEvent;
            }
        }

        function initEvent() {
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                var input = inputs[i];
                //  input==window.event.srcElement意思是取得引发事件的控件
                if (input == window.event.srcElement) {
                    input.value = "呜呜";
                }
                else {
                    input.value = "哈哈";
                }
            }
        }

        
    </script>

</head>
<!------------------------------------------------------------onbeforeunload-----------onLoad-------->

<!--onload 事件会在页面或图像加载完成后立即发生。浏览器是一边下载文档，一边解析执行，可能会出现JavaScript执行时需要的某个元素，而此时这个元素还没被加载，如果是这样，就把要操作的代码放到onload事件中，或把代码放到该元素之后--> 

<!--onbeforeunload事件会在网页准备关闭时触发，在事件中为window.event.returnValue赋值(赋值的内容就是要警告的消息)这样窗口在离开(前进，后退，关闭)就会弹出警告消息，主要用处是就在避免用户写文章，写了很长的是时候，又不小心点击了关闭网页，而文章又没保存的情况-->

<!--注意：只有body的onload事件才是整个页面的所有元素都加载完成。而某个元素本身的onload是元素自己加载完毕时触发-->
<body onload="bntEvent();checkCookies();alert('中国好')" onbeforeunload="window.event.returnValue='文章被会丢失'">

<!-------------------------------------------------------------------------------------->

<input type="button" value="onmouseOver 事件会在鼠标指针【移到】指定的对象上时发生" onmouseover ="alert('大家好')" /><br /><br />
<input type="button" value="onmouseOut 事件会在鼠标指针【移出】指定的对象时发生" onmouseout="alert('离开')"/><br /><br />

<input type="button" value="onmouseDown 事件会在鼠标按键被【按下】时发生"  onmousedown="alert('按下')" /><br /><br />
<input type="button" value="onmouseup 事件会在鼠标按键被【松开】时发生" onmouseup="alert('弹起')"  /> <br /><br />

<!------------------------------------------------------------------------------onfocus;onblur-------->

<input  type="button" value="onfocus 事件会在元素【获得】焦点时触发此事件"  onfocus="window.alert('获得焦点')" />
<input  type="button" value="onblur 事件会在元素【失去】焦点时触发此事件"  onblur="window.alert('失去焦点')" />
<!------------------------------------------------------------------------------onmouseMove-------->

<!--注释：每当用户把鼠标移动一个像素，就会发生一个 mousemove 事件。这会耗费系统资源去处理所有这些 mousemove 事件。因此请审慎地使用该事件--><br />
<input type="button" value ="onmouseMove 事件会在鼠标指针【移动】时发生" onmousemove="javascript:this.style.background='red'"  onmouseout="javascript:this.style.background='blue'"/>

<br />
<br />



<!------------------------------------------------------------------------------onChange-------->

<!--onchange 事件:"当前元素失去焦点并且元素的内容发生改变而触发此事件"常用于输入字段的验证。-->
<!--onchange 与onblur 好像效果都是一样的,因为onchange即便改变域的内容，也需要离开域才能触发  onblur是离开域就触发。不同点就是一个要改变内容，一个可以不改变内容。-->

<input type="text" name="textbox1" id="tx" onchange="myUpperCase()" />
<input type="text" name="textbox1" id="te2" />
<!------------------------------------------------------------------------------------------------->
<input type="submit" name="textbox1" id="tx3" onclick="myElementbyName()" />

<input type="button" value="inputClick" onclick="myElementbyTagName()" />
</body>
</html>

DOM 事件