.html追加的触发js事件,JavaScript
JavaScript HTML DOM 事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
实例
Mouse Over Me
Click Me
对事件做出反应
我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:
οnclick=JavaScript
HTML 事件的例子:
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时
在本例中,当用户在
元素上点击时,会改变其内容:
实例
点击文本!
尝试一下 »
本例从事件处理器调用一个函数:
实例
function changetext(id)
{
id.innerHTML="Ooops!";
}
点击文本!
尝试一下 »
HTML 事件属性
如需向 HTML 元素分配 事件,您可以使用事件属性。
实例
向 button 元素分配 onclick 事件:
οnclick="displayDate()">点这里
尝试一下 »
在上面的例子中,名为 displayDate 的函数将在按钮被点击时执行。
使用 HTML DOM 来分配事件
HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件:
实例
向 button 元素分配 onclick 事件:
document.getElementById("myBtn").οnclick=function(){displayDate()};
尝试一下 »
在上面的例子中,名为 displayDate 的函数被分配给 id="myBtn" 的 HTML 元素。
按钮点击时Javascript函数将会被执行。
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
实例
尝试一下 »
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。
实例
οnchange="upperCase()">
尝试一下 »
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
实例
一个简单的 onmouseover-onmouseout 实例:
Mouse Over Me
尝试一下 »
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
实例
一个简单的 onmousedown-onmouseup 实例:
Thank You
更多实例
onload
当页面完成加载时,显示一个提示框。
onfocus
当输入字段获得焦点时,改变其背景色。
鼠标事件
当指针移动到元素上方时,改变其颜色;当指针移出文本后,会再次改变其颜色。
.html追加的触发js事件,JavaScript相关推荐
- js触发php事件,JavaScript_代码触发js事件(click、change)示例应用,Chrome , Firfox 不支持fireEvent的方 - phpStudy...
代码触发js事件(click.change)示例应用 Chrome , Firfox 不支持fireEvent的方法 可以使用dispatchEvent的方法替代, 直接给一个兼容的Code. 触发c ...
- checkbox 选中触发js事件
checkbox点击的时候触发js事件 选择按钮代码如下: <div><input type="checkbox" id="checkbox" ...
- html父级添加伪类after,关于伪类after后续追加,实现js事件(如点击事件)
实现情况为:点击"编辑"后,"编辑"文字变成"完成",再点击伪类元素后的"完成",此时的"完成"应该 ...
- JavaScript 技巧篇-js增加延迟时间解决单击双击事件冲突,双击事件触发单击事件
js 的单双击事件同时存在会有一个问题:双击事件会同时触发单击事件,两个事件存在冲突. 我们加一个延迟时间就能很好的解决这个问题. 原理: 当接收到第一个点击时,我们先把单击事件存储在这个是全局变量 ...
- js onscroll android,JavaScript触发onScroll事件的函数节流详解
问题描述 常见的网站布局,顶部一个导航栏,我们假设本页面共有四个栏目:分别为A.B.C.D,我们点击A,锚点跳转至A栏目,同时顶部的A按钮高亮:点击B,锚点跳转至B栏目,同时顶部的B按钮高亮:我们在M ...
- 【JavaScript】JS事件机制学习
常用的事件 通过事件机制,达到与用户的交互,与java的swing交互类似. 主要是结合js的函数使用. 当你添加一个事件之后没有达到想要的效果时,就要检查一下是不是给HTML标签添加了合适的事件,以 ...
- html 点击文本框则选中,JS事件 内容选中事件(onselect)选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。...
内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...
- html 点击增加样式,js点击添加css样式 css添加jq点击事件 JavaScript点击增加css样式...
js可实现点击后对div或者其他标签增加或者删除css样式,从而达到实现点击触发某种效果的目的.页面样式可以通过style修饰,也可以通过css修饰,改变css或者添加css可以改变页面的排版.代码如 ...
- JavaScript之JS事件机制
JS事件机制 一.JS事件机制 1.解释 2.作用 3.内容 3.1 单双击事件 3.2 鼠标事件 3.3 键盘事件 3.4 焦点事件 3.5 页面加载事件 4.注意 5.实例 二.衍生思考 1.给合 ...
最新文章
- GitHub 热榜:文字识别神器,超轻量级中文 OCR!
- 计算机交换机配置实验心得,实验六 三层交换机的配置实验报告
- placeholder兼容性问题以及用label代替placeholder
- C++Opengl绘制三角形源码
- Python从入门到项目实践(明日科技 吉林大学出版社)
- flash air 解析html,AIR 程序内部显示网页,并可以点击浏览的方法(HTMLLoader、StageWebView)...
- Java之jdk和CGLib实现动态代理
- python 如何边改代码边调试_Python 代码调试神器:PySnooper
- 【Cocos2d-X(2.x) 游戏开发系列之二】cocos2dx最新2.0.1版本跨平台整合NDK+Xcode编译到Android...
- 实践解析可视化开发平台FlinkSever优势
- 细数音频放大器的分类
- 删除svn中的文件方法
- 数据运营平台-数据采集
- QueryList一个基于phpQuery的无比强大的采集工具
- matlab 周期性边界,PID控制器阶跃响应的分析(基于MATLAB仿真的实验):
- 如何玩转私域引流?全链路拆解经典玩法和实战案例
- Unity mp3转wav
- jQuery全屏插件fullPage的基本使用
- 【数据结构与算法】之深入解析“扫雷游戏”的求解思路与算法示例
- 汽车销量查询小助手(小程序)销量趋势图功能及代码知识分享