10023---JavaScript--DOM事件
来源:互联网 发布:php 合并二维数组 编辑:程序博客网 时间:2024/06/08 13:52
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
对事件做出反应
我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:
onclick=JavaScript
HTML 事件的例子:
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
本例从事件处理器调用一个函数:
<!DOCTYPE html><html> <head> <script> function changetext(id) { id.innerHTML="Ooops!"; } </script> </head> <body> <h1 onclick="changetext(this)">Click on this text!</h1> </body> </html>
HTML 事件属性
如需向 HTML 元素分配 事件,您可以使用事件属性。
<button onclick="displayDate()">Try it</button>
使用 HTML DOM 来分配事件
HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件:
<script> document.getElementById("myBtn").onclick=function(){displayDate()}; </script>
在上面的例子中,名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。
按钮点击时Javascript函数将会被执行。
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<body onload="checkCookies()"><script>function checkCookies(){if (navigator.cookieEnabled==true){alert("Cookies 可用")}else{alert("Cookies 不可用")}}</script><p>弹窗-提示浏览器cookie是否可用。</p></body>
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。
<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>
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
<body><div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div><script>function mOver(obj){obj.innerHTML="Thank You"}function mOut(obj){obj.innerHTML="Mouse Over Me"}</script></body>
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,
会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
<script>function lighton(){document.getElementById('myimage').src="bulbon.gif";}function lightoff(){document.getElementById('myimage').src="bulboff.gif";}</script></head><body><img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" /><p>点击不释放鼠标灯将一直亮着!</p></body>又一例
<script>function myFunction(x){x.style.background="lightpink";}function myFunction2(x){x.style.background="white";}</script></head><body>输入你的名字: <input type="text" onfocus="myFunction(this)" onblur="myFunction2(this)"><p>当输入框获取焦点时,修改背景色(background-color属性) 将被触发。</p></body>【注】div---background-collor; input:background
又一例
<body><h1 onmouseover="style.color='red'"onmouseout="style.color='black'">将鼠标移至文部上</h1></body>
0 0
- 10023---JavaScript--DOM事件
- JavaScript DOM添加事件
- JavaScript-DOM-事件
- JavaScript HTML DOM 事件
- JavaScript HTML DOM 事件
- JavaScript HTML DOM 事件
- JavaScript HTML DOM事件
- JavaScript HTML DOM 事件
- JavaScript HTML DOM 事件
- JavaScript HTML DOM 事件
- JavaScript DOM事件(笔记)
- JavaScript的dom事件
- JavaScript HTML DOM 事件
- JavaScript HTML DOM 事件
- JavaScript DOM编程、事件
- JavaScript HTML DOM 事件
- JavaScript-DOM-事件
- JavaScript DOM(三)-DOM事件
- LeetCode(5)Longest Palindromic Substring
- java的jdk安装和切换
- hybird 开发中的缓存问题
- TLD(Tracking-Learning-Detection)学习与源码理解之(三)
- 七招教你撰写引人注意的邮件主题行
- 10023---JavaScript--DOM事件
- JVM内存静态与动态分配
- TLD(Tracking-Learning-Detection)学习与源码理解之(四)
- Mac OS X各版本的历史费用和升级关系
- Socket、Tcp、Udp、Http 的认识及区别
- UIButton
- IOS8 keyboardWillShow 在UIKeyboardWillShowNotification 调用两次 问题解决
- ListView+EditText 焦点问题
- 如何获取国际标准时间