脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript DOM事件

JavaScript中DOM操作常用事件总结

 更新时间：2022年04月18日 15:22:53   作者：小猪弟  
这篇文章主要为大家详细介绍了JavaScript中常用的几个DOM事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

上一篇聊了如何同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区别

  • 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事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript仿京东放大镜效果

    JavaScript仿京东放大镜效果

    这篇文章主要为大家详细介绍了JavaScript仿京东放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • js实现封装jQuery的简单方法与链式操作详解

    js实现封装jQuery的简单方法与链式操作详解

    这篇文章主要给大家介绍了关于js实现封装jQuery的简单方法与链式操作的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 在JavaScript里嵌入大量字符串常量的实现方法

    在JavaScript里嵌入大量字符串常量的实现方法

    在JavaScript文件里嵌入大量字符串常量是经常遇到的事。有时为了省事，就把一些界面的HTML和CSS直接写在JS文件里
    2013-07-07
  • JavaScript Fetch API请求和响应拦截详解

    JavaScript Fetch API请求和响应拦截详解

    这篇文章主要为大家介绍了JavaScript Fetch API请求和响应拦截详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • js 剪切、复制、粘贴功能实现

    js 剪切、复制、粘贴功能实现

    Navigator.clipboard API可以用来访问系统剪贴板，可以实现【剪切、复制、粘贴】功能。该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式，不兼容 IE
    2023-05-05
  • Javascript 判断函数类型完美解决方案

    Javascript 判断函数类型完美解决方案

    在判断函数类型时，我们通常使用typeof方法，一般情况下，它会得到我们所预想的效果。
    2009-09-09
  • 原生JavaScript+LESS实现瀑布流

    原生JavaScript+LESS实现瀑布流

    这篇文章主要介绍了原生JavaScript+LESS实现瀑布流的方法，附上了具体实例，这里推荐给有需要的小伙伴。
    2014-12-12
  • 浅析对JS中方法unshift和push方法的理解

    浅析对JS中方法unshift和push方法的理解

    JavaScript中的`unshift`和`push`方法用于在数组的开始和结尾添加元素,它们会直接修改原数组并返回新的数组长度,本文介绍JS中方法unshift和push方法的相关知识,感兴趣的朋友一起看看吧
    2024-12-12
  • 探讨JavaScript中声明全局变量三种方式的异同

    探讨JavaScript中声明全局变量三种方式的异同

    这篇文章主要介绍了JavaScript中声明全局变量三种方式的异同。变量及变量声明是一门语言最基本的概念，初学者都会很快掌握。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • addEventListener()与removeEventListener()解析

    addEventListener()与removeEventListener()解析

    这篇文章主要为大家详细介绍了addEventListener()与removeEventListener()，用于处理指定和删除事件处理程序操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04

最新评论