JavaScript学习的第十六天

最新推荐文章于 2023-12-15 10:05:08 发布

十点差三分️

最新推荐文章于 2023-12-15 10:05:08 发布

阅读量108

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/cs_laomanong/article/details/124491089

版权

***DOM的键盘事件

onkeydown 键盘上的某个按键被按下时触发

    oDown.onkeydown = function (event) {
        console.log("onkeydown事件");
        console.log(event)
    }

onkeyup 键盘上的某个按键被松开时触发

    oUp.onkeyup = function (event) {
        console.log("onkeyup事件");
        console.log(event)
    }

onkeypress 键盘上的某个按键被按下并松开时触发不识别(上下左右 alt ctrl shift backface)

    oPress.onkeypress = function (event) {
        console.log("onkeypress事件");
        console.log(event)
    }

    document.getElementById("submit").onkeydown = function (event) {
        if (event.code == "Enter") {
            console.log("提交");
        }
        console.log(event.code)
    }

***DOM的表单事件

输入事件

oninput 元素获取用户输入时触发

    oForm.oninput=function(event){
        console.log("oninput事件");
        console.log(event);
    }

    aInput[0].oninput = function (event) {
        console.log("oninput事件:" + this.value);
        console.log(event);
        // 发送请求
    }

焦点事件

onfocus 元素获取到焦点时触发

    aInput[1].onfocus = function (event) {
        console.log("onfocus事件");
        console.log(event);
        this.style.borderColor = "yellow"
    }

onblur 元素失去焦点时触发

    aInput[1].onblur = function (event) {
        console.log("onblur事件");
        console.log(event);
        this.style.borderColor = "black"
    }

onreset 表单重置时触发

    oForm.onreset = function (event) {
        console.log("onreset事件");
        console.log(event)
    }

onsubmit 表单提交时触发

    oForm.onsubmit = function (event) {
        console.log("onsubmit事件");
        console.log(event)
    }

onchange 该事件在表单元素的内容改变时触发(<input>,<textarea>,<select>,<keygen>)

    aInput[4].onchange = function (event) {
        console.log("onchange事件:" + this.value);
        console.log(event);
        // 发送请求
    }
    oCitys.onchange = function (event) {
        console.log("onchange事件:" + this.value);
        console.log(event);
    }
    aInput[5].onchange = function (event) {
        console.log("onchange事件:选择了男生");
        console.log(event);
    }
    aInput[6].onchange = function (event) {
        console.log("onchange事件:选择了女生");
        console.log(event);
    }

onselect 用户选择文本时触发(<input>,<textarea>)

    aInput[7].onselect = function () {
        console.log("onselect事件");
        console.log(event);
    }

onsearch 用户向搜索域输入文本时触发(<input type="search">) 按下回车或点击×时

    aInput[8].onsearch = function () {
        console.log("onsearch事件");
        console.log(event);
    }

***DOM的剪贴板事件

oncopy 当用户拷贝元素内容时触发

针对文档中所有的内容

    document.oncopy=function(e){
        console.log("oncopy事件");
        console.log(e)
    }

    oHeader.oncopy=function(e){
        console.log("oncopy事件");
        console.log(e)
        // alert("请登录")
    }

oncut 当用户剪切元素的内容时触发

    oHeader.oncut=function(e){
        console.log("oncut事件");
        console.log(e)
        // alert("请登录")
    }

onpaste 当用户粘贴内容到元素时触发

    document.getElementsByTagName("input")[0].onpaste=function(e){
        console.log("onpaste事件");
        console.log(e)
        // alert("请登录")
    }

onselectstart 当用户选中元素内容时触发

    oText.onselectstart=function(e){
        console.log("onselectstart事件");
        console.log(e)
    }

***DOM的拖拽事件

ondrag 当元素正在拖拽时触发

    oImage.ondrag=function(e){
        console.log("图片正在拖拽");
        console.log(e)
    }

ondragstart 当元素开始拖拽时触发

    oImage.ondragstart=function(e){
        console.log("图片开始拖拽");
        console.log(e)
    }

