事件对象(集合)

1. 概述

        1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看

        2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数

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

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

        5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;

 

什么是事件对象 :

 var div = document.querySelector('div');

        div.onclick = function(e) {

                console.log(e);

　　  }

e 就是一个事件对象

 

 

 

事件对象里的属性

代码示例 : 

 var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);

        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
                // 我们给ul 绑定了事件  那么this 就指向ul  
                console.log(this);
                console.log(e.currentTarget);

                // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
                console.log(e.target);

        })

 

 

阻止事件冒泡 :

e.stopPropagation();       // stop 停止  Propagation 传播

e.cancelBubble = true;    // 非标准 cancel 取消 bubble 泡泡

以上两个都可以  但开发常用 e.stopPropagation()

不考虑兼容性要求掌握 e.stopPropagation()

 

事件委托 :

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

事件委托的原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。( 重点 )

以上案例:给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上,ul有注册事件，就会触发事件监听器。

事件委托的作用

我们只操作了一次DOM，提高了程序的性能。

 

    <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('知否知否，点我应有弹框在手！');
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';


        })
    </script>

 

如何不让别人复制文本 : 

    我是一段不愿意分享的文字
    <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
            })
            // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();

        })

    </script>

 

鼠标事件对象 : 

event 对象代表事件的状态, 跟事件相关的一系列信息的集合. 现阶段我们主要是用鼠标事件对象

MouseEvent 和键盘事件对象 KeyboardEvent .

 

师表事件对象的常用方法 :

 

 

代码示例 :

        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);

        })