事件
补充表格代码:
Document
序列号
姓 名
电 话
id
姓名
电话
操作
事件
日常生活中事件: 发生并得到处理的操作
在JS中的事件是: 用户在页面上操作, 然后我们要调用函数来处理.
事件触发：用户在页面上操作(如点击按钮, 鼠标滑过, 鼠标点击, 鼠标松开, 文本框获得焦点, 失去焦点等), 就是事件触发.
事件的模式
JavaScript有两种事件实现模式: 内联模式, 脚本模式.
内联模式 :
直接在HTML标签中添加事件. 这种模型是最传统简单的一种处理事件的方法。但是这种模式中事件和HTML是混写的, 并没有将JS与HTML分离, 当代码量多了以后,对后期代码维护和扩展很不利.
注意: 单双引号
//执行自定义的JS函数
注意: 内联模式调用的函数不能放到window.onload里面, 否则会找不到该函数.
脚本模式
脚本模式能将JS代码和HTML代码分离, 符合代码规范.
使用脚本模式我们需要先获取到元素节点对象, 再针对该节点对象添加事件.
var box = document.getElementById('box');
添加事件方式一 : 通过匿名函数，可以直接触发对应的代码 (推荐)
box.onclick = function() { //给box节点对象添加点击事件onclick
console.log('Hello world!');
};
添加事件方式二 : 通过指定的函数名赋值的方式 来执行函数
box.onclick = func; //注意这里不能写成func()
function func() { //给box节点对象添加点击事件onclick
console.log('Hello world!');
};
事件处理由三个部分组成：1, 触发事件的元素节点对象;2, 事件处理函数;3, 事件执行函数
例如：单击文档任意处。
document.onclick = function(){
console.log('单击了文档页面的某一个地方');
};
在上面的程序中：
document : 是触发事件的对象, 表示触发事件的元素所在区域;
onclick : 表示一个事件处理函数(on+事件类型click)
function(){} : 匿名函数是被执行的函数, 用于触发事件后执行;
所有的事件处理函数都会都有两个部分组成，on+事件类型;
例如 : onclick事件处理函数就是由on加上click;
注意: 事件处理函数一般都是小写字母
事件的分类
JavaScript 可以处理的事件种类有三种：鼠标事件, 键盘事件和 HTML事件.
鼠标事件，页面所有元素都可触发鼠标事件;
click： 当单击鼠标按钮并在松开时触发
onclick = function() {
console.log('单击了鼠标');
};
dblclick： 当双击鼠标按钮时触发。
ondblclick = function() {
console.log('双击了鼠标');
};
mousedown：当按下了鼠标还未松开时触发。
onmousedown = function() {
console.log('按下鼠标');
};
mouseup： 释放鼠标按钮时触发。
onmouseup = function() {
console.log('松开了鼠标');
};
mouseover：当鼠标移入某个元素的那一刻触发。
onmouseover = function() {
console.log('鼠标移入了');
};
mouseout：当鼠标刚移出某个元素的那一刻触发。
onmouseout = function() {
console.log('鼠标移出了');
};
mousemove：当鼠标指针在某个元素上移动时触发。
onmousemove = function() {
console.log('鼠标移动了');
};
mouseenter：当鼠标移入某个元素的那一刻触发。
onmouseenter = function() {
console.log('鼠标移入了');
};
mouseleave：当鼠标刚移出某个元素的那一刻触发。
onmouseleave = function() {
console.log('鼠标移出了');
};
(onmouseover与onmouseout) 比(onmouseenter和onmouseleave) 早执行
(onmouseover与onmouseout)遇到子元素 也会触发,
(onmouseenter和onmouseleave) 遇到子元素 '不'会触发
鼠标的滚轮事件
oBox.onmousewheel = function () {
console.log(1111);
}
键盘事件，在键盘上按下键时触发的事件; (一般由window对象或者document对象调用)
keydown：当用户按下键盘上某个键触发，如果按住不放，会重复触发。
window.onkeydown = function() {
console.log(按下了键盘上的某个键);
};
keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发
window.onkeypress = function() {
console.log('按下了键盘上的字符键');
};
keyup：当用户释放键盘上的某个键触发。
window.onkeyup = function() {
console.log(松开键盘上的某个键);
};
HTML事件，跟HTML页面相关的事件;
load：当页面完全加载后触发
window.onload = function() {
console.log('页面已经加载完毕');
};
unload：当页面完全卸载后触发
window.onunload = function() {
console.log('页面已经卸载完毕');
};
select：当用户选择文本框(input 或 textarea)中的内容触发。
input.onselect = function() {
console.log('选择了文本框中的内容');
};
change：当文本框(input 或 textarea)内容改变且失去焦点后触发。
input.onchange = function() {
console.log('文本框中内容改变了');
};
//页面结构加载完成,就触发
window.addEventListener("DOMContentLoaded", function () {
console.log("over");
卸载
window.onunload = function () {
console.log("卸载.......");
改变窗口事件
window.onresize = function () {
console.log("onresize");
滚轮 onwheel onmousewheel
var oBox=document.querySelector(".box");
oBox.onwheel=function(){
console.log("onwheel");
}
focus：当页面或者元素获得焦点时触发。
input.onfocus = function() {
console.log('文本框获得焦点');
};
blur：当页面或元素失去焦点时触发。
input.onblur = function() {
console.log('文本框失去焦点');
};
submit：当用户点击提交按钮在submit 重点
事件对象
在事件触发时的一条记录信息,就是事件对象
该对象里有哪些信息?
- 位置,事件的类型,目标元素,到元素,屏幕等等的距离
事件对象的属性:button 0 左键 ,1 滚轮键 ,2 右键
target 目标 点了谁? srcElement ie
var oBox = document.querySelector(".box");
oBox.onmousedown = function (evt) {
//在ie下 window.event
//在google,使用形参true
//事件对象的兼容写法
// google ie
var e = evt || window.event;
// console.log(e.button);
// console.log(e.srcElement);
// this不等于 target
// this 就是万年不变的 box
// target 鼠标点了谁,就是谁 (事件委托就要借助它)
var ele = e.target || e.srcElement;
console.log(ele);
console.log(this);
浏览器渲染页面的原理及流程
1.根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。
2.构建渲染树（Render Tree）。
3.页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是回流
重绘和回流（repaint&reflow)
当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
导致回流的操作：
1、页面首次渲染
2、浏览器窗口大小发生改变
3、元素尺寸或位置发生改变
4、元素内容变化（文字数量或图片大小改变而引起的计算值宽度和高度改变）
5、元素字体大小变化
6、添加或者删除可见的DOM元素
7、激活CSS伪类（例如：:hover）
8、查询某些属性或调用某些方法
9、offsetWidth,width,clientWidth,scrollTop/scrollHeight的计算,会使浏览器将渐进回流队列Flush,立即执行回流。
当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
回流必定会发生重绘，重绘不一定会引发回流。
如何避免重绘和回流？
css：
1.避免使用table布局，可能很小的一个小改动会造成整个table的重新布局
2.尽可能在DOM树的最末端改变class。
3.避免设置多层内联样式。
4.将动画效果应用到position属性为absolute或fixed的元素上。
5.动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用requestAnimationFrame
6.避免使用CSS表达式（例如：calc()）
7.使用transform替代top
8.使用visibility替换display: none，因为前者只会引起重绘，后者会引发回流（改变了布局）
将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点
js：
1.避免频繁操作样式，最好一次性重写style属性,cssText，或者将样式列表定义为class并一次性更改class属性。
2.避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
3.也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
4.避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
5.对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。