事件定义
    用户对页面操作的一种行为就是事件

    常用的基本事件
    1.click 元素点击
    2.focus 鼠标获取焦点
    3.blur 鼠标失去焦点
    4.keyup 键盘抬起
    5.keydown 键盘按下
    6.onlaod 加载
    7.resize 浏览器放大或缩小
    8.change 输入框value值变化
    9.load JavaScript程序加载
    10.mouseover 鼠标移入
    11.mouseout 鼠标移出
    12.mousemove 获得鼠标指针在页面中的位置

    事件级别

    dom0级 直接在元素上放入一个事件

    1. <div onclick="fn()" style="margin:10px;border:1px solid #ccc;padding:10px">
    2. hello word
    3. </div>
    4. <script>
    5. function testfn(){
    6. alert()
    7. };
    8. <script>

    dom1级 选择器.事件

    var div = document.getElementsByTagName('div')
    
    div[0].onclick = function(){
      console.log(this)
    }
    

    dom2级 增加了addEventListener 包裹事件 removeEventListener移出事件

    div[0].addEventListener('click',function(){
     console.log(this)
    })
    

    dom1级 和 dom2级 区别

    dom1级 同样一个事件 使用多次 最终执行最后一次 前面的会被覆盖掉

    app.onclick = function(){
      alert(1)
    }
    app.onclick = function(){
      alert(2)
    }
    app.onclick = function(){
      alert(3)
    }
    //print 只打印alert(3)
    

    dom2级 同样一个事件 使用多次 可以执行多次

    var f1 = function(){alert('f1')}
    var f2 = function(){alert('f2')}
    var f3 = function(){alert('f3')}
    
    app.addEventListener('click',f1);
    app.addEventListener('click',f2);
    app.addEventListener('click',f3);
    
    //点击 print alert(1) alert(2) alert(3) 会打印三次