JS常见的事件

1. 常见的鼠标事件

1. click: 点击事件
2. contextmenu : 鼠标右键打开上下文菜单时触发
3. dblclick：当用户双击某个对象时调用
4. mousedown: 鼠标按钮被按下
5. mouseup: 鼠标按键被松开
6. mouseover: 鼠标移动到某个元素之上(支持事件冒泡)

1. 当从父视图移动到子视图时, 会先调用父视图的mouseout, 再调用子视图的mouseover;
2. 当从子视图移开到父视图时,会调用子视图的mouseout, 再调用父视图的mouseout

8. mouseout: 鼠标从某个元素移开(支持事件冒泡)
9. mouseenter: 鼠标移动到某个元素之上(不支持事件冒泡)

1. 如果从父视图进入子视图时,监听不到(但是可以手动给子视图添加监听)
2. 不支持事件的委托

10. mouseleave: 鼠标从某个元素移开(不支持事件冒泡)

2. 常见的键盘事件

1. onkeydowm: 某个键盘按键被按下=> 事件先发生
2. onkeypress: 某个键盘按键被按下 => 文本被输入
3. onkeyup: 某个键盘按键被松开 => 文本输入完成

inputEl.onkeyup = function(event) {
	console.log(event.key, event.code)
}

code 是指键盘上某个按键对应的code码
key 是指code上对应的值

3.表单事件

1. onfocus: 获取焦点
2. onblur : 失去焦点
3. oninput: 内容发生改变
4. onchange: 内容完成改变
5. onreset: 重置表单
6. onsubmit: 表单提交时触发

4. 文档加载事件

1. window.onload: 文档所有的资源已加载完毕
2. window.addEventListener(“DOMContentLoaded”, function(){}) : 浏览器已完全加载html, 并构建了DOM树, 但像< img> 和 样式表之类的外部资源 可能尚未加载完成.
3. onresized : 视图大小发生改变

5. window 的定时器

1. setTimeout: 隔一段时间执行一个方法, 会返回一个数字类型的标识, 用于取消定时器用的
2. setInterval: 每隔一段时间执行一个方法
3. clearTimeout: 取消setTimeout方法

funtion foo(name, age, height) {
 console.log("foo 被调用")
}
// 执行一次
var timeOutID =  setTimeout(foo, 3000, "why", 18, 1.88)

// 执行多次
var interValID =  setInterval(foo, 500, "why", 18, 1.88)

// 取消定时器
clearTimeout(timeOutID)
clearInterval(interValID)