文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript中DOM操作常用事件总结

2024-04-02 19:55

关注

上一篇聊了如何同JavaScript获得页面元素,而获得页面元素的的目的就是操作这个元素的一行为,而这个行为是通过某个条件进行触发的。而这个一系列在JavaScript中称之为事件。

由此可以看出事件分三个部分:

事件源头: 也就是要操作的元素是谁。

事件类型: 也就是事件触发条件,比如鼠标点击以及鼠标滑过等。

事件处理: 如果触发了这个行为,如何操作,以及操作结果。

常用事件

现在说一下常用的事件,这个不是全部的事件,如果需要了解全部的事件可以看官方文档。

常用的事件有:

事件类型描述
onblur对象失去焦点的时候触发
onfous当获得焦点的时候触发
onclick用户鼠标左键点击的时候触发
ondblclick用户双击时候触发
onchange当对象或者选中区内容改变的时候触发
onkeyup当用户释放键盘按键时候触发(还有两个事件onkeydown和onkeypress)
onload浏览器加载完毕后立即触发
onmouseout当用户将鼠标移出对象范围时触发
onmouseover当用户数鼠标在对象上滑动的时候触发
onselect当当前选择区改变时触发
onunload对象卸载前理解触发

下面演示的时候会有些涉及到涉及到一些属性的变化,可以先不关心而是关系这个事件是如何触发发。后面单独为再写一篇关于属性的修改以及赋值。

演示得到焦点和失去焦点

演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>

</head>
<body>
<!--可以在标签上直接绑定事件类型-->
<label>姓名</label> <input  id="testid" type="text" onfocus="test_foncus()" value="请输入">


<script>
    var element=document.getElementById("testid");
    function test_foncus() {
        if (element.value=="请输入"){
            element.value="";
        }

    }
    // 也可以主页绑定事件类型
    element.onblur=function () {
        console.log(element.value);
        if (element.value==""){
            element.value="请输入";
        }
    }
</script>
</body>
</html>

演示 鼠标划过和离开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
   <style>
       div {
           width: 200px;
           height: 200px;
           background-color: blue;

       }
   </style>
</head>
<body>

<div id="testid"  ></div>

<script>
    var element=document.getElementById("testid");
    element.onmouseover=function () {
      element.style='background-color:pink;';
      }
     element.onmouseout=function () {
      element.style='background-color:blue;';
      }

</script>
</body>
</html>

点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
   <style>
 
   </style>
</head>
<body>

<button id="testid">点击按钮</button>

<script>
    var element=document.getElementById("testid");
    element.onclick=function () {
      confirm("你确定你要点击?")
    }

</script>
</body>
</html>

load加载页面事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>

<div id="testid1"></div>
<hr>
<div id="testid2"></div>
<script>
    var element1=document.getElementById("testid1");
    var element2=document.getElementById("testid2");
    // 一般onload加载是监控的是这个页面的加载所以一般都是window调用
    window.onload=function () {
        element1.innerText="innerText插入";
        element2.innerHTML="<h1>innerHTML插入</h1>"
        
    }
</script>
</body>
</html>

补充 innerText和innerHTML区别

onkeyup 键盘弹起事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>

 <input id="testid" type="text">
<script>
    var element=document.getElementById("testid");
 
    element.onkeyup=function () {
       alert("你在输入内容啊")
    }
    
</script>
</body>
</html>

内容变化事件

演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>

 <input id="testid" type="text">
<script>
    var element=document.getElementById("testid");
    // 到鼠标离开的时候就会变得是否内容修改
    element.onchange=function () {
          alert("你在修改吗?")
    }

</script>
</body>
</html>

选中时触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>

<input id="testid" type="text"  value="点击两次选选择">
<script>

        var element=document.getElementById("testid");
        element.onselect=function () {

          alert(element.value);
        }

</script>
</body>
</html>

到此这篇关于JavaScript中DOM操作常用事件总结的文章就介绍到这了,更多相关JavaScript DOM事件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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