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) }
上一篇: cf605D. Board Game(BFS 树状数组 set)
下一篇: 你一个城管能追上我吗