JavaScript常用事件集合，前端小白必备（写的很详细，建议收藏）

谁借莪１个温暖的怀抱￠ 2022-10-08 14:23 83阅读 0赞

### JavaScript入门级经典教程（无噱头，直接上干货） ###

*   *  1. 文档加载事件
     *  2. 鼠标事件
     *  3. 获取浏览器类型，手机机型（容易出问题的地方）
     *  4. 事件冒泡与事件委托（面试重点）

*  最近有很多粉丝小伙伴，说要一些基础教程，必须安排的明明白白
 *  后续做一个一整个JS教程（**知识点 + 经典案例**）
 *  新朋友可以关注一波（能三连是最好的了），**本博主高产似奶牛**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]

## 1. 文档加载事件 ##

*  此事件使用频率很高，务必掌握
 *  **文档加载完成之后**会做的事情

> **1.1 ready()**

*  ready(): 表示文档结构已经加载完成（不包含图片等非文字媒体文件）

// 写法一
    $(document).ready(function(){ 
    	//do something
    })

> **1.2 onload()**

*  onload(): 包含图片等文件在内的所有元素都加载完成。
 *  **ready() 在onload()之前加载**

// 写法二
    window.onload = function(){ 
      //do something
    }

## 2. 鼠标事件 ##

HTML结构如下（**记得先复制这个**）：

<!DOCTYPE html>
    <html>
        <head>
                <meta charset="utf-8" />
                <style>
                    .div2,.mousemove{ 
                        width: 200px;
                        height: 200px;
                        background: orange;
                        color: white;
                    }
    
                    .div2{ 
                        background: green;
                        display: none;
                        transition: all 0.5s;
                    }
                </style>
        </head>
        <body>
            <h1>鼠标事件</h1>
            <h3>mousemove: 精交互</h3>
            <div class="mousemove" onmousemove= "bodyFn(this)">
                mousemove
            </div>
            <h3>鼠标双击事件</h3>
            <button 
                id="dbBtn" 
                ondblclick="dbFn()"
                onclick="clickFn()">双击事件</button>
    
            <h3>鼠标悬浮事件</h3>
            <button id="btn">悬浮显示div</button>
            <div class="div2" id="div2">
                原有文字
            </div>
            <h3>键盘事件</h3>
            <input placeholder="请输入" onkeyup="keyFn(event)"/>
        </body>
    </html>

> **2.1 鼠标悬浮事件**

let btn= $my("btn");
    let div2 = $my("div2");
    // 鼠标悬浮事件
    btn.onmouseover =  function(){ 
      	div2.style.display = "block"; 
    }
    // 鼠标离开事件
    btn.onmouseout =  function(){ 
        div2.style.display = "none"; 
    }

此处的 $my() 已经进行过封装，这样很方便，代码如下：

function $my(id){ 
        return document.getElementById(id);
    }

> **2.2 点击事件**

> **2.3 常用的回车事件**

// 键盘事件
    function keyFn(event){ 
        console.dir(event);
    }
    
    // 监听窗口回车事件
    document.onkeyup = function(event){ 
       console.log(event.keyCode);
        if(event.keyCode === 13){ 
            alert("回车事件")
        }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]

## 3. 获取浏览器类型，手机机型（容易出问题的地方） ##

> **3.1 获取浏览器类型**

> **3.2 判断手机机型（移动端解决兼容问题常用）**

// 检测机型 安卓还是苹果
    function getAdr(){ 
        //获取机型信息
        let type = navigator.userAgent;
        let isAndroid = type.indexOf("Android") > -1 || 
                        type.indexOf("Adr") > -1;
        return isAndroid;
    }
    console.log(getAdr()); // true为安卓 false为苹果

## 4. 事件冒泡与事件委托（面试重点） ##

HTML文件代码如下（**记得先复制这个**）

<!DOCTYPE html>
    <html>
     <head>
             <meta charset="utf-8" />
             <style>
                 .div1{ 
                     width: 500px;
                     height: 100px;
                     border: 1px solid;
                 }
                 .p1{ 
                     background: orange;
                 }
             </style>
     </head>
     <body>
         <h1>事件冒泡</h1>
         <div class="div1" onclick="divFn(this)">
             div的文本
             <p class="p1" onclick="pFn()">我是段落标签</p>
         </div>
         <h1>事件委托</h1>
         <ul id="ul1">
             <li>1</li>
             <li>2</li>
             <li>3</li>
             <li>4</li>
         </ul>
         <button onclick="addLi()">增加一个li</button>
     </body>
    </html>

> **4.1 阻止事件冒泡**

*  事件冒泡：**当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window**
 *  显然，这是错误的，需要做处理（**就像儿子都成年了，做错了事，凭什么找老子？**）

// 如果不做处理，点击p标签时会触发div的点击事件
    function divFn(e){ 
         console.log("div被点击了");
         
    }
    function pFn(e){ 
         console.log("段落被点击了");
         window.event ? 
         window.event.cancelBubble = true : 
         // 阻止事件冒泡
         e.stopPropagation();
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 2]

> **4.2 事件委托**

*  事件委托：**把一个元素响应事件（点击事件、悬浮事件等等）的函数委托给另一个元素**
 *  举两个例子：
    
     *  隔壁老王和老婆分手了，所以只能委托我去爱她老婆（好坏哦~）
     *  放公司的快递到了，因为我请假爱老王老婆去了，所以只能**委托前台签收一下**
     *  在JS中，这是一种好的处理方式：**大大的减少dom操作，提升性能**

**不用事件委托，你得这么处理：**

*  循环添加事件，显然，这是很蠢的

for (var i=0;i<aLi.length;i++) { 
        aLi[i].onmouseover = function() { 
            this.style.background = 'orange';
    }
        aLi[i].onmouseout = function(){ 
            this.style.background = '';
        }
    }

**事件委托的写法**

> **1. 希望本文能对大家有所帮助，如有错误，敬请指出**
> 
> **2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）**  
> **3. 拜谢各位！后续将继续奉献优质好文**  
> **4. 如果存在疑问，可以私信我**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]: /images/20221005/11fbeb98ac4742bdb163c81186fc9eea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]: /images/20221005/37ca51dd641e4a2d92ab77c4531196bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 2]: /images/20221005/7656892447614bcc8dda0a00a2681c85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 3]: /images/20221005/6b389542d9bd458089b88eb551c143ae.png