JavaScript Web API第四天

1DOM的核心总结

文档对象模型（DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过这些接口可以改变网页的内容、结果和样式。
对于JavaScript，为了使JavaScript操作HTML，JavaScript就有了一套自己的DOM编程接口。
对于HTML，DOM是HTML形成一棵DOM树，包含文档、元素、节点

关于DOM，我们主要针对元素操作，主要有创建、增、删、改、查、属性操作、事件操作。

1.1创建

1、document.write
2、innerHTML
3、createElement

1.2增加

1、appendChild
2、insertBefore

1.3删

removeChild

1.4改

1、修改元素属性：src、href、title等
2、修改普通元素内容：innerHTML、innerText
3、修改表单元素： value、type、disabled等

1.5查

1、DOM提高的API方法：getElementById、getElementByTagName不推荐
2、H5提供新方法：querySelector、querySelectorAll 推荐
3、利用节点操作获取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling）推荐

1.6属性操作

主要针对自定义属性
1、setAttribute：设置dom的属性值
2、getAttribute：得到dom的属性值
3、removeAttribute：移除属性

2事件高级

2.1注册事件（2种方式）

给元素添加事件，称为注册事件或者绑定事件
注册事件有两种：传统方式和监听注册方式
传统：利用on开头的事件
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数

监听注册方式：
W3C标准，推荐使用
addEventListener（）是一个方法
IE9之前的IE不支持，可用attachEvent()代替
特点：同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行

2.2事件监听

addEventListener()事件监听（IE9以后支持）

eventTarget.addEventListener(type,listener[ , useCapture])

type:事件类型字符串，如click,mouseover
listener:事件处理函数，事件发生时，会调用该监听函数
userCapture:可选参数，是一个布尔值，默认为false

attacheEvent()事件监听（IE678支持）

eventTarget.attachEvent(eventNameWthOn,callback)
eventNameWthOn:事件类型字符串，比如onclick,onmouseover
callback:事件处理函数，当目标触发事件时回调函数被调用

事件监听兼容性解决方案：

2.3删除事件（解绑事件）

传统注册方式

eventTarget.onclick = null

方法监听注册方式

1、eventTarget.removeEventListener(type,listener[ , useCapture])
2、eventTarget.detachEvent(eventNameWthOn,callback)

2.4DOM事件流

事件流描述的是页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

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

DOM事件流会经历3个阶段：
1、捕获阶段
2、当前目标阶段
3、冒泡阶段

事件发生时会在元素节点之间按照特定的顺序传播，这个过程即DOM事件流
注意：
1、JS代码中只能执行捕获或者冒泡其中的一个阶段
2、onclick和attachEvent只能得到冒泡阶段
3、eventTarget.addEventListener(type,listener[ , useCapture])第三个参数如果是true，表示事件捕获就当调用事件处理程序，如果是false（默认），表示在时间冒泡阶段调用事件处理程序
4、实际开发中我们很少使用事件捕获，更关注冒泡
5、有些事件没有冒泡，比如：onblur, onfocus, onmouseenter, onmouseleave
6、时间冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件。

2.5事件对象

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。

事件对象的使用

事件触发发生时会产生事件对象，并且系统会以实参的形式传给事件处理函数。
在事件处理函数中声明1个形参来接受事件对象。

事件对象的属性和方法

事件对象属性方法	说明
e.target	返回触发事件的对象 标准
e.srcElement	返回触发事件的对象 非标准 ie6-8使用
e.type	返回事件的类型，如click 不带on
e.cancelBubble	该属性阻止冒泡 非标准 ie6-8使用
e.returnValue	该属性 阻止默认事件（默认行为） 非标准 ie6-8使用
e.preventDefault()	该方法阻止默认事件（默认行为） 标准
e.stopPropagation()	阻止冒泡 标准

e.target和this的区别

this是事件绑定的元素（绑定这个事件处理函数的元素）
e.target是事件触发的元素

2.6阻止默认行为

<a href="http://www.baidu.com">百度</a>

<script>
    let a = document.querySelector('a')

    a.addEventListener('click',function(event){
        event.preventDefault()
    })
</script>

2.7阻止事件冒泡

<div class="father">
    <div class="son">son盒子</div>
</div>

<script>
    //冒泡阶段  son-->father-->body-->html-->document
    //onXXX事件   attachEvent    addEventListener(,,false)

    let son = document.querySelector('.son')
    son.addEventListener('click', function(e) {
        alert(111);
        e.stopPropagation(); // stop 停止  Propagation 传播
        window.event.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
    }, false);

    let father = document.querySelector('.father')
    father.onclick = function(){
        alert(222)
    }

    document.onclick = function(){
        alert(333)
    }

2.8事件委托

把事件委托给别人，代为处理。
原理：给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。
作用：只操作了一次DOM，提高了程序的性能
动态新创建的子元素，也拥有事件。

<ul>
    <li>小明</li>
    <li>小丽</li>
    <li>小红</li>
</ul>

<script>
    let ul = document.querySelector('ul')

    ul.addEventListener('click',function(e){
        e.target.style.backgroundColor = 'tomato'
    })
</script>

3常用鼠标事件

案例：禁止选中文字和禁止右键菜单

这是一段文字

<script>
    document.addEventListener('contextmenu',function(e){
        e.preventDefault();
    })

    document.addEventListener('selectstart',function(e){
        e.preventDefault();
    })