Javascript-事件进阶_alertmes-CSDN博客

本文链接：https://blog.csdn.net/weixin_38092043/article/details/84640075

事件进阶

事件处理器

oBtn.οnclick=function（）{.....}；

事件监听器

为一个元素添加多个相同事件

obj.addEventListener（"type"，fn，false）；

多次调用window.onload

解绑事件

obj.removeEventListener（"type"，fn，false）；

后面的内容为querystring查询字符串，一般用于数据库查询

事件进阶

事件处理器

oBtn.οnclick=function（）{.....}；

事件处理器没法为一个元素添加多个相同事件

事件监听器

为一个元素添加多个相同事件

obj.addEventListener（"type"，fn，false）；

type：事件类型

fn：函数名

1.函数名

2.匿名函数

false：事件冒泡阶段调用

布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。默认为false

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发，然后再触发 <p> 元素的点击事件。

1.函数名
oBtn.addEventListener("click",alertMes,false);
2.匿名函数
oBtn.addEventListener("click",function(){
                alert("JavaScript");
},false);

多次调用window.onload

直接写多个window.onload只会执行最后一次

1.只需将每个window.onlad改成

addEventListener（"load",fucntion(){.....},false）;

2.使用addLoadEvent（）函数

<script>
		function addLoadEvent(func)
		{
			var oldonload = window.onload;
			if(typeof window.onload != "function")
			{
				window.onload = func;
			}else{
				window.onload = function(){
					oldonload();
					func();
				}
			}
		}
		addLoadEvent(function(){
			...
		}));
	</script>

解绑事件

obj.removeEventListener（"type"，fn，false）；

fn必须为函数名，而不能是一个函数

只能解绑“”事件监听器”添加的添加的事件，不能解除“事件处理器”添加的事件

不能解绑事件监听器添加的匿名函数事件

可以用obj.事件名=null

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script>
		window.onload=function(){
			var oP =document.getElementById("content");
			var oBtn = document.getElementById("btn");
			oP.onclick=changeColor;
			function changeColor(){
				this.style.color = "hotpink";
			}
			oBtn.addEventListener("click",function(){oP.onclick=null;},false);
		};
	</script>
	<body>
		<p id="content">绿叶学习网</p>
		<input id="btn" type="button" value="解除"/>
	</body>
</html>

oP.οnclick=changeColor;

限制按钮只可以执行一次点击事件

在点击事件函数后面添加解除事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		window.onload=function(){
			var oBtn = document.getElementById("btn");
			oBtn.addEventListener("click",alertMes,false);
			function alertMes(){
				alert("我是一个弹窗~");
				oBtn.removeEventListener("click",alertMes,false);
			}
		}
	</script>
	<body>
		<input type="button" name="btn" id="btn" value="弹出" />
	</body>
</html>

event对象

当一个事件发生的时候，这个事件有关的信息会保存到event对象中

event对象的属性

type

keyCode

shiftKey

ctrlKey

altKey

oBtn.οnclick=function(e)

每次调用一个事件时候就是默认给事件添加一个隐藏参数event对象并存储于变量名e中

KeyCode

获取键盘中按下的哪一个键

this

哪个DOM对象调用了this所在的函数，那么this就指向哪个对象

{

oLi[i].style.color="hotpink"; X

this.style.color="hotpink";

}

必须用this为典型的闭包问题

window对象

每一个浏览器就是一个window对象

window子对象

window方法

document.write（）往空白窗口输出文本

var opener = window.open();
opener.document.write("这是一个新窗口");
opener.document.body.style.backgroundColor="lightskyblue";

var opener = null

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript">
		window.onload=function(){
			var oBtn1 = document.getElementById("open");
			var oBtn2 = document.getElementById("operate");
			var opener = null;
			oBtn1.onclick=function(){
				opener = window.open();
				var strHTML = '<!DOCTYPE html>\
					<html>\
					<head>\
					<title></title>\
					</head>\
					<body>\
                                        <div>"月亮代表我的心"</div>\
					</body>\
					</html>';
				opener.document.write(strHTML);
			};
			oBtn2.onclick=function(){
				var oDiv = opener.document.getElementsByTagName("div")[0];
				oDiv.style.fontweight = "bold";
				oDiv.style.color = "hotpink";
			};
		};
		
	</script>
	<body>
		<input type="button" name="open" id="open" value="打开新窗口" />
		<input type="button" name="operate" id="operate" value="操作新窗口" />
	</body>
</html>

setTimeout(code,time)

code:可以为函数和函数名

time：毫秒

var timer = setTimeout(alertMes.2000);
function alertMes(){
    '欢迎光临';
}
clearTimeout(timer);

setInterval(code,time)

每一次重复定时都会叠加，所以需要清除clearInterval（）

document对象

属性

方法

获取和创建元素的所有方法

documen.write（）

document.writeln（）

writeln会在输出内容后面加\n，会有间隔，在pre内显示换行

Location对象

href

当前页面地址

window.loaction.href

search ？

后面的内容为querystring查询字符串，一般用于数据库查询

当前页面地址？后面的内容

window.loaction.search

hash #

锚点链接

当前页面地址#后面的内容

window.loaction.hash

navigator对象

userAgent

window.navigator.userAgent