html dom 触发等事件

最新推荐文章于 2022-11-25 15:12:48 发布

翘麦力

最新推荐文章于 2022-11-25 15:12:48 发布

阅读量402

点赞数

文章标签： js

本文链接：https://blog.csdn.net/Candx2/article/details/108662308

版权

事件触发： onclick
实例：

<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">点击此文本！</h1>

<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>

</body>
</html>

Onload和onunload事件

当用户进入后及离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。
onload 和 onunload 事件可用于处理 cookie。
onchange 事件经常与输入字段验证结合使用。

实例：

<!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>

onmouseover和onmouseout事件
onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数：

<!DOCTYPE html>
<html>
<body>

<div 
onmouseover="mOver(this)" 
onmouseout="mOut(this)" 
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
Mouse Over Me
</div>

<script>
function mOver(obj)
{
obj.innerHTML="谢谢你"
}

function mOut(obj)
{
obj.innerHTML="把鼠标指针移动到上面"
}
</script>

</body>
</html>

onmousedown, onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。

首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

onfocus
当输入字段获得焦点时改变其背景色。
实例：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x) {
  x.style.background = "yellow";
}
</script>
</head>
<body>

请输入您的名字：<input type="text" onfocus="myFunction(this)">

<p>当输入字段获得焦点时，将触发一个更改背景颜色的函数。</p>

</body>
</html>

——总结内容来自于网络

翘麦力

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html dom 触发等事件

事件触发： onclick实例：<!DOCTYPE html><html><body><h1 onclick="changeText(this)">点击此文本！</h1><script>function changeText(id) { id.innerHTML = "Hello:)";}</script></body></html> Onload和onun
复制链接

扫一扫