文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

常用的JavaScript事件有哪些

2023-06-21 23:34

关注

小编给大家分享一下常用的JavaScript事件有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

JavaScript 事件:

事件指的就是当某些组件执行了某些操作后,会触发某些代码的执行。

常用的事件:

属性触发时机
onabort图像加载被中断
onblur元素失去焦点
onchange用户改变域的内容
onclick鼠标点击某个对象
ondblclick鼠标双击某个对象
onerror当加载文档或图像时发生某个错误
onfocus元素获得焦点
onkeydown某个键盘的键被按下
onkeypress某个键盘的键被按下或按住
onkeyup某个键盘的键被松开
onload某个页面或图像被完成加载
onmousedown某个鼠标按键被按下
onmousemove鼠标被移动
onmouseout鼠标从某元素移开
onmouseover鼠标被移到某元素之上
onmouseup某个鼠标按键被松开
onreset重置按钮被点击
onresize窗口或框架被调整尺寸
onselect文本被选定
onsubmit提交按钮被点击
onunload用户退出页面

事件操作

绑定事件

方式一: 通过标签中的事件属性进行绑定。

<body><img id="img" src="https://file.lsjlt.com/upload/202306/21/wue2gi55ku2.jpg"><br/><button id="up" onclick="up()">上一张</button>&nbsp;<button id="down" onclick="down()">下一张</button></body><script>    // 显示第一张    function up() {        let img = document.getElementById("img");        img.setAttribute("src", "https://file.lsjlt.com/upload/202306/21/wue2gi55ku2.jpg")    }    // 显示第二张    function down() {        let img = document.getElementById("img");        img.setAttribute("src", "https://file.lsjlt.com/upload/202306/21/0mvpxjnczov.jpg%3Fw%3D425%26h%3D320&refer=http%3A%2F%2Fpic4.58cdn.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618451421&t=0310ddbd6f7cd840299b10dd314572c8")    }</script>

方式二: 通过 DOM 元素属性绑定。

<body><img id="img" src="https://file.lsjlt.com/upload/202306/21/wue2gi55ku2.jpg"><br/><button id="up">上一张</button>&nbsp;<button id="down">下一张</button></body><script>    // 显示第一张    function up() {        let img = document.getElementById("img");        img.setAttribute("src", "https://file.lsjlt.com/upload/202306/21/wue2gi55ku2.jpg")    }    let s = document.getElementById("up");    s.onclick = up;    // 显示第二张    function down() {        let img = document.getElementById("img");        img.setAttribute("src", "https://file.lsjlt.com/upload/202306/21/0mvpxjnczov.jpg%3Fw%3D425%26h%3D320&refer=http%3A%2F%2Fpic4.58cdn.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618451421&t=0310ddbd6f7cd840299b10dd314572c8")    }    let x = document.getElementById("down");    x.onclick = down;</script>

以上是“常用的JavaScript事件有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