JS笔记

陈两全

于 2024-09-25 17:53:28 发布

阅读量1k

点赞数 30

文章标签： javascript 笔记开发语言

本文链接：https://blog.csdn.net/2201_76100326/article/details/142527772

版权

9.25

1.JS事件

特点：

1.特效是由事件触发的

2.事件源：任何一个html元素（节点）都是一个事件源,一个事件源可以添加多个事件

3.键盘事件：keypress键盘事件，keyup抬起，keydown按下

4.鼠标事件文档：load加载表单：focus获得焦点，blur失去焦点，submit提交事件，change改变事件

5.其他：scroll滚动事件，select start选择事件

2.JS触发事件的方式

方法一：直接添加

在js获取元素/标签
元素.事件名称 = 匿名函数 / function(){}
var oBox = document.querySelector('.box');
oBox.onclick = function(){
    console.log(oBox);
}

方法二：元素.事件名称 = 函数名称

var oBox = document.querySelector('.box');
oBox.onclick = changeColor;
function changeColor(){
    oBox.style.backgroundColor = 'red';
}

方法三：在html中触发 onclick = "代码段 / 函数调用" 如果是函数的调用，可以传递一个参数，this（表示的是当前的标签）

<div class="box" onclick="changeColor(this,'green')"></div>
<script>
function changeColor(getThis,color1){
    console.log(getThis);
    getThis.style.backgroundColor = color1;
}
</script>

3.事件的分类

3.1.鼠标事件

事件	事件说明
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开
onmousemove	鼠标被移动
onmousedown	某个鼠标按键被按下
onmouseup	某个鼠标按键被松开
oncontextmenu	右键事件
onmousewheel	当滚轮被滚动的时候
onmouseenter	鼠标进入
onmouseleave	鼠标离开

onmouseenter 和 onmouseover的区别

1、onmouseover、onmouseout：鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东西，儿子也有），支持冒泡

2、onmouseenter、onmouseleave：鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有），不支持冒泡

3.2.键盘事件

事件	说明
onkeypress[使用的比较少]	键盘的某个键被按下
onkeydown	键盘的某个键被按下或按住
onkeyup	键盘的某个键被松开

一个onkeydown+onkeyup = 鼠标单击事件，想要区分键盘上的每个按键，是通过键盘的keyCode值来判断的，所以想要知道按下的是哪个按键，可以使用event.keyCode onkeydown 只要是按下的状态，就会一直触发当前事件 onkeyup 只有弹起的那一瞬间，才会触发

// 简单案例，键盘按下输出1，键盘弹起输出2
document.onkeydown = function(){
    console.log(111111111);
}
document.onkeyup = function(){
    console.log(222222222);
}

获取对应的键盘值

document.onkeyup = function(){
    console.log(event.keyCode);
}

注意：js中的.style添加的是行内样式，获取的也是行内样式默认情况下标签没有margin-left值的话，获取之后转为float类型的时候，会变成NaN，所以：记得给标签添加默认的行内css样式

当然最好的方法还是通过left，top这些值来改变元素的位置，这样代码会更简单

3.3.光标事件

事件	说明
onfocus	元素获得焦点
onblur	元素失去焦点

3.4.窗口事件

事件	说明
onresize	览器窗口被调整大小时发生

3.5.表单事件

事件	说明
onsubmit	提交按钮被点击
onreset	重置按钮被点击
onselect	文本内容被选定
onchange	用户改变表单元素的内容
oninput	在用户输入时触发

文本被选中

// 给多行文版框添加 选择的功能
var text = document.querySelector('textarea');
text.onselect = function(){
    console.log('123456789');
}

onchange 内容发生改变

// 只用多行文本发生会触发
text.onchange = function(){
    console.log('页面内容发生改变');
}
// 表单中的任意一个内容发生改变，都会触发onchange
var form1 = document.getElementById('form1');
form1.onchange = function(){
    console.log('change');
}

注意：onselect 属性可用于以下元素内：< input type="file" >、< input type="password">、< input type="text">、< keygen> 以及 < textarea>.

注意2：oninput事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。

3.6.单选框和复选框被选中

复选框是否被选中需要判断复选框中的checked的值 true：选中 false：没选中

3.7.加载事件

事件	说明
onload	页面或图像加载完成
onbeforeunload	页面卸载前执行

表示没有 “无法读取null属性(读取'innerHTML')”，也就是没有获取到对象，这时候可以在所有js的代码外面天际onload的；表示，html页面内容加载完毕之后，在执行js代码

3.8.滚动事件

事件	说明
onscroll	窗口发生滚动
scrollTo	滚动到指定位置【增加】

方法一： window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标。 y-coord 是文档中的纵轴坐标。比如： window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标。 y-coord 是文档中的纵轴坐标。比如：window.scrollTo(0,1000); // 垂直滚动到1000的位置

方法二： window.scrollTo(options) // option为对象格式 window.scrollTo(options) // option为对象格式

1.top 等同于 y-coord

2.left 等同于 x-coord

3.behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant

3.9.offset系列

