JavaScript高级编程--元素样式操作和事件

元素样式操作

在前面学习了如何获取元素之后，我们就能操作元素的样式了

 <style>
        .box {
            width: 200px;
            height: 200px;
            background-color:yello ;
        }
    </style>

<div class="box"></div>

let box = document.querySelector(".box")
box.style.backgroundColor="blue"

 不过，需要注意一下，像table的cellspacing，cellpadding等是属性，而不是样式

事件

事件,就是函数在某种状态下被调用.JS捕捉到的发生在网页上的行为,官方称为事件句柄,是交互体验的核心功能

事件的三要素:1 事件源2 事件类型3 事件处理程序

事件类型

鼠标事件

1、click、 mousedown、mousemove、mouseup、dblclick、 contextmenu、mouseover、mouseout、mouseenter(html5标准)、mouseleave(html5标准)

a) mousedown-->mouseup-->click
b) mousedown是鼠标按下一次就只触发一次；
c) mousemove与 mousedown无关，相互独立；
d) 补充：移动端没有 mousedown事件，对应的是 touchstart--touchmove--touchend

2、DOM3标准规定：click事件只能监听左键，mousedown和 mouseup来判断鼠标键,event.button来区分鼠标的按键，0/1/2

键盘事件

1、keydown、keyup、keypress

a) keydown-->keypress-->keyup
b) keydown在按键按下之后会一直不断被触发

2、keydown和 keypress的区别

a) keydown可以响应任意按键(除了Fn键)，keypress只可以响应字符类键盘按键（event.charCode）
b)keypress返回 ASCII码，可以转换成相应字符（String.fromCharCode(event.charCode)，区分大小写）

keydown常用于绑定操作类事件处理，keypress常用于绑定字符类事件处理

输入框操作事件

1、input、focus、blur、change

a) input监听 input框在聚焦状态下的文本变化，例：百度搜索
b) change监听 input框在失焦后的文本变化（与前一次失焦状态的文本对比变化）
c) focus和blur只在聚焦和失焦的一刻触发一次

其他事件

1、scrollscroll：常用于绑定在window对象上,滚动鼠标时触发window.οnscrοll=func

//wheel 它是鼠标的

2、loadload：等待网页资源下载完毕再执行

img.onload 图片节点加载完毕不会调用 要资源加载完毕就会调用

window.onload：等待页面所有资源下载完成才执行,包括图片资源的下载，所以它是最慢的​ 网页加载顺序：url-->下载页面-->domTree，cssTree并行-->渲染树renderTree-->绘制页面-->继续下载图片资源，下载完毕再放到页面上去onloaddomTree：domTree的形成，是先把元素翻译成的节点对象挂到 domTree上去，再把属性 img_src放到渲染树上去

事件绑定

1.行内绑定方式在标签行内 的事件值上写上标志"javaScript:后跟js代码"

<a href="javaScript:void(0)">点我</a>
<button onclick="javaScript:alert(666)">点我</button>

 2.元素属性绑定方式

ele.onxxx=function(event){}
//兼容性很好，但是一个元素的同一个时间上只能绑定一个处理程序

 3.同元素多处理程序绑定方式1

obj.addEventListener(type,fn,false)
//IE9以下不兼容，可以为一个事件绑定多个处理程序
//第三个参数表示是否捕获阶段触发,跟冒泡没关系(笔试陷阱题)

事件解绑

既然能绑定事件，当然也能解除绑定

1、ele.οnclick=false/''/null;

2、ele.removeEventListener(type,fn,false);

2中fn若绑定的是匿名函数，则永远无法解除 （可以用类似自调用函数的解决方法解决）

var dom=document.getElementById("content"),clickt=0;
dom.addEventListener("click",function(e){
clickt++;
alert('你摸了我'+clickt+'下了。最多摸2下哦');
if(clickt>=2){
dom.removeEventListener(e.type,arguments.callee,false);
console.log(this);
}
});

事件响应链

 

1.事件的三个阶段:先捕获，后目标，再冒泡,只能有一个阶段触发程序执行,比如捕获阶段触发了到了冒泡阶段就不再触发

事件经过所有元素都没有被处理,这个事件消失

事件传递的过程 只跟文档树的结构有关系 跟界面显示的层叠效果没有任何关系

事件冒泡：结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）

事件捕获:结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）

2.默认在冒泡的时候执行事件:onclick/attach和 addEventListener传false的时候

3.addEventListener绑定事件，如果把第三个参数设置为true，则在捕捉的时候执行事件

3.整个事件处理过程，会有个event事件对象在整个事件过程传播（W3C标准，ie8及其以下没有）

4.ie8以下不支持addEventListener

5.focus,blur,change,submit,reset,select等事件不冒泡

阻止冒泡和阻止系统默认事件

阻止冒泡

阻止事件冒泡:W3C标准 event.stopPropagation();但不支持 ie9以下版本

stopImmediatePropagation()支持stopPropagation的浏览器中也可以用stopImmediatePropagation()方法，这个不仅会阻止事件向祖元素的冒泡，也会阻止同一个节点上同一事件的其他的事件处理程序(优先级比它低的,同元素同事件多处理程序时)

        btn.addEventListener("click", (e) => {
            console.log("btn 被点击了", "=============")
            // e.stopPropagation()//阻止事件冒泡
            // e.stopImmediatePropagation()//不仅阻止事件冒泡 还阻止其他监听器的运行
        })
        btn.addEventListener("click", (e) => {
            console.log("btn 被点击了", "/")
        })

阻止系统默认事件

官网中的某些元素自带事件，如果我们再给他绑定一个这个事件，会先执行我们的监听器，再执行系统的功能

event.preventDefault();  能够阻止系统默认事件

页面渲染

 

1.页面呈现过程不同的浏览器略微会有些不同。但基本上都是类似的

①.浏览器把html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象。dom树就是html结构，里面包含了所有的html tag，包括用JS添加的元素。

②浏览器把所有样式(主要包括css和浏览器自带的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式。

③dom tree和样式结构体结合后构建呈现树(render tree),render tree有点类似于dom tree，但有区别，render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到render tree中。但是visibility:hidden隐藏的元素还是会包含到render tree中的，因为visibility:hidden 会影响布局，会占有位置。

④一旦render tree构建完毕后，浏览器就根据render tree来绘制页面。

2.回流与重绘

① 当render tree中因为元素的数量,尺寸，布局，隐藏等改变而需要重新构建。这就称为回流或者回档(其实我觉得叫重新布局更简单明了些)。每个页面至少需要一次回流，就是在页面第一次加载的时候。

②当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

③(面试,选择题,问答题就答上面)从上面可以看出，回流必将引起重绘，而重绘不一定会引起回流。

3.常见的回流和重绘操作任何对render tree中元素的操作都会引起回流或者重绘

①添加、删除元素(回流+重绘)

② 隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)

③ 移动元素，比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流)，或者移动元素到另外1个父元素中。(重绘+回流)

④ 对style的操作(对不同的属性操作，影响不一样)

⑤ 还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)

④重绘与回流操作的注意点：重绘与回流操作的次数越多,计算机的性能消耗越大，进行dom操作的时候就要考虑