ondragend 当元素结束拖拽时触发

    oImage.ondragend=function(e){
        console.log("图片拖拽结束");
        console.log(e)
    }

***DOM的打印事件

当前文档进行打印

onbeforeprint 在页面即将开始打印时触发

    document.onbeforeprint=function(e){
        console.log("页面即将进行打印");
        console.log(e)
    }

***DOM的框架事件

窗口生命周期

onabort 图像的加载被中断。 ( <object>)

onbeforeunload 该事件在即将离开页面（刷新或关闭）时触发

onerror 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)

onhashchange 该事件在当前 URL 的锚部分发生修改时触发。URL(统一资源定位符)

    window.onhashchange=function(e){
        console.log("锚点发生了变化");
        console.log(e)
    }

onload 一张页面或一幅图像完成加载。

    window.onload=function(e){
        console.log("窗口文档加载完成");//所有的内容加载完成 包括图片 视频等资源
        console.log(e)
    }

    oImage.onload=function(e){
        console.log("图片加载完成");
        console.log(e)
    }

onunload 用户退出页面。 ( <body> 和 <frameset>)

onready 当文档准备结束时触发

    window.onready=function(e){
        console.log("窗口文档加载完成");//只是文档结构 资源等可能没有加载完成
        console.log(e)
    }

onpageshow 该事件在用户访问页面时触发

    window.onpageshow=function(e){
        console.log("正在访问当前窗口");
        console.log(e)
    }

onpagehide 该事件在用户离开当前网页跳转到另外一个页面时触发

    window.onpagehide=function(e){
        console.log("离开当前窗口");
        console.log(e)
    }

onresize 窗口或框架被重新调整大小。

    window.onresize=function(e){
        console.log("改变窗口大小");
        console.log(e)
    }

onscroll 当文档被滚动时发生的事件。

    window.onscroll=function(e){
        console.log("窗口发生滚动");
        console.log(e)
    }

ononline 该事件在浏览器开始在线工作时触发。

    window.ononline=function(e){
        console.log("浏览器开始在线工作");
        console.log(e)
    }

onoffline 该事件在浏览器开始离线工作时触发

    window.onoffline=function(e){
        console.log("浏览器开始离线工作");
        console.log(e)
    }

***DOM的媒体事件

onabort 事件在视频/音频（audio/video）终止加载时触发。

oncanplay 事件在用户可以开始播放视频/音频（audio/video）时触发。

    oVideo.oncanplay=function(){
        console.log("视频缓冲完成")
    }

oncanplaythrough 事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。

ondurationchange 事件在视频/音频（audio/video）的时长发生变化时触发。

onemptied 当期播放列表为空时触发

onended 事件在视频/音频（audio/video）播放结束时触发。

    oVideo.onended=function(){
        console.log("视频播放结束");
    }

onerror 事件在视频/音频（audio/video）数据加载期间发生错误时触发。

onloadeddata 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。

onloadedmetadata 事件在指定视频/音频（audio/video）的元数据加载后触发。

onloadstart 事件在浏览器开始寻找指定视频/音频（audio/video）触发。

onpause 事件在视频/音频（audio/video）暂停时触发。

    oVideo.onpause=function(){
        console.log("视频暂停播放");
        alert("广告")
    }

onplay 事件在视频/音频（audio/video）开始播放时触发.

onplaying 事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。

onprogress 事件在浏览器下载指定的视频/音频（audio/video）时触发。

onratechange 事件在视频/音频（audio/video）的播放速度发送改变时触发

onseeked 事件在用户重新定位视频/音频（audio/video）的播放位置后触发

onseeking 事件在用户开始重新定位视频/音频（audio/video）时触发。

onstalled 事件在浏览器获取媒体数据，但媒体数据不可用时触发。

onsuspend 事件在浏览器读取媒体数据中止时触发。

ontimeupdate 事件在当前的播放位置发送改变时触发。

onvolumechange 事件在音量发生改变时触发。

onwaiting 事件在视频由于要播放下一帧而需要缓冲时触发。