购物车
登陆 / 注册
微信扫码登陆

推荐手册

JavaScript DOM 事件

JavaScript DOM 事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应
前端控 前端控 更新时间:2019-02-13 17:40:37

JavaScript HTML DOM 事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应

对事件做出反应

我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:

onclick=JavaScript

HTML 事件的例子:

  • 当用户点击鼠标时

  • 当网页已加载时

  • 当图像已加载时

  • 当鼠标移动到元素上时

  • 当输入字段被改变时

  • 当提交 HTML 表单时

  • 当用户触发按键时

实例

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='JavaScript教程'">0133技术站</h1>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

GIF.gif

HTML 事件属性

如需向 HTML 元素分配 事件,您可以使用事件属性。

实例

向 button 元素分配 onclick 事件:

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

实例

<!DOCTYPE html>
<html>
<body>
<button onclick="myDemo()">点击</button>
<p></p>
<script>
  function myDemo(){
    document.getElementsByTagName("p")[0].innerHTML=Date();

  }

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 27.jpg

使用 HTML DOM 来分配事件

HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件

实例

<script>
document.getElementById("myBtn").onclick=function(){myDemo()};
function myDemo()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 27.jpg

在上面的例子中,名为 myDemo的函数被分配给 id=myBtn" 的 HTML 元素。

当按钮被点击时,会执行该函数。

onload 和 onunload 事件

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

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

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

实例

<script>
function checkCookies(){
    if (navigator.cookieEnabled==true){
        alert("Cookies 可用")
    }
    else{
        alert("Cookies 不可用")
    }
}
</script>
<p>弹窗-提示浏览器 cookie 是否可用。</p>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 28.jpg

onchange 事件

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

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

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

GIF.gif

onmouseover 和 onmouseout 事件

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

实例

<script>
function myDemo(obj)
{
document.getElementById("demo").style.backgroundColor="pink";
}
function myDemo1(obj)
{
document.getElementById("demo").style.backgroundColor="skyblue";

}
</script>
</head>
<body>

<div onmouseover="myDemo(this)" onmouseout="myDemo1(this)" style="width:200px;height: 200px;background-color: red" id="demo"></div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

GIF.gif

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。

实例

<script>
function myDemo()
{
document.getElementById("demo").style.backgroundColor="pink";
document.getElementById("demo").innerHTML="请释放鼠标按钮"
}
function myDemo1()
{
document.getElementById("demo").style.backgroundColor="skyblue";
document.getElementById("demo").innerHTML="请按下鼠标按钮"
}
</script>
</head>
<body>

<div onmousedown="myDemo()" onmouseup="myDemo1()" style="width:200px;height: 200px;background-color: red" id="demo">点击</div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

GIF.gif

网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号