事件函数

最新推荐文章于 2021-01-11 19:49:09 发布

1mpact

最新推荐文章于 2021-01-11 19:49:09 发布

阅读量546

点赞数

本文链接：https://blog.csdn.net/weixin_44160104/article/details/100551642

版权

本文深入探讨了DOM操作的基本方法，包括元素的克隆、替换、删除，以及如何使用Interval进行定时操作。同时，详细讲解了不同级别的事件处理方式，如DOM0级事件、DOM2级事件的绑定和触发，以及鼠标和键盘事件的响应机制。

摘要由CSDN通过智能技术生成

事件函数

1、元素操作

元素克隆

深克隆

var p = document.getElementById("p");
	var container = document.getElementsByClassName("container")[0];
	//克隆,true:深克隆
	var p_clone = p.cloneNode(true);
	console.log(p_clone);
	container.appendChild(p_clone);
//深克隆会把html以及其中的text文本一起克隆

浅克隆

var p_clone = p.cloneNode(false);
//把true改为false

元素替换

var div = document.createElement("div");
div.innerText="我是div";
			
container.replaceChild(div,p_clone);//逗号前面替换逗号后面的

元素删除

	//删除div
	div.parentNode.removeChild(div);//只能获取父节点删除子节点，不能自己删除自己

2、Interval

var showTime = document.getElementById("showTime");
			
	function test(){
	showTime.innerHTML=new Date().toLocaleString();
	};
	//函数的引用，匿名function，
	var inte = window.setInterval(test,1000);
	function cancel(){
		window.clearInterval(inte);
	}

3、DOM

DOM0

行内事件与DOM0事件最多保留一个

DOM0获取对象，绑定事件

var obj = document.getElementsByTagName("button")[0];
	obj.onclick=function(e){
	alert("DOM0级事件");

DMO2

dom2 可以同时添加多个dom2级事件，与dom0和行内事件不冲突

var obj2 = document.getElementsByTagName("button")[1];
			
			function test(){
				alert("addEventListener11111");
			}
			function test2(){
				alert("addEventListener2222");
			}
			obj2.addEventListener("click",test,false);
			obj2.addEventListener("click",test2,false);

//阻止button2
			obj2.disabled=true;

4、MOUSE事件

dv.onmouseenter=function(){
	console.log(this);
	this.style.background='red';
};
dv.onmouseleave=function(){
	this.style.backgroundColor='blue';
};

5、键盘事件

onkeydown onkeydown 事件会在用户按下一个键盘按键时发生。

onkeyup 某个键盘按键被松开

onkeypress 某个键盘按键被按下并松开。

<form>
Type some text (numbers not allowed):
<input type="text" onkeydown="return noNumbers(event)" />
</form>

<form>
Type some text (numbers not allowed):
<input type="text" onkeypress="return noNumbers(event)" />
</form>