事件监听

最新推荐文章于 2024-09-10 13:21:46 发布

刚上道的小白_

最新推荐文章于 2024-09-10 13:21:46 发布

阅读量173

点赞数

分类专栏：前端面试题库

本文链接：https://blog.csdn.net/FengYang_/article/details/108569064

版权

前端面试题库专栏收录该内容

56 篇文章 2 订阅

订阅专栏

事件监听

一、事件监听
1、行内绑定
行内绑定：在ＨＴＭＬ　的标签中通过onclick属性进行绑定，绑定方式为：on＋　事件名称，　在将所触发你事件赋值给该属性

<button  onclick='onClick()'></button>

2、使用元素进行事件绑定
使用element.onclick 进行事件绑定，通过操作DOM元素，为DOM绑定事件【使用形式同行内绑定】

window.onload = function (){
    let btn = document.getElementById('btn')
    btn.onclick=function(){
        alert('1111')
    }
}

3、使用addEventListener()方法
使用 addEventListener() 方法，接受3个参数（要处理的事件名、作为事件处理程序的函数、一个布尔值，这个布尔值为 true 表示在事件捕获阶段调用事件处理程序，为 false 则在事件冒泡阶段调用）。有些浏览器不支持事件捕获（如 IE8 及更低版本），所以谨慎绑定捕获阶段的事件监听器

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload = function(){
				var btn = document.getElementById('btn');
				btn.addEventListener('click',function(){
					alert("123");
				},false);
			}
		</script>
	</head>
	<body>
		<button id="btn">点击</button>
	</body>
</html>