事件的原理和event事件

事件的原理

事件的原理有是哪个阶段：
捕获阶段， 目标阶段， 冒泡阶段

从外向内		找到目标  	从内向外	

事件的冒泡

如果有三个元素，三个元素都做监听了，如果容器内的元素被点击，
元素的所有父容器都会接收到点击事件（必须是它所有的父容器都做了侦听），这个就叫做事件的冒泡。
// 触发顺序不同
// 通过阻止冒泡可以和捕获阶段配合，让中间层首先触发事件
// div0.addEventListener(“click”,clickHandler0,false);

    这里的事件回调函数还有第三个参数，一般我们搭页面的时候会将他省略，
    这个叫做是否在捕获阶段触发（不填默认是false）；  
    默认值false，也就是冒泡事件，从内向外，如果是true就会反过来。

第三个参数也可以是对象{once：true}，
这个就是事件仅侦听一次就会被销毁。不会再触发

有点像。removeeventlistenter

为什么要销毁事件呢？因为每次侦听事件都会在堆中储存该事件函数，

如果不再需要该事件触发，

销毁事件时，侦听的对象必须一致，事件触发的函数必须一致。

        once:true  事件仅做一次侦听就会被销毁掉，不会再触发
        div0.addEventListener("click",clickHandler0,{once:true});
        销毁事件侦听  ，因为每次事件侦听都会再堆中存储该事件函数，
        如果不再需要该事件触发时，必须销毁
        销毁事件时，侦听对象必须一致，事件触发的函数必须一致
        div0.removeEventListener("click",clickHandler0);

        事件抛发时，默认是不冒泡
        var evt=new MouseEvent("click",{bubbles:true});
        //设置bubbles可以在事件触发时冒泡
        div2.dispatchEvent(evt);

阻止冒泡

e.stoppropagation()这个方法就是阻止冒泡，
其实就是阻止事件的传递，如果给父元素也不会向下传递

e.cancelbubble=true 这个方法跟上面的一样，只不过是兼容ie浏览器的，我们一般使用上面的方法

所以我们可以通过阻止冒泡可以和捕获阶段配合，让中间层首先触发事件，

关于点击目标事件的对象

event.target，
e.srcelement ，
e.currenttarget，
this 这四个值的概念

前两个是点击的目标对象，点谁就是谁（存在兼容问题，所以有两个）
后两个是侦听对象。这个函数在谁上被侦听，就显示谁（在事件回调函数中，this被重新指向当前事件函数触发时侦听的对象）
如果侦听的对象没有子元素，那this和target就是一样的

事件的委托

当我们在父元素中加入了e.target时，就是把子元素的事件委托给了父元素。这样就不需要每个元素都侦听了

我点击哪个就执行哪条事件，这种情况就叫事件的委托； 将子元素的事件委托给父元素。

事件的区别

早期js没有事件驱动体系，是对象体系完成的，

也就是 div.οnclick=function(){}这个是所有HTMLElement元素的一个属性，
属性是onclick

当点击这个元素时系统会查看这个属性是否有设置函数，如果有，则指向这个函数。

系统事件“HTMLElenment”上描述的所有on事件都是系统默认的触发事件。

（自定义事件，用户制定的事件抛发和接受的都是自定义事件。）

关于函数式变成和面向对象式变成
对象体系触发事件的缺陷：

1.这种触发方式仅支持系统默认的事件，自定义事件不可以使用，
但是可以接受自定义的抛发事件

2.而且如果重新设置函数的时候就会覆盖原来的onclick的值，不能支持执行多个函数事件。
3.当使用对象体系触发，如果多次设置事件后，就会一直掉下去，
这就是回调地狱（匿名函数最容易造成回调地狱）

		这就是一个典型的回调地狱
       / div.onclick=function(){
            console.log("点击了");
            div.ondblclick=function(){
                console.log("双击了");
                div.onmousemove=function(){
                    console.log("鼠标移动了");
                }
            }
        } 

4.不能设置捕获时侦听。

对象体系触发事件的优点： 
1.简单
2.兼容性最好，从第一代浏览器到现在都支持。
3.可以写在行内样式中。onclick=“函数”

注意，当使用html标签中的onclick属性触发事件时，是无法拿到e的，
可以通过window.event拿到，所以我们一般写的时候就是用，e=e||window.event；
	
	函数式编程的缺点：
代码太长，逻辑复杂度很高；代码复杂度越高，学习成本越高。
兼容性差，不支持IE8及以下浏览器
（div.attachEvent,这种方法可以用于ie11以下浏览器，其他浏览器均会报错，包括ie11）

		设置两个onclick点击事件，前一个会被后一个直接覆盖掉
         div.onclick=function(){
            console.log("aaa");
        }
        表示重新设置一个函数覆盖原onclick属性值
        div.onclick=function(){
            console.log("bbb");
        } 
         div.onclick=null;

event事件（简称e事件）

1.change

学习之前先要回忆以下表单标签元素。所有的表单元素都需要有name。

在表单元素中，有一种概念叫聚焦和失焦的概念。

<input type="text" id="user"> <label for="user"> </label>

这个是跟text文本框关联起来，当我鼠标点击这个label的时候，文本框就会聚焦，点击body就会失焦

失焦后会判断原内容的value值是否发生改变，如果改变触发事件

那么change事件是指什么呢？

当元素的值发生改变时，会发生 change 事件。

change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。

做一个简单的案例，列表回收案例

2.select：

主要应用于input和textarea。，表单元素。

3.error:
错误，一般放在预加载中，加载错误时执行

4.load：
加载成功，window.οnlοad=function（），
当页面上所有的东西都加载完的时候，才会加载这个事件，
所以如果页面加载不完这个东西就触发不了

		  所以禁止使用window.onload（我哥把这个事件直接从我代码库里删除了）
		  但是可以用add的形式的回调函数来写load，来完成在js中插入并加载图片。
		  不管获取的是图片的clientwidth，还是offset还是sceoll，
		  都必须图片放在页面上才可以，包括所有的left的top；

预加载的概念

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，
访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。
这对图片画廊及图片占据很大比例的网站来说十分有利，
它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。

以下是一个简单的预加载方法

<div class="hidden">  
    <script type="text/javascript">  
        <!--//--><![CDATA[//><!--  
            var images = new Array()  
            function preload() {  
                for (i = 0; i < preload.arguments.length; i++) {  
                    images[i] = new Image()  
                    images[i].src = preload.arguments[i]  
                }  
            }  
            preload(  
                "http://domain.tld/gallery/image-001.jpg",  
                "http://domain.tld/gallery/image-002.jpg",  
                "http://domain.tld/gallery/image-003.jpg"  
            )  
        //--><!]]>  
    </script>  
</div>

复杂的预加载兼容性会更好，而且可以封装到一个函数中便于我们随时使用

同时还可以用AJAX实现预加载