js中的事件

标签：范围   右键   部分   fse   间隔   盒模型   应用   其他   返回   

鼠标事件

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(页面下滚距离): 页面滚动触发

// 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)

}

js中的事件

标签：范围   右键   部分   fse   间隔   盒模型   应用   其他   返回   

原文地址：https://www.cnblogs.com/zhouhai007/p/10161135.html