WebAPI事件-CFANZ编程社区

事件作用

做交互功能（什么元素在什么时候做什么事情）

事件三要素

事件源：什么元素

事件类型：在什么时候

事件处理函数

注册事件

点语法：注册一个同名事件

事件源.事件类型 = 事件处理函数

事件源.事件类型 = null
* 语法 : 事件源.事件类型 = 事件处理函数 box.onclick = function (){}
* 最大特点：不能注册多个“同名”事件

addEventLisenter:注册多个同名事件

语法: 事件源.addEvenetListener('事件类型',事件处理函数)

 注册事件有两种语法
            1.点语法：   
                * 语法 : 事件源.事件类型 = 事件处理函数 box.onclick = function (){}
                * 最大特点： 不能注册多个“同名”事件
            
            2.addEventListener() : 用于注册多个 “同名”  事件
                * 语法:  事件源.addEvenetListener('事件类型',事件处理函数)
        
         */

        let box = document.querySelector('#box');

        //1.点语法注册事件
        box.onclick = function(){
            alert('1-我是点语法注册的事件');
        };

        // box.onclick = function(){
        //     alert('2-同名事件： 相同的事件类型');
        // };

        //移除事件 : 变量赋值原理，先销毁旧值，然后存入新值
        // box.onclick = null;

        //2.addEventListener()

        /**
        * @description:注册多个同名事件
        * @param {string} type: 事件类型 不要on :  click  mouseover
        * @param {function} listener: 事件处理函数
        * @param {boolean} 冒泡 false(默认)     捕获：true
        * @return: 
        */
        box.addEventListener('click',function(){
            alert('1-我是addEventListener语法注册的事件');
        });

        box.addEventListener('click',function(){
            alert('2-同名事件： 相同的事件类型');
        });

事件源.addEventListener('事件类型',事件处理函数)

事件源.removeEventListener('事件类型',事件处理函数)

<script>
       

        let box = document.querySelector('#box');

        //1.点语法注册事件
        // box.onclick = function(){
        //     alert('1-我是点语法注册的事件');
        // };

        // box.onclick = function(){
        //     alert('2-同名事件： 相同的事件类型');
        // };

        //移除事件 : 变量赋值原理，先销毁旧值，然后存入新值
        // box.onclick = null;

        //2.addEventListener()

        /**
        * @description:注册多个同名事件
        * @param {string} type: 事件类型 不要on :  click  mouseover
        * @param {function} listener: 事件处理函数
        * @param {boolean} 冒泡 false(默认)     捕获：true
        * @return: 
        */

        let fn = function(){
            alert('1-我是addEventListener语法注册的事件');
        };

        box.addEventListener('click', fn );

        box.addEventListener('click',function(){
            alert('2-同名事件： 相同的事件类型');
        });

        //2.1 移除事件
        /* 细节： 只能移除具名事件，无法移除匿名事件。 */
        box.removeEventListener('click', fn );
    </script>

事件对象：

事件对象：存储与事件相关的数据

存储：用户触发事件，浏览器自动捕捉鼠标（坐标点）和键盘（按键），并且把相关数据存入对象

获取：给事件处理函数添加形参 event | ev | e

事件对象常用属性和方法

e.preventDefault() 阻止默认事件, 常用于a标签和form表单

 <script>
        /* js中有默认事件的标签： a标签 与 form表单
            阻止默认事件行为 ：  e.preventDefault()
                * 实际开发中用的最多的是阻止form表单默认提交(后期服务器课程使用频繁)
        */
       
        let a = document.querySelector('a')
        a.addEventListener('click', function (e) {
            // 阻止默认行为 方法
            e.preventDefault()
        })
    </script>

e.pageX/e.pageY 获取触发点到页面左上角距离，用于盒子跟随鼠标移动

e.key 获取按键字符串，常用于entet键： 'Enter'

e.keyCode 获取按键ASCII码, 常用于enter键 : 13

e.target 获取真正点击的子元素(事件触发源)

e.stopPropagation() 阻止事件流动（冒泡 + 捕获）