正文

javascript常用事件集合，前端小白必备（写的很详细，建议收藏）(代码片段)

欧阳呀  欧阳呀  2022-12-05  360

关键词：

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

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

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 点击事件

 let timeId = null;     
 // 单击事件       
 function clickFn()
      clearTimeout(timeId);
      timeId = window.setTimeout(function()
          console.log("单击事件");
      , 500)
  
  // 双击事件
  function dbFn()
      clearTimeout(timeId)
      console.log("双击事件")

2.3 常用的回车事件

// 键盘事件
function keyFn(event)
    console.dir(event);


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

在这里插入图片描述

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

3.1 获取浏览器类型

let userAgent= navigator.userAgent;
console.log(userAgent);
if (userAgent.indexOf("Opera") > -1) 	// 判断是否是Opera浏览器
   console.log("Opera");
;
if (userAgent.indexOf("Firefox") > -1)  // 判断是否是Firefox浏览器
   console.log("Firefox");

if (userAgent.indexOf("Chrome") > -1)  // 判断是否是Chrome浏览器
   console.log("Chrome");

if (userAgent.indexOf("Safari") > -1) 	// 判断是否是Safari浏览器
   console.log("Safari");

if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1) 
   console.log("IE");      // 判断是否是IE浏览器
;

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();

在这里插入图片描述

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 = '';

事件委托的写法

let oUl = document.getElementById('ul1');
let aLi = oUl.children;
oUl.onmouseover = function(ev)
    let ev = ev || window.event;
    let oLi = ev.srcElement || ev.target;
    if(oLi.nodeName.toLowerCase() == 'li')
        oLi.style.background = 'orange';
    
                            

    
oUl.onmouseout = function(ev)
    let ev = ev || window.event;
    let oLi = ev.srcElement || ev.target;
    if(oLi.nodeName.toLowerCase() == 'li')
        oLi.style.background = '';
                    


// 后面添加的子节点也会有添加的事件
function addLi()
   let html = document.createElement("div");
   html.innerHTML = '<li>5</li>';

   oUl.appendChild(html);

1. 希望本文能对大家有所帮助，如有错误，敬请指出

2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我

在这里插入图片描述

前端小小白的学习之路javascript常用代码书写规范

javascript代码规范代码规范我们应该遵循古老的原则：“能做并不意味着应该做”。全局命名空间污染总是将代码包裹在一个立即的函数表达式里面，形成一个独立的模块。不推荐varx=10,y=100;console.log(window.x+‘‘+window.y);推... 查看详情

前端开发必备网站推荐

....com/html-css/css/　　3.node中文网:http://cnodejs.org/getstart　　4.JavaScript教程网：https://zh.javascript.info/　　5.web开发人员必备工具包(实现快速敲代码):https://docs.emmet.io/　　6.常用色彩搭配表:http://tool.c7sky.com/webcolor/　　7.阿里巴巴图标库:h... 查看详情

前端书籍推荐

...自己写一些可以即使看到效果的小项目从而提升兴趣。《Javascript高级程序设计》：书中涉及的概念基本涵盖了js的大部分内容，包括作用域链、js数据类型、OOP对象在js中的实现、闭包、BOM和DOM模型、对变态IE的系列兼容的解决方... 查看详情

❤️小白到精英必备的100多个python函数汇总❤️写代码都流畅多了(代码片段)

...什么作用，自然一头雾水。这几天我专门整理了Python常用的一些函数，从最基查看详情

前端小小白的学习之路javascript中的十个难点，你有必要知道。

1.立即执行函数立即执行函数，即ImmediatelyInvokedFunctionExpression(IIFE)，正如它的名字，就是创建函数的同时立即执行。它没有绑定任何事件，也无需等待任何异步操作：(function(){//代码//...})();function(){…}是一个匿名函数，包围... 查看详情

2017年必备的javascript开发指南

...个人，你甚至都不知道他们的名字。这种被淹没的感觉在JavaScript社区非常常见，所以“Ja 查看详情

vue常用的组件库大全前端工程师必备

Vue常用的组件库大全【前端工程师必备】（一）移动端常用组件库1）Vantui2）CubeUI3）VUX4）NuTUI3.06）倒计时组件库7）表格组件库8）富文本编辑器9）Loading加载动画组件10）Mintui11）voni 查看详情

15套前端经典实战项目大合集，小白练手必备实战项目

...识点：第一章：HTML5第二章：CSS3第三章：JavaScript第四章：ES6第五章：Vue通过本视频的学习，你可以从零开始，一步步的掌握前端开发的各项相查看详情

前端必备，十大热门的javascript框架和库

JavaScript框架和库可以说是开源项目中最庞大也是最累的类目了，目前在github上这一类的项目是最多的，并且几乎每隔一段时间就会出现一个新的项目席卷网络社区，虽然这样推动了创新的发展，但不得不说苦了前端的开发者们... 查看详情

必备前端基础知识-第三节2：javascript数组函数和对象(代码片段)

...f1a;数组二：函数三：对象一：数组数组：JavaScript中的数组和Java中的ArrayList有点相似，可以动态扩容，并且由于它是动态类型的语言，所以数组内的元素类型不要求一定是相同的创建数组：//创建数... 查看详情

必备前端基础知识-第三节2：javascript数组函数和对象(代码片段)

前端javascript详细教程(代码片段)

❤️JavaScript必备知识详解❤️第一部分：初识JavaScript（1）JS写在哪？（2）JS一些注意点：（3）JS获取和修改元素的方法：第二部分：简单事件拓展：监听事件：第三部分：修... 查看详情

前端入门小白写网易云音乐播发器

效果图：主界面跳转界面：css部分： html部分： JS部分：查看详情

前端入门小白写网易云音乐播发器

效果图：主界面跳转界面：css部分： html部分： JS部分：查看详情

必备前端基础知识-第三节1：javascript简介和基础语法(代码片段)

文章目录一：JavaScript简介（1）JavaScript概述（2）JavaScript特点（3）JavaScript运行过程（4）JavaScript组成（5）JavaScript的引入方式和基本使用（6）Jav 查看详情

javascript常用的事件

JavaScript常用的事件查看详情

前端开发javascript中重难知识点常见问题集合(代码片段)

目录闭包变量对象作用域原型与原型链事件委托实现继承的方法This对象的理解事件模型new操作符操作过程js基本数据类型null与undefined的区别异步编程的实现方式原生js数组去重操作js原生拖拽节点深拷贝、浅拷贝节流防抖实现防... 查看详情

软件测试必备-前端知识点之css基础及ps的用法

...置2、自己写的css代码，放在style标签里面三、 css常用属性1、color:red; 设置文字颜色2、font-size:50px;设置文字大小3、fo 查看详情