当前位置：首页 > 卖家故事 > BOM事件的重点——之转生在异世界学前端

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

时间：2024-04-23 21:15:29 来源：网络cs 作者：往北栏目：卖家故事阅读：

标签：世界转生重点

阅读本书更多章节>>>>

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

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

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

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

        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";        }

元素的offset属性

offsetLeft,offsetTop获取到的是距离父元素左上角的位置//只读

offsetWidth,offsetHeight自身包括padding,边框,内容区的宽高度

offsetParent作为偏移参照点的父元素

client属性

clientLeft,clientTop获取距离父元素左上角的位置

clientWidth,clientHeight不包括边框滚动条，但包括内边距

scroll属性

scrollTop被卷进去的垂直距离

scrollWidth获取内容宽度不包含滚动条

scrollHeight获取内容高度不包含滚动条

window下属性

window.pageXOffset获取当前页面相对于窗口显示区左上角的X位置(页面滚动的距离)

window.pageYOffset获取当前页面相对于窗口显示区左上角的Y位置//只读

window.screenLeft获取浏览器据屏幕左上角的左边距

window.screenTop获取浏览器据屏幕左上角的上边距

window.screen.width记录了客户端显示屏的宽

window.screen.height记录了客户端显示屏的高

window.innerWidth记录了当前窗显示口页面的宽度

window.innerHeight记录了当前显示窗口页面的高度

如果有滚动条，内部包括滚动条宽高度，只读