Luke's home Luke's home
首页
  • 前端文章

    • JavaScript
页面
技术
更多
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Luke xiao

K
首页
  • 前端文章

    • JavaScript
页面
技术
更多
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • javascript

    • 基础知识
    • 进阶知识

    • 函数

    • JS HTML DOM

      • Dom简介
      • Dom操作
      • Dom事件
        • onclick
        • onload 和 onunload 事件
        • onchange 事件
        • onmouseover 和 onmouseout 事件
        • onmousedown、onmouseup 以及 onclick 事件
          • onmousedown
          • onmouseup
          • onclick
      • Dom监听
      • DOM 元素 (节点)
      • Dom集合
      • Dom节点列表
    • JS 高级教程

    • 浏览器BOM

    • HTML5新特性

    • CSS3新特性

  • 布局

  • less

  • js库

  • 前端
  • javascript
  • JS HTML DOM
lukexiao
2021-05-01

Dom事件

在发生一些特定时间的时候让html元素进行改变

# onclick

<button onclick="displayDate()">点这里</button>
1

然后写一个diaplayDatae函数,来激活它

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};    //或者在js里直接进行dom操作
</script>
1
2
3

# onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

<body onload="checkCookies()">
1

# onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。

<input type="text" id="fname" onchange="upperCase()">
1

其实vue,angular里的双向数据绑定就是用这个写的

# onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

# onmousedown、onmouseup 以及 onclick 事件

# onmousedown

鼠标点击不松

# onmouseup

鼠标点击后送开

# onclick

点击完成后

编辑 (opens new window)
上次更新: 2021/08/13, 23:21:49
Dom操作
Dom监听

← Dom操作 Dom监听→

最近更新
01
流式布局
08-13
02
flex布局
08-13
03
rem布局
08-13
更多文章>
Theme by Vdoing | Copyright © 2021-2021 Evan Xu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式