webapi-方法监听-事件流-事件委托-常用鼠标键盘事件

晚风吹耶yep

已于 2022-04-23 16:26:48 修改

阅读量488

点赞数

分类专栏： js基础文章标签： javascript

于 2022-04-20 12:04:54 首次发布

本文链接：https://blog.csdn.net/m0_64492064/article/details/124293404

版权

js基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

事件高级

事件注册：给元素添加事件或绑定事件

注册事件的方式有两种：传统注册方式和方法监听注册方式

1.传统的注册事件的方式特点

事件类型以on开头
唯一性
同一个元素的同一个事件只能绑定一次。多了会被下面的覆盖

2.方法监听注册方式特点

是W3c推荐的
addEventListener()他是一个方法
IE9之前不支持
统一元素同意事件可以注册多个监听器。
按照注册的顺序执行。

1.方法监听的语法：

  btn.addEventListener('事件类型', function(){

执行内容
});

2.解绑事件


<body>
    <button>按钮</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', fn);

        function fn() {
            alert('我只出现一次');
            btn.removeEventListener('click', fn)

        }
    </script>
</body>

3.Dom事件流

事件流描述的是从页面中接收事件顺序。

捕获阶段（由上往下传播）
目标阶段（找到目标）
冒泡阶段（由下往上反应）

4.事件对象

   document.addEventListener('click', function(e) {//e 就是事件对象
            console.log(e.pageX);
        });

我们可以把事件对象看作是一个形参，但是它不需要传递形参。他是事件的一系列相关数据的集合，跟事件相关（‘click’）如鼠标点击里会包含鼠标的相关信息，坐标等等

5.this和target的区别

target返回的是触发事件的对象，通俗来说就是点击的对象。

this是返回的绑定事件的对象。

6.阻止默认事件

e.prevenDefult()

 var as = document.querySelector('a');
        as.addEventListener('click', function(e) {
            e.preventDefault();
           
        })

7.阻止冒泡

e.stopperpropagation ()


<body>
    <div class="father">
        <div class="son">son儿子</div>
    </div>
    <script>
        // 常见事件对象的属性和方法
        // 阻止冒泡  dom 推荐的标准 stopPropagation() 
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 传播
            e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
        }, false);

        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

8.事件委托

概念：不是每个子节点单独设置事件监听，而是事件监听器设置在他们的父亲身上。然后利用冒泡原理影响每个子盒子。

注意：在事件委托里，可以用e.target获取当前点击的元素。

   <!-- 事件委托 只给ul设置的点击弹出   但当我点击li的时候也会弹出 这就是利用里冒泡  -->
    <!-- 就是当我的子元素都需要这个属性的时候 我可以把这个属性嫁给他的父亲 让他向下传播 就不用每一个 li都绑定事件了 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
        var ul = document.querySelector('ul');
        var lis = document.querySelectorAll('li');

        ul.addEventListener('click', fn);

        function fn(e) {
            // alert(`哈哈哈,`)
            for (var i = 0; i < lis.length; i++) {
                lis[i].style.background = ''
            }
            e.target.style.background = 'pink'
        }
    </script>

9.常用的鼠标事件

1.禁止鼠标右键菜单

contextmenu 配合阻止默认事件使用

2.禁止鼠标选中

selectstart 配合阻止默认事件使用

<body>
    <div>哈哈哈我是一段不能被选中的文字</div>
    <script>
        //1.禁用鼠标右键菜单 contextmenu
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
            })
            //2.禁止鼠标选中 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })
    </script>