JavaScript常用事件集合，前端小白必备（写的很详细，建议收藏）
Posted 欧阳呀
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript常用事件集合，前端小白必备（写的很详细，建议收藏）相关的知识，希望对你有一定的参考价值。
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常用事件集合，前端小白必备（写的很详细，建议收藏）的主要内容，如果未能解决你的问题，请参考以下文章