013day 鼠标进出，事件冒泡，DOM2兼容写法，全选反选不选，红米价格购物练习

一、事件介绍
事件：页面中的对象或者是页面的用户的一些行为。
事件的分类：
1：鼠标事件
单击：click
双击：dbclick
鼠标移入：mouseenter
鼠标移出：mouseout
滚轮
2：键盘事件
键盘按键按下：keydown、keypress
按键松开：keyup
3：文档事件：
文档加载完成 load
表单内容改变：change
表单获得焦点
失去焦点
事件的处理方式：通常给事件绑定触发函数，事件发生的时候会执行绑定在事件对象上的函数。

二、事件的处理方式
文档中的事件的处理方式：
三种：
1：直接在标签内添加属性，来绑定函数。【HTML标签事件处理程序】。
2：DOM0级事件处理程序。
3：DOM2级事件处理程序。
第一种事件处理程序。
语法： 在开始标签内添加属性 on+事件名称 = "绑定的函数()"4
绑定的函数() : 可以是js的内置函数，也可以是自定义的函数，
还可以同时多个函数执行，多个函数的话使用分号分隔。
this：在HTML标签事件处理中作为实参使用，this代表了事件作用到的对象。
js的关键字。
补充：可以通过给元素添加属性的方式去添加事件。
可以通过删除属性的方式去删除事件。
第一种事件处理程序的优点和缺点
优点：代码实现简单。
缺点：事件和标签耦合在了一起，不利于后期代码的维护。

<h1 onclick="alert('hello');alert('world');">我是h1标签</h1>
<h2 onclick="show(this)">下课之后看完手机归还</h2>
<span onclick="show(this)">好好学习天天向上</span>

<script>
    // 打印 事件作用对象中的内容。
    //obj 事件发生到谁身上。
    function show(obj) {
    
        console.log (obj.innerHTML);
    }

    //通过给标签添加属性，是否可以实现添加事件？
    var h1 = document.createElement("h1");
    h1.innerHTML = "拉面的事儿我还记着";
    h1.setAttribute("onclick","show(this)");
    document.body.appendChild(h1);

    //删除span上的事件
    var span = document.querySelector("span");
    span.removeAttribute("onclick");

</script>

三、练习
在页面中添加span标签，内容随意。
每次点击span中的内容，会随机的在span中显式一个随机数。[0-9]

<script>
    var span = document.createElement("span");
    span.innerHTML = "9";
    span.style.fontSize = "100px";
    span.setAttribute("onclick","show(this)");

    document.body.appendChild(span);

    function show(obj) {
    
        var num = ~~(Math.random()*10);
        obj.innerHTML  =num;
    }
</script>

四、DOM0级事件处理程序（鼠标进入，鼠标出去）
第二种给元素添加事件处理程序方式：DOM0级事件处理程序
语法：
元素对象.on+事件名称 = 匿名函数;
元素对象.on+事件名称 = 有名函数的名字;
删除事件：
元素对象.on+事件名称 = null;
让元素事件处理程序指向 空 null，什么都不执行。
this在DOM0级中的使用：
this可以在事件处理函数中直接使用。
this 代表了当前响应事件的元素对象。也就是当前对象。
注意：
1：如果给同一个元素先后使用DOM0级事件处理程序针对同一个事件绑定多个处理函数，那么后添加的会覆盖前面的。
2: 通过DOM0级事件处理程序，可以给同一个元素添加不同的多个事件处理程序。互不影响。
3：可以通过中括号的形式给对象绑定事件处理程序。不太建议的语法。
4: DOM0级事件处理程序，没有兼容问题。使用比较多。

<ul>
    <li>1111111</li>
    <li>2222222</li>
    <li>3333333</li>
    <li>4444444</li>
    <li>5555555</li>
</ul>

<script>
    //创建一个div，添加一个单击事件。打印hello
    var div = document.createElement("div");
    div.innerHTML = "上课的时候别看手机";
    div.style.border = "solid 1px";
    div.style.width = "300px";
    div.style.height = "300px";
    div.style.backgroundColor  ="orange";
    document.body.appendChild(div);

    //dom0级事件处理程序的添加
    //匿名函数
    div.onclick = function () {
    
        console.log ("hello");
    };
    //有名函数的名字
    div.onclick = show;
    function show() {
    
        console.log ("world");
    };
    //给div添加一个其他的事件
    div.onmouseover = function () {
    
        console.log ("我进来了！");
    }
    div.onmouseout = function () {
    
        console.log ("我又出去了！");
    }
    //删除div上绑定的某些事件
    div.onclick = null;
    div.onmouseout = null;
    //是否可以使用中括号添加事件？？
    //可以的。不太建议的语法。
    div["onmouseout"] = function () {
    
        console.log ("我又出去了！");
    };

    //给上面的每个li绑定一个单击事件
    //获得所有的li
    var lis = document.querySelectorAll("li");
    for (let i = 0; i < lis.length; i++) {
    
        //给每个li添加单击事件
        lis[i].onclick = function () {
    
            console.log (this.innerHTML);
        };
    }

</script>

五、DOM2级事件处理程序
元素对象的事件处理程序：DOM2级事件处理程序。
添加语法：
元素对象.addEventListener(参数1，参数2，参数3)
参数1：事件名称, 不需要添加 on
参数2：事件处理函数，匿名函数，或者是有名函数的名字。
参数3：事件流：false：事件冒泡，true：事件捕获
默认是事件冒泡。
删除事件：
元素对象.removeEventListener(参数1，参数2，参数3)
参数和添加的语法一致。
第二个参数必须是有名函数的名字，不能使用匿名函数。
注意：
1：对同一个元素同一个事件，使用DOM2级事件处理程序绑定多个函数，不会出现覆盖的情况。
DOM0后绑定的会覆盖前面的。
2：this关键在，在DOM2级事件处理函数中可以直接使用。代表了当前事件响应的元素对象。和
DOM0是一样的。
3: DOM2 和 DOM0 可以同时存在对同一个事件绑定事件处理程序。
4：使用DOM2级删除事件的时候，三个参数必须和添加的时候一致。必须使用有名函数的名字。
5：DOM2级事件处理程序存在兼容问题。低版本的IE不支持（IE8及其以前的版本）。

 <