Vue的自定义@change事件（自己学习用途，不建议参考）

# html dom事件虽然我会用Vue会写一些组件和组件但是，有一些细节需要自己去扣，比如说我写项目的时候，遇到问题，那个change事件我就不是很清楚。我就去百度后面才发现，change事件是组件里自定义的所以我去了解了一下html5里面的几个事件当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。如需在用户点击某个元素时执行代码，请把 JavaScript 代

g2kajun

16720人浏览 · 2021-06-05 02:20:05

g2kajun · 2021-06-05 02:20:05 发布

html dom事件

虽然我会用Vue会写一些组件和组件但是，有一些细节需要自己去扣，比如说我写项目的时候，遇到问题，那个change事件我就不是很清楚。我就去百度后面才发现，change事件是组件里自定义的

所以我去了解了一下html5里面的几个事件

当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。

如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：

javascript
onclick=JavaScript

HTML 事件的例子：

onclick事件

- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时

!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='hello!'">请点击这段文本!</h1>
</body>
</html>

onload 和 onunload 事件

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

onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。

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

<body onload="checkCookies()">

onchange 事件

onchange 事件常用于输入字段的验证。

下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函数。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
    var x=document.getElementById("fname");
    x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

请输入你的英文名：<input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。</p>

</body>
</html>

到这里就发现这个onchange就和vue的 v-on:="change" 事件是一样的，检测到当前页面的事件，有了变化，在vue的SPA里面，这是很常见的，所以弄懂了为什么会有onchange这个事件

onmousedown、onmouseup 以及 onclick 事件

onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。

<!DOCTYPE html>
<html>
<body>

<div 
onmousedown="mDown(this)" 
onmouseup="mUp(this)" 
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
点击这里
</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="松开鼠标"
}

function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="谢谢你"
}
</script>

</body>
</html>

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