关闭

dom事件

112人阅读 评论(0) 收藏 举报
分类:

(1)定义事件响应的方式

          1.定义函数并调用

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

          2.通过dom来分配

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>


          3.通过addEventListener来分配


(2)典型事件

          1.onload和onunload事件

            1)会在用户进入或离开页面时触发

            2)主要用来检测浏览器版本和浏览器类型

            3)可以用来处理cookie

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
	{
	alert("Cookies 可用")
	}
else
	{
	alert("Cookies 不可用")
	}
}
</script>

<p>弹窗-提示浏览器cookie是否可用。</p>
</body>
</html> 

          2.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>

          3.onmouseover和onmouseout事件

            用于在用户鼠标移至HTML元素上方或移出元素时触发函数

<!DOCTYPE html>
<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>
</html> 


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:126867次
    • 积分:1802
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:338篇
    • 译文:0篇
    • 评论:11条
    文章分类
    最新评论