JS-事件 – 小飞侠

注册事件

注册事件俩种方式

传统方式如onclik，具有

唯一性

，无兼容性问题，一个元素只能注册一个注册事件。
方法监听：一个元素可以注册多个元素注册事件。
eventTarget.addEventListener()
方法将指定的监听器注册到 eventTarget（btn）上，当该对象触发指定的事件时，就会执行事件处理函数。

    //IE9
    btn.addEventListener('click',function(){})
    //IE678
    btn.attacheEvent('onclick',function(){})

DOM事件流

事件流：描述的是从页面中接收时间的顺序
事件从发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
事件流三个阶段：捕获阶段、当前目标阶段、冒泡阶段
事件冒泡：事件开始时具体的元素接收、然后逐级向上传播到DOM最顶层节点的过程
事件捕获：由DOM最顶层节点开始，然后逐级向下传播到最具体的元素的过程。
我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。
冒泡和捕获阶段：如果addEventListener 第三个参数是 false 或者省略。

 <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // onclick 和 attachEvent（ie） 在冒泡阶段触发
        // 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 
        // son -> father ->body -> html -> document
        var son = document.querySelector('.son');
		// 给son注册单击事件
        son.addEventListener('click', function() {
            alert('son');
        }, false);
		// 给father注册单击事件
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
		// 给document注册单击事件，省略第3个参数
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

事件对象

事件对象

：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。
比如：谁绑定了这个事件。鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
div.onclick = function(event)
：event就是事件对象。
事件对象的兼容性处理。在 IE6~8 中，需要到 window.event 中获取查找。
event = event || window.event;
event时IE9的、window.event时IE678的。

事件对象

在这里插入图片描述
– 如e.prventDefault()。可以防止超链接跳转。等于return false或者e.returnValue。

this和event.target的区别

    <ul>
        <li>12</li>
    </ul>

this 是事件绑定的元素（绑定这个事件处理函数的元素比如肯定是ul）。this类似于currentTarget。
e.target 是事件触发的元素，点击了哪个元素就是哪个元素（比如可能是ul或者li）。

如何阻止冒泡？

从儿子到它的每一个父亲添加e.stopPropagation();

    <div class="father">
        <div class="son">son儿子</div>
    </div>
    <script>
        var son = document.querySelector('.son');
		// 给son注册单击事件
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 传播
            window.event.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
        }, false);

        var father = document.querySelector('.father');
		// 给father注册单击事件
        father.addEventListener('click', function() {
            alert('father');
        }, false);
		// 给document注册单击事件
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

冒泡的好处：事件委托

事件委托：把事情委托给别人，代为处理。

事件委托的原理

（重点）

给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。

事件委托的作用

（重点）

我们只操作了一次 DOM ，提高了程序的性能。动态新创建的子元素，也拥有事件。

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

常用的鼠标事件

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

鼠标事件对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JN3gMgOs-1589260841928)(images/1551173103741.png)]

获取鼠标在页面的坐标

    <script>
        // 鼠标事件对象 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);

        })
    </script>

案例：跟随鼠标的天使

图片不占位置且移动：用绝对定位。
为了鼠标在图片中间，所以要减去宽度和高度一半。
必须要给x加px单位、并且给css中一个top:2px。

    <img src="images/angel.gif" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
        	// 1. mousemove只要我们鼠标移动1px 就会触发这个事件
        	// 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 
            // 把这个x和y坐标做为图片的top和left 值就可以移动图片
        	var x = e.pageX;
        	var y = e.pageY;
        	console.log('x坐标是' + x, 'y坐标是' + y);
        	//3 . 千万不要忘记给left 和top 添加px 单位
        	pic.style.left = x - 50 + 'px';
        	pic.style.top = y - 40 + 'px';
    	});
    </script>

原文链接：https://blog.csdn.net/qq_42964711/article/details/106075060