BOM事件的重点——之转生在异世界学前端

任何一人一人

已于 2024-04-16 09:12:36 修改

阅读量2.5k

点赞数 69

文章标签：前端 javascript 开发语言

于 2024-04-14 13:50:23 首次发布

本文链接：https://blog.csdn.net/duyan0828/article/details/137741065

版权

本文详细介绍了JavaScript中的各种事件源、事件类型、事件处理程序以及它们之间的关系，涵盖了鼠标事件、表单事件、键盘事件、窗口事件等内容，并讲解了事件的传递、阻止冒泡、事件委托和元素属性等关键概念。

摘要由CSDN通过智能技术生成

每个事件都有事件源，事件类型，事件处理程序

事件源指触发事件的元素，事件类型值什么事件，事件处理程序指事件触发要执行的代码

每一个事件类型都有一个事件对象，事件对象是事件源触发产生的对象

事件对象其实指的是事件类型本身，事件对象要放在处理函数的形参中

        box.onclick = function (e) {
            console.log(e);//onclick下的所有属性方法
            console.log(e.target);//box
            //target是onclick的一个属性, 指向触发事件的事件源元素
        }

鼠标事件

onmouseover鼠标刚要进入元素时触发

onmouseenter鼠标完全进入元素时触发

onmouseover和onmouseenter的区别

前者是进入边框也会触发，后者完全进入元素才会触发冒泡事件只会发生在onmouseover不会发生在onmouseenter，一般情况使用onmouseenter不使用over

onmousemove鼠标在元素上移动时触发

onmouseout鼠标刚要离开元素时触发

onmouseleave鼠标完全离开元素时触发

onmouseout如果有嵌套的子元素进入子元素也会触发，onmouseleave不会触发

onmousedown鼠标按下时触发 onmouseup鼠标弹起时触发

onclick鼠标单机时触发 ondblclick鼠标双击时触发

鼠标滚轮被滚动时触发

onmousewheel触发对象是浏览器窗口window/body/document

        window.onmousewheel=function(){
            e.wheelDeltaY是滚轮滚动的高度
            正值为向上滚动
            负值是向下滚动
        }

onscroll鼠标在元素上滚动时触发，触发对象是所有元素

oncontextmenu鼠标右击触发的事件一般用于清除系统菜单

e.clientX e.clientY鼠标点击光标的坐标

表单事件

orchange内容发送改变时发生的事件最终结果发送改变才触发

onfocus获取焦点时发生的事件

onblur失去焦点时发生的事件

oninput输入事件，只要输入就会发生，实时触发

onsumbit表单提交事件

onsumbit绑定的对象是一个from表单

只针对于标准的from表单，点击提交按钮就会触发from表单的事件

onreset表单重置事件（清除表单数据）

        from.onsumbit = function (e) {
            e.preventDefault();//阻止一个事件的默认效果
            // from表单的提交事件默认刷新页面
        }

键盘事件

onkeydown键盘按下时触发

onkeypress键盘按着不动时触发

onkeyup键盘按键弹起时触发

keyCode键盘编码值

每次按下按键都会经历一次三个事

this指向问题

构造函数中this指向当前实例化对象

普通函数中this指向window

对象中this指向当前方法所属的对象

事件中this指向当前事件的事件源

窗口事件

onresize监听当前窗口页面大小的变化

innerHeight当前页面高度

innerWidth当前页面宽度

onload 文档及其资源文件都加载完成时触发

onunload页面关闭时触发，一般用来清除换成和定时器

注册事件和移除事件

注册事件通过addEventListener方法注册事件处理程序

        box.addEventListener("事件类型", 事件处理函数);
        box.addEventListener("click", function () {
            console.log("注册单机事件");
        })

移除事件

注册事件和移除事件一般配套使用

使用移除事件时注册事件的处理函数要单独创建再用形参调用

        function fn() {
            console.log("注册事件");
        }
        box1.addEventListener("click", fn)//参数这里调用不加括号

removeEventListener移除事件

        box.onclick = function () {
            box1.removeEventListener("click", fn);
            box.onclick = full;
            // 给addEventListener()注册的事件移除时需要用移除事件
            // 如果是获取的元素可以给目标事件赋值为空
        }

事件的传递过程是从外到内获取元素，事件绑定目标和冒泡阶段

并不是所有事件都能冒泡

事件捕获

addEventListener("事件类型","事件处理函数","boolean是否捕获");

true是捕获阶段，默认是false冒泡阶段

添加true后会先运行加true的事件再运行冒泡事件

默认顺序是冒泡事件从内到外

阻止冒泡

阻止事件传播e.stopPropagation();

事件委托

将原本绑定再子元素的事件绑定在父元素上

事件委托又叫事件代理，用来提升代码效率

事件获取元素索引

        var li=document.getElementsByTagName("li");

        for(var i=0;i<li.length;i++){

            // li[i]对象

           // 给dom对象添加自定义属性

            li[i].a=i;

            li[i].onclick=function(e){

               console.log(i);//4

               console.log(li[i]);//因为点击之前i已经是4，索引不能这样写

                console.log(this.a);

            }

         }

mouseEvent鼠标属性

clientX相对于浏览器可视区的x坐标，浏览器左上方为坐标原点

clientY相对于浏览器可视区的x坐标，浏览器左上方为坐标原点

pageX,pageY

整个页面被卷去的body长度,相对于文档区域左上角

screenX,screenY

点击位置距离当前电脑屏幕的距离

offsetX,offsetY

相对于事件源的x,y坐标(光标相对于自身盒子内侧的坐标，不包含边框)

小盒子随鼠标移动

        document.onmousemove = function (e) {

            box.style.left = e.clientX + "px";

            box.style.top = e.clientY + "px";

        }