offsetLeft : 用于获取元素到最近的定位父盒子的左侧距离
1. 计算方式: 当前元素的左边框的左侧到定位父盒子的左边框右侧
2. 如果父级盒子没有定位, 那么会接着往上找有定位的盒子
3. 如果上级元素都没有定位,那么最后距离是与body的left值
offsetTop : 用于获取元素到最近定位父盒子的顶部距离
1. 计算方式:当前元素的上边框的上侧到定位父盒子的上边框下侧
2. 如果父级盒子没有定位,那么会接着往上找有定位的盒子
3. 如果上级元素都没有定位,那么最后距离是与body的top值
offsetWidth :用于获取元素的真实宽度(包括元素宽度、内边距和边框，不包括外边距）
offsetHeight : 用于获取元素的真实高度（包括元素宽度、内边距和边框，不包括外边距）
offsetParent :用于获取该元素中有定位的最近父级元素
1. 如果当前元素的父级元素都没有进行定位,那么offsetParent为body
offsetX：event.offsetX
offsetY：event.offsetX

3.10.client系列

clientWidth : 元素的宽度（包括元素宽度、内边框，不包括边框和外边框）
clientHeight: 元素的高度（包括元素宽度、内边框，不包括边框和外边框）
clientX : 获取鼠标事件发生时的应用客户端区域的水平坐标 event.clientX
clientY : 获取鼠标事件发生时的应用客户端区域的垂直坐标（不包含滚动上去的部分）

3.11.inner系列

首先这两个属性是比较特殊的，只能由浏览器使用的。返回当前浏览器窗口大小所对应的宽高度

window.innerHeight (包含滚动条的宽度)

window.innerWidth

3.12.scroll系列

scrollHeight :是一个只读属性，它返回该元素的像素高度（包含元素宽度、内边框，不包括边框和外边框），是一个整数，单位是像素 px
1. 如果内容不足,就是元素的高度
scrollWidth : 是一个只读属性，它返回该元素的像素高度（包含元素宽度，内边距（padding），不包含外边距（margin）、边框（border）），是一个整数，单位是像素 px
1. 如果内容不足,就是元素的宽度
scrollTop : onscroll事件发生时,元素向上卷曲出去的距离
1. 标准浏览器生效: document.documentElement.scrollTop
2. IE浏览器有效: document.body.scrollTop
scrollLeft : onscroll事件发生时,元素向左卷曲出去的距离
scrollIntoView 滚动元素的父容器

3.13.getBoundingClientRect()

语法:Element.getBoundingClientRect()

返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合。

属性值

属性名	属性值
top	元素上边距离页面上边的距离
left	元素右边距离页面左边的距离
right	元素右边距离页面左边的距离
bottom	元素下边距离页面上边的距离
width	元素宽度
height	元素高度

4.js中两种添加事件的方式

4.1方式一：on+事件名

// 添加事件关联
oneDiv.onclick = function() {
  console.log("+++++");
}
oneDiv.onclick = function() {
  console.log("-----");
}
// 取消事件关联
oneDiv.onclick = null;
oneDiv.onclick = false;

4.2.方法二：添加事件监听

语法1：element.addEventListener(event, function, useCapture)

Event：必须。字符串，指定事件名。

注意: 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。

Function：必须。指定要事件触发时执行的函数。

useCapture：可选。布尔值，(默认值, false. true 代表以事件捕获形式触发事件, false 代表以事件冒泡形式触发事件)

5.addEventListener()

与点击事件的添加近乎相同，存在兼容性问题

// 其他浏览器
oneDiv.addEventListener("click", fun1);
oneDiv.removeEventListener("click", fun1);
// IE 低版本浏览器
Ie浏览器中的on关键词不能少
oneDiv.attachEvent("onclick", fun1);
oneDiv.detachEvent("onclick", fun1);

6.对比onclick和addEventListener

1.addEventListener可以对同一个元素绑定多个事件【相同事件】，执行顺序从上到下依次执行。而onclick同一个元素只能绑定一个【相同】事件，如有多个，后面的事件会覆盖前面的事件。

2.addEventListener的第三个参数为布尔类型，默认为false，也就是执行的冒泡机制，如为true，则执行捕获机制

3.addEventListener它对任何 DOM 元素都是有效的，而不仅仅只对 HTML 元素有效。点击查看dom分类

4.注册addEventListener事件时不需要写on，而onclick方式则必须加on

5.在移除事件上，onclick使用的是指针指向null，例如document.onclick = null，而addEventListener则使用的是独有的移除方法removeListener（要使用此方法，addEventListener必须执行的是外部函数或存在函数名，不然则不能使用）

6.addEventListener为DOM2级事件绑定，onclick为DOM0级事件绑定

总结：对于简单事件（同一个元素上只有一个事件）使用行内的onclick更合适。对于复杂事件使用 addeventlistenr 最后可以删除事件。推荐大家使用addeventlistenr ，他是现在浏览器的标准，浏览器的兼容性会更好一些

7. DOM CSS动态样式

7.1.obj.style

【获取行内样式】注意：可以获取样式，也可以设置样式

动态样式

动态样式指通过脚本动态控制元素的样式，实现页面显示格式的动态变化。比如：动态滚动的文本、动态移动的图片、可折叠的树形菜单等。

使用style对象访问样式

每个HTML标记均具有style属性，相应的，JavaScript脚本中的HTML元素对象都具有style属性，该属性是一个style对象。
Style对象的属性与CSS样式中的属性一一对应。

元素对象.className="类名"

因为属性名class在JS中为关键字，所在此处写做className

var box = document.getElementById("box");
box.style.color="#ff0000";
box.style.width="400px";
box.style.height="300px";
box.style.backgroundColor="#ff0000";
box.style.border="1px solid #f00";

7.2.getComputedStyle

【非IE浏览器下，获取内部样式，或者外部样式】

注意：只能获取不能设置

基本语法： window.getComputedStyle(元素).样式属性

7.3.currentStyle

【IE浏览器下获取内部样式，或者外部样式】

基本语法：元素.currentStyle.样式属性

7.4.js获取css样式，兼容性写法

// 兼容写法
/**
 * 
@param obj 获取哪个元素的样式【属性】
@param attr  样式的名称【属性】
@returns 返回样式的值【属性值】
*/
function getCss(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return window.getComputedStyle(obj)[attr];
    }   
}