DOM——javascript事件（类型，触发）

1、事件是有三部分组成事件源事件类型事件处理程序我们也称为事件三要素

    //(1) 事件源事件被触发的对象——谁按钮
 var btn = document.getElementById('btn');
    var text = document.querySelector('span');
    var p = document.querySelector('p');
   
    //(2) 事件类型——如何触发什么事件比如鼠标点击(onclick) 还是鼠标经过还是键盘按下
    //(3)事件处理程序——通过函数赋值的方式完成
    btn.onclick = function() {
            alert('点秋香');
            text.innerText = '2023年'; //修改元素内容
        }

2、注册事件

    // 传统注册方法——on开头的，onclick，具有唯一性，即同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数
    // addEventListener(),,特点:同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行
    var btn = document.querySelectorAll('button');
    btn[0].onclick = function() {
        alert(11);
        btn[0].onclick = null; //移除事件
    }
    btn[1].addEventListener('click', function() {
        alert(123);

    })
    btn[1].addEventListener('click', fn); //注意fn不需要加小括号

    function fn() {
        alert('right');
        btn[1].removeEventListener('click', fn); //移除事件
    }

3、事件解绑，，，，先有（注册）事件才能解除（上面）

4、事件对象

    /*1. event 就是一个事件对 象写到我们侦听函数的 小括号里面当形参来看;
      2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递參数;
      3.事件对象是我们事件的一系列相关数据的集合,跟事件相关的
        比如鼠标点击里面就包含了鼠标的相关信鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息比如判断用户按下了那个键;
      4.这个事件对象我们可以自己命名比如event、evt、e;
      5.事件对象也有兼容性问题e = e||window. event. */

    btn[2].addEventListener('click', function(e) {
        console.log(e);
    })

    /* e.target——返回触发事件的对象标准
    e.srcElement——返回触发事件的对象，非标准,ie6-8使用
    e.type——返回事件的类型，比如click mouseover不带on
    e.cancelBubble——该属性阻止冒泡，非标准,ie6-8使用
    e.returnValue——该属性阻止默认事件(默认行为)，非标准,ie6-8使用，比如不让链接跳转
    e.preventDefault()——该方法阻止默认事件(默认行为)，标准，比如不让链接跳转
    e.stopPropagation（）——阻止冒泡标准 */

5、鼠标事件

    /* e.clientX——返回鼠标相对于浏览器窗口可视区的X坐标；
    e.clientY——返回鼠标相对于浏览器窗口可视区的Y坐标；
    e.pageX——返回鼠标相对于文档页面的X坐标1E9+支持；
    e.pageY——返回鼠标相对于文档页面的Y坐标IE9+ 支持；
    e.screenX——返回鼠标相对于电脑屏幕的X坐标；
    e.screenY——返回鼠标相对于电脑屏幕的Y坐标； */

    /* 事件类型
    onclick-----------鼠标点击左键触发
    onmouseover-----------鼠标经过触发
    onmouseout-----------鼠标离开触发
    onfocus------------获得鼠标焦点触发
    onblur--------------失去鼠标焦点触发
    onmousemove-----------鼠标移动触发
    onmouseup---------------鼠标弹起触发
    onmousedown-----------鼠标按下触发
    oncontextmenu---------右键菜单 （和e.preventDefault()一起用，用来禁止右键菜单）
    onselectstart-----------选中文字（和e.preventDefault()一起用，用来禁止选中文字）*/

6、键盘事件

    /*     onkeyup——某个键盘按键被松开时触发(字先落)
    onkeydown——某个键盘按键被按下时触发
    onkeypress——某个键盘按键被按下时触发但是它不识别功能键 比如ctrl shift 箭头等 
    执行顺序：keydown--keypress--keyup

    e.keyCode    可以得到按下键的ASCII值
    1.我们的keyup和keydown事件不区分字母大小写 a和A得到的65
    2.我们的keypress 事件区分字母大小写a和A得到的都是65
    */