events_stages_current history history_long的区别 event和match的区别

1.事件对象

        event 就是一个事件对象，写在侦听函数的小括号里面，当作形式参数来看。事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数。

        事件对象是我们事件的一系列相关数据的集合，跟事件相关，比如：鼠标点击里面就包含了鼠标的相关信息，鼠标坐标等，如果是键盘事件里面就包含键盘事件的信息，可以判断用户按下了那个键。

        这个事件对象我们可以自己命名，比如：event、evt、e

<div id="div1"></div>
<script>
    var div1 = document.getElementById('div1');
//   div1.onclick = function (event) {
//         console.log(event);     // 打印得到PointerEvent
//   }
    div1.addEventListener('click', function(e){
        console.log(e); // 打印得到PointerEvent
    })
</script>

                

 

   e.target和this区别

<div id="div1"></div>
<ul>
    <li>1</li>
    <li>2</li>
</ul>
<script>
    var div1 = document.getElementById('div1');
    // 1. e.target 返回的是触发事件的对象（元素）
    // 2. this 返回的是绑定事件的对象（元素）
    div1.addEventListener('click',function(e) {
        console.log(e.target);  // <div id="div1"></div>
        console.log(this);      // <div id="div1"></div>
    })
    // 区别：e.target点击了那个元素，就返回这个元素 this 那个元素绑定了这个点击事件 就返回谁
    var ul = document.querySelector('ul');
    ul.addEventListener('click',function(e) {
        // 指向我们点击的那个对象 谁触发这个事件 就指向谁
        console.log(e.target);  // <li>..</li>  点击li 
        // 我们给ul绑定了事件 那么this就指向ul
        console.log(this);      // <ul>...</ul>
        // 跟this有个非常相似的属性 currentTarget
        console.log(e.currentTarget);
    })
</script>

        返回事件的类型

<div id="div1"></div>
<script>
    // 返回事件类型
    var div1 = document.getElementById('div1');
    div1.addEventListener('click', fun);
    div1.addEventListener('mouseover', fun);
    div1.addEventListener('mouseout', fun);
    function fun(e) {
        console.log(e.type);
    }
</script>

        阻止默认事件

<a href="http://www.baidu.com">百度</a>
<script>
    // 阻止默认行为（事件） 比如让连接不跳转或者提交按钮不提交
    var a = document.querySelector('a');
    // a,addEventListener('click', function (e) {
    //     e.preventDefault();  // 点击百度不跳转
    // })
    // 利用return false也能阻止默认行为 特点：return后面的代码不执行了，
    // 而且值限于传统的注册方式（DOM0事件处理程序）
    a.onclick = function() {
        return false;
    }

        阻止事件冒泡

<div id="father">
    <div id="son">son</div>
</div>
<script>
    var son = document.getElementById('son');
    son.addEventListener('click', function (e) {
        alert('son');
        e.stopPropagation();  // 防止冒泡
        e.cancelBubble = true;  // 非标准  cancel 取消  bubble 泡泡
    },false);
    var father = document.getElementById('father');
    father.addEventListener('click', function (e) {
        alert('father');
    },false);
</script>

2.事件委托

        事件委托也称为事件代理，在jQuery里面称为事件委派。

        事件委托就是当事件触发时，把要做的事委托给父元素（或父元素的父元素）来处理。也就是：利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作。使用事件委托技术能让你避免对特定的每个节点添加事件监听器。（不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。）

        作用：减少dom操作浏览器的重排和重绘,并且新添加的元素也是有事件的

<ul>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
</ul>
<script>
    // 给父节点添加侦听器 利用事件冒泡影响每一个子节点
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function() {
        alert('hello')
    })
</script>

3. 常用鼠标事件

        

         禁止鼠标右键菜单

不能复制的文字
<script>
    // contextmenu 禁用右键菜单
    document.addEventListener('contextmenu', function(e) {
        e.preventDefault();
    })
</script>

        禁止选中文字

不能复制的文字
<script>
    // contextmenu 禁用右键菜单
    document.addEventListener('selectstart', function(e) {
        e.preventDefault();
    })
</script>

        获取文字在页面的坐标

<script>
    // MouseEvent 鼠标事件对象
    document.addEventListener('click', function(e) {
        // 鼠标在可视区的x坐标
        console.log(e.clientX); 
        // 鼠标在可视区的y坐标    
        console.log(e.clientY);
        // 鼠标在页面文档的x坐标
        console.log(e.pageX);
        // 鼠标在页面文档的y坐标
        console.log(e.pageY);
    })
</script>

4.常用键盘事件

<script>
    // keyup 按键弹起的时候触发
    document.addEventListener('keyup', function () {
        console.log('我弹起来了');
    })
    // keydown 按键按下触发
    document.addEventListener('keydown', function() {
        console.log('我按下了');
    })
    // keypress 按键按下触发 不识别功能键 比如ctrl shift
    document.addEventListener('keypress', function() {
        console.log('我按下了');
    })
    // 三个执行事件顺序： keydown - keypress - keyup
</script>