HTML DOM对象事件、监听事件

最新推荐文章于 2024-02-16 17:42:45 发布

ZPD_zpd

最新推荐文章于 2024-02-16 17:42:45 发布

阅读量321

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/ZPD_zpd/article/details/110432029

版权

关于焦点的事件

onfocus 事件

onfocus 事件在对象获得焦点时发生。

onblur事件

元素失去焦点。

onchange事件

域的内容被改变。

onchange 事件会在域的内容改变时发生。
onchange 事件也可用于单选框与复选框改变后触发的事件。

例如：可用于获取下拉框内容
在这里插入图片描述

<body>
     //定义下拉列表
	<select name="" id="s1">
		<option value="">请选择省份/直辖市</option>
		<option value="河北">河北省</option>
		<option value="山东">山东省</option>
		<option value="天津">天津市</option>
	</select>
	
	<script type="text/javascript">
		var s1=document.getElementById("s1");
		// onchange事件,获取下拉列表改变时的内容
		s1.onchange=function(){
			// 输出值
			console.log(this.value);
			// 输出下标
			console.log(this.selectedIndex);
		}
	</script>
</body>

关于鼠标的事件

onclick事件

onclick 事件会在对象被点击时发生。

请注意， onclick 与 onmousedown 不同。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。

ondblclick事件

当用户双击某个对象时调用的事件。

onmousedown 事件

鼠标按钮被按下时触发。

onmouseup 事件

鼠标按钮松开时触发。

onmousemove 事件

鼠标指针移动时触发。

onmouseover 事件

鼠标指针移动到指定的对象上时触发。

onmouseout 事件

鼠标指针移出指定的对象时触发。

关于键盘的事件

onkeydown 事件

某个键盘按键被按下时触发。

onKeyUp 事件

某个键盘按键被松开时触发。

onkeypress 事件

某个键盘按键被按下并松开时触发。

关于框架的事件

onload 事件

指定图片或页面加载完成时触发。

//页面加载完成时触发
window.onload=function(){SomeJavaScriptCode};

<body>
//图片加载完成时触发
<img src="logo.png" onload="loadImage()" width="336" height="36">

<script>
function loadImage()
{
alert("图片加载完成");
}
</script>
</body>

onunload 事件

在用户退出页面时触发。

window.onunload=function(){SomeJavaScriptCode};

onresize 事件

在窗口或框架被调整大小时触发。

表单事件

onreset 事件

表单被重置后触发（重置按钮点击时触发）。

object.onreset=function(){myScript};

监听事件

addEventListener() 方法

addEventListener() 方法为指定元素指定事件处理程序。

addEventListener() 方法能够向一个元素添加多个事件处理程序。
addEventListener() 方法允许您将事件监听器添加到任何 HTML DOM 对象上。

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（比如 “click” 或 “mousedown”）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

注意：请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”。

例子：

element.addEventListener("click", function(){ alert("Hello World!"); });

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

removeEventListener() 方法

removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序。

但只能删除通过外部命名函数。

element.removeEventListener("mousemove", myFunction);

PS: IE 8、Opera 6.0 及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。

跨浏览器解决方案：

var x = document.getElementById("myBtn");
if (x.addEventListener) { // 针对主流浏览器，除了 IE 8 及更正版本
	x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // 针对 IE 8 及更早版本
	x.attachEvent("onclick", myFunction);
}