dom事件

转载 2015年11月17日 16:14:06

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


DOM節點方法及事件

  • 2009年07月04日 10:17
  • 37KB
  • 下载

javascript之DOM事件驱动编程

事件驱动编程中的几个核心对象:  事件源:谁发出事件通知,发出消息;也就是事件主体。 事件名称:发出什么样的通知的名称,比如鼠标到我头上了,我被别人点了一下; 事件响应函数:谁对这个这个事件感兴...
  • czw2010
  • czw2010
  • 2012年04月28日 14:41
  • 10408

DOM事件之简约下拉菜单

  • 2016年02月18日 22:17
  • 2KB
  • 下载

手写DOM事件模型

  • 2016年04月29日 10:15
  • 3KB
  • 下载

IE和DOM事件流的区别

IE和DOM事件流的区别 ··IE采用 冒泡型 事件模型··   冒泡型事件模型: span->div->body (IE事件流) 事件冒泡事件传递的一个过程,如果某一个父级元素具有了相同类型的事件,...

javascript为DOM绑定事件 兼容

  • 2010年08月21日 14:56
  • 26KB
  • 下载

理解DOM事件流的三个阶段

起因 在学习前端的大半年来,对DOM事件了解甚少。一般也只是用用onclick来绑定个点击事件。在寒假深入学习JavaScript时,愈发觉得自己对DOM事件了解不够,遂打开我的《JavaS...

好好学一遍JavaScript 笔记(十)——IE跟DOM事件函数区别

欢迎技术交流。 QQ:138986722 1、获取目标 位于事件中心的对象称为目标(target).假设为元素分配onclick事件处理函数、触发click事件时、就被认为是目标。IE...
  • hzw2312
  • hzw2312
  • 2012年02月22日 13:56
  • 3353
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:dom事件
举报原因:
原因补充:

(最多只允许输入30个字)