JavaScript HTML DOM 事件的相关知识的了解

javascript html dom 事件在js中有着重要的作用,本篇对其相关知识做出了详解。

对事件做出反应

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

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

onclick=JavaScript

HTML 事件的例子:

立即学习“Java免费学习笔记(深入)”;

当用户点击鼠标时

当网页已加载时

当图像已加载时

当鼠标移动到元素上时

当输入字段被改变时

当提交 HTML 表单时

当用户触发按键时

在本例中,当用户在

元素上点击时,会改变其内容:

实例

nbsp;html>

点击文本!

登录后复制

本例从事件处理器调用一个函数:

实例

nbsp;html>function changetext(id){    id.innerHTML="Ooops!";}

点击文本!

登录后复制

HTML 事件属性

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

向 button 元素分配 onclick 事件:

登录后复制

在上面的例子中,名为 displayDate 的函数将在按钮被点击时执行。

使用 HTML DOM 来分配事件

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

向 button 元素分配 onclick 事件:

document.getElementById("myBtn").onclick=function(){displayDate()};

登录后复制

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

按钮点击时Javascript函数将会被执行。

onload 和 onunload 事件

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

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

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

实例


登录后复制

onchange 事件

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

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

实例


登录后复制

onmouseover 和 onmouseout 事件

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

onmousedown、onmouseup 以及 onclick 事件

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

本篇对 DOM 事件的相关知识做出了一些了解,更多的学习资料清关注【创想鸟】即可观看。

相关推荐:

JavaScript 函数调用的相关知识和运用

JavaScript 计时事件的了解与使用方法

JavaScript Cookie的了解与使用

以上就是JavaScript HTML DOM 事件的相关知识的了解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2764180.html

(0)
上一篇 2025年3月8日 10:24:43
下一篇 2025年3月8日 10:24:49

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • VueJs组件之父子通讯的方式

    这篇文章主要介绍了vuejs组件之父子通讯的方式,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 组件(父子通讯) 一、概括 在一个组件内定义另一个组件,称之为父子组件。    但是要注意的是:1.子组件只能在父组件内部使用(写在父…

    2025年3月8日 编程技术
    200
  • JS弹出窗口代码大全

    这篇文章主要介绍了关于js弹出窗口代码大全,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 如何利用网页弹出各种形式的窗口,我想大家大多都是知道些的,但那种多种多样的弹出式窗口是怎么搞出来的,平时利用业余时间整理了一些,需要的…

    编程技术 2025年3月8日
    200
  • JavaScript动态改变HTML页面元素例如添加或删除

    这篇文章主要介绍了关于javascript动态改变html页面元素例如添加或删除,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 HTML页面元素可以通过js动态改变,比如可以向HTML中添加元素或删除某个元素,下面为示例代码…

    编程技术 2025年3月8日
    200
  • 两种方法实现在HTML页面加载完毕后运行某个js

    这篇文章主要介绍了通过两种方法实现在html页面加载完毕后运行某个js,需要的朋友可以参考下 js方法: 复制代码 代码如下: window.onload=function(){ var userName=”xiaoming”; alert…

    编程技术 2025年3月8日
    200
  • js 通过html()及text()方法获取并设置p标签的显示值

    这篇文章主要介绍了js 通过html()及text()方法获取并设置p标签的显示值,需要的朋友可以参考下 html()方法 此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的HTML内容。要获取某个…

    编程技术 2025年3月8日
    200
  • JS三种加载方法使用总结

    这次给大家带来JS三种加载方法使用总结,JS三种加载方法使用的注意事项有哪些,下面就是实战案例,一起来看一下。 一:同步加载 我们平时使用的最多的一种方式。 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成…

    编程技术 2025年3月8日
    200
  • JS随机生成数与序列方法详解

    这次给大家带来JS随机生成数与序列方法详解,JS随机生成数与序列的注意事项有哪些,下面就是实战案例,一起来看一下。 •1.Math.random(); 结果为0-1间的一个随机数(包括0,不包括1) •2.Math.floor(num); …

    编程技术 2025年3月8日
    200
  • JS加载jquery.js步骤详解

    这次给大家带来JS加载jquery.js步骤详解,JS加载jquery.js的注意事项有哪些,下面就是实战案例,一起来看一下。 最近有一个需求: 1.在一个html中只能引入一个JS文件 不能有JS代码和其他JS文件的引入; 2.这个JS文…

    2025年3月8日
    200
  • js三种使用方式案列详解

    这次给大家带来js三种使用方式案列详解,js三种使用方式的注意事项有哪些,下面就是实战案例,一起来看一下。 1、行内js:js不单独写出 js使用方式1:行内js 登录后复制 2、内部js:script里的程序整个页面都可以用 js使用方式…

    编程技术 2025年3月8日
    200
  • js动态引入使用详解

    这次给大家带来js动态引入使用详解,使用js动态引入的注意事项有哪些,下面就是实战案例,一起来看一下。 index.html 登录后复制 test.js alert(“hello! I am test.js”); var str=”1″; …

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论