前端基础 - WebApi （三） 元素的结构创建

元素的创建总结

元素的创建

1. document.write();
2. element.innerHTML();
3. document.createElement();

区别

1. 使用document.write是直接将内容写入到页面的内容流区域，当文档流执行完毕，会导致页面全部重绘
2. element.innerHTML：是将内容写入当前这个节点内部，并且不会导致页面重绘，还可以创建多个元素，工作效率更高，(不需要连接字符串操作)，但是写法结构比较复杂
3. document.createElement，创建元素但是只是创建了非结构中的元素，不会自动添加到结构内部，并且创建多个元素效率比较低，但是结构简单清晰

事件高级内容

事件是什么

这个元素所具备的一些被动能力，当这个元素被进行某种程度的触发之后进行对某些函数进行处理执行，将这种触发叫做元素的事件

注册事件

给元素添加事件，称为注册事件或者绑定事件

注册事件的两种方式;传统方式、监听注册方式

传统方式

1. 元素对象有一些on开头的事件onclick
2. 第一步找到这些事件
3. 第二步给这些时间直接赋值一个函数，或者直接给事件赋值要处理的代码

特点：注册事件的唯一性，同一个元素同一个事件只能设置一个处理函数，当前注册的处理函数将会覆盖前面注册的处理函数

监听注册方式

1. W3C标准推荐的一种注册事件方式
2. 第一步给元素对象使用addEventListener()

特点：IE9和之前的版本不支持这种方式，在旧版本里面使用的是attchEvent()代替，同一个元素同一个事件可以注册很多个监听事件并且按照绑定顺序依次执行

三个参数：

1. type:事件类型字符串
2. listener：事件的处理函数，事件发生时所调用的函数
3. options：可选参数，是一个布尔值，作用和事件流有关

删除事件

传统方式

btn.οnclick=null;

监听注册方式

btn.removeEventListener(“click”,say);

btn.detachEvent()这个删除事件方法和attchEvent()注册事件方法对应

事件流

html标签都是一些相互嵌套的盒子，document是最大的盒子，考虑一个问题：

1. 如果牵扯到盒子嵌套问题，外盒子和内盒子都有相同的一个事件，问题是如果这两个盒子的事件同时触发结果怎样？

   两个事件都会触发，顺序从里到外

2. 如果这个盒子默认由属于自己的事件例如a标签，那么当重新给此事件注册一个函数触发之后结果怎样？

   跳转>aa>bb

事件流描述的是从页面中接收事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播触发，这个传播过程叫做DOM事件流

事件冒泡：IE提出的，事件开始时是由最具体的元素接收，然后逐级向上级传播到DOM的最顶层节点的过程

事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程

W3C最终做出统一协调：先捕获再冒泡

当今的浏览器对于DOM事件流经过3个阶段：

1. 捕获阶段：检查具有这个事件的所有元素从外到内都有哪些
2. 当前目标阶段：事件当前的处理者
3. 冒泡阶段：按照从内到外的顺序进行事件冒泡

注意：

1. JS代码中只能执行捕获或者冒泡其中的一个阶段
2. onclick和attachEvent，只能得到冒泡阶段
3. addEventListener第三个参数如果是true，表示在事件捕获阶段调用事件处理函数。如果是false，表示在事件冒泡阶段处理程序
4. 实际开发中很少使用事件捕获，更关注的是事件冒泡
5. 有些事件是没有冒泡，比如onblur，onfocus，onmouseenter，onmouseleave
6. 事件冒泡在实际开发中某些时候会产生一系列问题需要注意。

事件对象

事件发生后，跟事件相关的一系列信息数据的集合都放在一个对象里面，这个对象称为事件对象

1. 谁绑定了这个事件
2. 鼠标触发事件的话，会得到鼠标的相关数据
3. 键盘触发事件的话，会得到键盘的相关数据，键盘事件只有可以获取焦点的元素可以使用

使用

事件触发是就会自动产生这个对象，并且会自动跟随事件函数的参数传递，会当做事件函数的实参传递给函数内部，所以要使用事件对象则给事件绑定的函数需有一个形参，这个形参来接受事件对象。(旧版本中，基本上是通过浏览器中的window对象寻找event，再获取相关对象)

事件对象属性

e.keyCode：键盘事件键盘按下时按键的大写字母的ASCII码

e.key：键盘事件键盘按下时按键的键值

e.clientX：鼠标相对于浏览器窗口可视区域的X坐标

e.clientY：鼠标相对于浏览器窗口可视区域的Y坐标

e.pageX：鼠标相对于当前Document文档的X坐标，IE9以上

e.pageY：鼠标相对于当前Document文档的Y坐标，IE9以上

e.screenX：鼠标相对于电脑屏幕的X坐标

e.screenY：鼠标相对于电脑屏幕的Y坐标

e.target：返回触发事件的对象(标准)

e.srcElement：返回触发事件的对象(非标准)

e.type：返回触发事件的事件类型

e.cancelBubble：该属性阻止事件冒泡(非标准)

e.returnValue：该属性阻止默认事件(非标准)

e.preventDefault()：该方法阻止默认事件(标准)

e.stopPropagation()：该方法阻止事件冒泡(标准)

注意：e.target是事件触发的元素，this是事件的绑定元素

事件委托

事件冒泡本身的特性会带来很多问题，在某种情况下也会带来很多好处

将事情委托给别人，别人代为处理

事件委托：事件代理，简单理解为不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行

委托的原理

给父元素注册事件，利用事件冒泡，当子元素的事件触发，最后会冒泡到父元素，然后控制响应的子元素

委托的使用

1. 只操作一次DOM，提高程序的性能

2. 动态创建的子元素也拥有事件

       <ul>
           <li>点击列表项有惊喜</li>
           <li>点击列表项有惊喜</li>
           <li>点击列表项有惊喜</li>
           <li>点击列表项有惊喜</li>
           <li>点击列表项有惊喜</li>
       </ul>
       <script>
           window.onload=function(){
               var ul=document.querySelector("ul");
               ul.addEventListener("click",function(e){
                   e.target.style.backgroundColor="pink";
               });
           }
       </script>