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> 


相关文章推荐

JS笔记-关于在DOM0级别中设置事件处理对象的思考

在JavaScript指定事件处理程序的方式中,有三层,分别是DOM 0 级, DOM 1 级, DOM 2 级。 DOM 0 级是最传统的形式,主要为直接给指定元素的某个事件直接指定, ex: ...
  • fspwz
  • fspwz
  • 2015-05-17 23:22
  • 171

DOM節點方法及事件

  • 2009-07-04 10:17
  • 36KB
  • 下载

IE和DOM事件流的区别

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

DOM事件之简约下拉菜单

手写DOM事件模型

jQuery学习笔记之DOM操作、事件绑定(2)

jQuery学习笔记之DOM操作、事件绑定(2) 4.DOM操作 5.事件绑定 源码地址: https://github.com/iyun/jQueryDemo.git 4.DOM操作(节点增删改查)...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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