JavaScript-----事件,attributes

最新推荐文章于 2023-06-28 14:20:35 发布

ZX周公子

最新推荐文章于 2023-06-28 14:20:35 发布

阅读量278

点赞数

本文链接：https://blog.csdn.net/ZXD693/article/details/93069008

版权

一. 事件

1.概念

事件：一件事
事件源：事件发生的组件。
监听器：一个对象。当事件源上发生了事件，就执行对象中的某些方法
注册监听：将监听器绑定到事件源上，监听事件的发生

注册监听的方式：

在定义标签时，添加事件名称属性。属性值是js代码
js代码会被自动封装到一个function函数的方法体中
通过js获取元素对象，再添加事件。

事件的种类：

焦点事件：
onfocus 元素获得焦点。
onblur 元素失去焦点
点击事件：
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
键盘事件：
onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。
鼠标事件：
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmousemove 鼠标被移动。
表单事件：
onsubmit 确认按钮被点击。
onreset 重置按钮被点击。
加载与卸载事件
onload 一张页面或一幅图像完成加载。
onunload 用户退出页面。其他浏览器不支持 IE支持
其他事件：
（针对表单：）
onchange 域的内容被改变。比如下拉框
onselect 文本被选中。
案例演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	
		<input type="text"  value="请输入你的姓名" onfocus="test(this)" onblur="test2(this)"   
		//当获得焦点的时候，调用test();   当失去焦点的时候调用test2（）；
       id="username"/>	
		<span id="sp"></span>
		<br>
	<input type="text" id="" value="请输入你的密码"/>
	</body>
	
	<script type="text/javascript">
		function test(ele){     
			ele.value="";	
		}
		function test2(ele){
			var text=ele.value;
			var len=text.length
			 if(len>=6&&len<=12){
				 	document.getElementById("sp").innerHTML="<font color='green'>符合要求</font>"
			 }else if(text.length==0){
				  document.getElementById("sp").innerHTML="<font color='red'>不能为空</font>"
			 }else{				
				  document.getElementById("sp").innerHTML="<font color='red'>不符合要求</font>"
			 }			 			
		}
	</script>
</html>

二， attributes

Attribute是属性的意思，以下对部分兼容IE和FF的Attribute相关的介绍。

attributes：获取一个属性作为对象
getAttribute：获取某一个属性的值
setAttribute：建立一个属性，并同时给属性捆绑一个值
createAttribute：仅建立一个属性
removeAttribute：删除一个属性
getAttributeNode：获取一个节点作为对象
setAttributeNode：建立一个节点
removeAttributeNode：删除一个节点

attributes的使用方法：（IE和FF通用）
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.getElementById("sss").attributes["value"];
document.write(d.name);
document.write(d.value);
</script>

getAttribute，setAttribute，createAttribute，removeAttribute概念比较容易理解，使用方法也比较简单，唯一需要注意这几点：

createAttribute在使用的时候不需要基于对象的，document.createAttribute()就可以。
setAttribute，createAttribute在使用的时候如果是使用的时候不要使用name，type，value等单词，IE都FF的反应都奇怪的难以理解。
createAttribute在使用的时候如果只定义了名字，没有d.nodeValue = “hello”;语句定义值，FF会认为是一个空字符串， IE认为是 undefined，这点得注意到。

getAttribute的使用方法：
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.getElementById("sss").getAttribute("value");
document.write(d);
</script>


setAttribute的使用方法：
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
     var d = document.getElementById("sss").setAttribute("good","hello");
     alert(document.getElementById("t").innerHTML)
</script>


createAttribute的使用方法：
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
     var d = document.createAttribute("good");
     document.getElementById("sss").setAttributeNode(d);
     alert(document.getElementById("t").innerHTML)
</script>


removeAttribute的使用方法：
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
     var d = document.getElementById("sss").removeAttribute("value");
     alert(document.getElementById("t").innerHTML)
</script>

getAttributeNode，setAttributeNode，removeAttributeNode三个方法的特点是都直接操作一个node（节点），removeAttributeNode在一开始的时候总会用错，但是在充分理解了node的含义的之后，就能够很好的应用了。

getAttributeNode的使用方法：
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
     var d = document.getElementById("sss").getAttributeNode("value");
     document.write(d.name);
     document.write(d.value);
</script>


setAttributeNode的使用方法：
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
     var d = document.createAttribute("good");
     document.getElementById("sss").setAttributeNode(d);
     alert(document.getElementById("t").innerHTML);
</script>


removeAttributeNode的使用方法：
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
     var d = document.getElementById("sss").getAttributeNode("value")
     document.getElementById("sss").removeAttributeNode(d);
     alert(document.getElementById("t").innerHTML);
</script>