JavaScript之DOM对象（Event事件）

比眉伴天荒 2023-03-13 05:20 147阅读 0赞

### 文章目录 ###

*   *   *   *  一、Event事件汇总
             *  二、用法案例
             *   *  1、serche搜索框
                 *  2、onload加载
                 *  3、事件绑定——标签内
                 *  4、事件绑定——JS接函数
                 *  5、onsubmit表单提交
                 *  6、事件传播

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。

#### 一、Event事件汇总 ####

*  onclick 当用户点击某个对象时调用的事件句柄。
 *  ondblclick 当用户双击某个对象时调用的事件句柄。  
      
    
 *  onfocus 元素获得焦点。
 *  onblur 元素失去焦点。  
      
    
 *  onchange 域的内容被改变。  
      
    
 *  onkeydown 某个键盘按键被按下。
 *  onkeypress 某个键盘按键被按下并松开。
 *  onkeyup 某个键盘按键被松开。  
      
    
 *  onload 一张页面或一幅图像完成加载。  
      
    
 *  onmousedown 鼠标按钮被按下。
 *  onmousemove 鼠标被移动。  
      
    
 *  onmouseout 鼠标从某元素移开。
 *  onmouseover 鼠标移到某元素之上。
 *  onmouseleave 鼠标从元素离开  
      
    
 *  onselect 文本被选中。
 *  onsubmit 确认按钮被点击。

#### 二、用法案例 ####

##### 1、serche搜索框 #####

*  用到的事件

onfocus 元素获得焦点。 //练习：输入框  
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.  
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

*  参考代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <input type="text" id="search" value="请输入用户名：" onfocus="func1()" onblur="func2()">
    
    <script>
        var ele= document.getElementById("search");  //获取标签
    
        function func1()
        { 
            if(ele.value=="请输入用户名：")
            { 
                ele.value="";  //得到焦点时就将值清空
            }
        }
    
        function func2()
        { 
            if(!ele.value.trim())  //或者ele.value.trim()==undefined,trim()表示去掉空格
            { 
                ele.value="请输入用户名：";  //失去焦点，即点击其他地方就将值变为初始状态
            }
    
        }
    </script>
    </body>
    </html>

![1][]

##### 2、onload加载 #####

*  用到的事件

onload 一张页面或一幅图像完成加载。  
onload 属性开发中 只给 body元素加；  
这个属性的触发 标志着页面内容被加载完成；  
应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性。

*  参考代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function func()
            { 
                var ele=document.getElementsByClassName("div1")[0];  //获取div1标签
                console.log(ele.innerHTML);
            }
        </script>
    </head>
    <body onload="func()">
    <div class="div1">I am DIV</div>
    
    </body>
    </html>

##### 3、事件绑定——标签内 #####

直接绑定在标签内

这里的this参数可以代表p标签本身，因此在对应的func函数中，可以用一个形参来代表整个p标签进行其他操作

function func(that)
        { 
            //此that就代表了p标签本身，也不需要重新获取了
            // console.log(that); //打印p标签本身
            console.log(that.previousElementSibling);  //打印p标签前面的兄弟（p标签前面的标签）
            console.log(that.parentNode);  //打印p标签的上级标签
        }

##### 4、事件绑定——JS接函数 #####

比如有这样一堆div标签：

先获取class名为div2的标签：

var ele=document.getElementsByClassName("div2");

然后因为原生JS不会去遍历获得的对象，所以如果获得了多个对象需要手动来遍历：

for(var i=0; i<ele.length; i++)
        { 
            //通过对象去绑定事件，来触发函数
            ele[i].onclick=function()
            { 
                alert("哈哈哈");
            }
        }

当然如果觉得遍历起来麻烦，也可以直接获取全部div标签（需要准确定位时此法不推荐），就不需要手动遍历了，一个下标就代表了一群标签：

var ele=document.getElementsByTagName("div");  //找所有的div标签
        ele[0].onclick=function()
        { 
            alert("哈哈");
        }

##### 5、onsubmit表单提交 #####

*  用到的事件

onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.  
onsubmit 确认按钮被点击的效果，将表单提交给服务端。当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

*  参考代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <form action="" id="form1">
        <input type="text" name="user"  placeholder="username">
        <input type="submit" value="提交" id="sub">
    </form>
    
    <script>
        var ele=document.getElementById("form1");
        // ele.οnsubmit=function(e){ 
        // alert("已提交！");
        // //若返回一个false就不会发送给服务端，而默认返回的是true
        // // return false;
        // //或者使用事件e来提交
        // e.preventDefault();
        // }
    
        ele.onkeydown=function(){ 
            alert("已提交！");
            //若返回一个false就不会发送给服务端，而默认返回的是true
            // return false;
            //或者使用事件e来提交
            e.preventDefault();
        }
    
    </script>
    </body>
    </html>

![2][]

##### 6、事件传播 #####

意思就是内层标签与外层标签的相互影响，可以通过阻止外层事件传播到内层事件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .outer{ 
                width:250px;
                height: 250px;
                background-color: #2daebf;
            }
    
            .inner{ 
                width: 100px;
                height: 100px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
    
    <div class="outer" onclick="func2()">
        <div class="inner" onclick="func1()"></div>
    </div>
    
    <script>
        var ele=document.getElementsByClassName("inner")[0];  //获取inner标签
    
        ele.onclick=function(e){ 
            alert("inner被触发!");
            e.stopPropagation();  //阻止事件向外部div传播
        }
        function func2(){ 
            alert("outer被触发！");
        }
        
    </script>
    </body>
    </html>

![3][]  
这样点击深蓝色就只会出现“inter被触发”，不会受外部的影响而出现“outer被触发”

[1]: /images/20230312/c0f99ec0fb954a26a95aeb093a04d664.png
[2]: /images/20230312/4709bf84d64f4c59a8b54bbf2c00174f.png
[3]: /images/20230312/81605e952d2649de97b13ca6bea8133d.png