欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript 系列博客(六)

程序员文章站 2022-04-05 10:09:23
JavaScript 系列博客(六) 前言 本篇博客介绍 js 操作高级,通过 js 获取标签的全局属性、设置标签的全局属性,以及事件的绑定与取消、js 盒模型与 js 动画。 对象使用的高级 对象的key为字符串类型, value为任意类型 对象的属性可以任意添加与删除 页面标签全局属性操作 事件 ......

javascript 系列博客(六)

前言

本篇博客介绍 js 操作高级,通过 js 获取标签的全局属性、设置标签的全局属性,以及事件的绑定与取消、js 盒模型与 js 动画。

对象使用的高级

  • 对象的key为字符串类型, value为任意类型
var obj = {
    name: "name",
    "person-age": 18
}
// 访问
obj.name | obj["name"]
obj["person-age"]
  • 对象的属性可以任意添加与删除
var obj = {
    name: "obj"
}
// 删除
delete obj.name
// 添加
obj.age = 18  // 如果age的key已存在就是修改值, 不存在就是添加键值对, 添加的key任意
// 注: 获取的页面元素(标签对象)也可以任意添加/删除属性

页面标签全局属性操作

ele.getattribute("alert");
// 获取页面标签ele的alert全局属性的值, 如果没有该全局属性值为null

ele.setattribute("attr_key", "attr_value");
// 页面标签ele已有该全局属性,就是修改值, 没有就是添加该全局属性并赋相应值
// 注: 一般应用场景, 结合css的属性选择器完成样式修改

事件

  • 事件的绑定
// 第一种
box.onclick = function(){}
// 只能绑定一个实现体, 如果有多次绑定, 保留最后一次
// box.onclick = null来取消事件的绑定

// 第二种
var fn = function() {}
box.addeventlistener('click', fn)
// 能绑定多个实现体, 如果有多次绑定, 按顺序依次执行
// box.removereventlistener('click', fn)来取消事件的绑定
// 了解: 第三个参数决定冒泡顺序(子父级谁先相应事件)
  • 事件对象
// 系统回调事件函数时, 传递了一个 事件(event) 实参
// 如果要使用传递来的实参 事件(event), 定义接收的 形参 即可
box.onclick = function(ev){
    // 使用事件对象
    // 特殊按键 eg: ev.altkey: true | false
    // 鼠标触发点: ev.clientx | ev.clienty
    
    // 取消冒泡
    ev.cancelbubber = true;
    
    // 取消默认事件
    return false;
}

事件总结

  • 鼠标事件
var box = document.queryselector('.box');
// 1. 点击事件
box.onclick = function () {
    console.log("单击");
};
// 2. 双击事件(应用场景不广)
box.ondblclick = function () {
    console.log("双击");
};
// 3. 鼠标右键
box.oncontextmenu = function () {
    console.log("右键了");
    return false;
};
// 4. 鼠标悬浮 | 移动 | 按下 | 抬起 | 离开
box.onmouseover = function () {
    console.log("悬浮");
};
box.onmousemove = function () {
    console.log("移动");
};
box.onmousedown = function () {
    console.log("按下");
};
box.onmouseup = function () {
    console.log("抬起");
};
box.onmouseout = function () {
    console.log("离开");
}
// over | out   vs   enter | leave
// 总结:
// 1. 将子级与父级分开考虑, 大家都有各自的悬浮离开事件, 采用 over | out 组合
// 2. 将子级纳入父级考虑范围, 也就是只有父级去相应悬浮离开事件, 采用 enter | leave 组合
// 3. 单独考虑一个盒子的悬浮离开事件, 两套均可以

// 特性
// 从父级移至子级, 会触发out事件, 紧接着触发子级的over事件, 并可以冒泡给父级
// 从父级移至子级, leave事件并不会触发, 它认为子级是属于父级的一部分, enter事件, 也不会再次触发

// 悬浮子级:
// sub over => sup over  支持冒泡
// sup enter => sub enter  不支持冒泡
  • 键盘事件
// onkeydown: 键盘按下会触发, 长按会持续触发
// onkeyup: 键盘抬起会触发

// ev.keycode: 按下的键盘键的标号
  • 其他事件
// window.onload: 页面加载完毕触发
// window.onscroll | document.onscroll => window.scrolly(页面下滚距离): 页面滚动触发

js盒模型

// content: 通过计算后样式获取
// padding + content: box.clientwidth | box.clientheight
// border + padding + content: box.offsetwidth | box.offsetheight
// 绝对定位top|left: box.offsettop | box.offsetleft

动画

  • 定时器
// 一次性定时器
var timeout = settimeout(function(a, b){}, 1000, 10, 20);

// 持续性定时器
var timer = setinterval(function(a, b){}, 1000, 10, 20);

// 清除定时器
// cleartimeout | clearinterval

//结论:
// 1. 定时器不会立即执行
// 2. 一次性定时器只执行一次, 持续性定时器不做清除的话会一直执行
// 3. 声明定时器第一个参数为逻辑函数地址, 第二个参数为事件间隔, 第三个为逻辑函数所需参数(可以为多个,一般省略)
// 4. 清除定时器可以混用, 本质就是清除创建定时器时的数字标号, 该编号就是创建定时器时的返回值

// 小技巧: 如果页面中有n个定时器
var n = settimeout(function () {}, 1);
for (var i = 1; i < n; i++) {
    clearinterval(i)
}