JavaScript学习笔记—DOM：事件

事件（event）

事件就是用户和页面之间发生的交互行为
比如：点击按钮，鼠标移动，双击按钮，敲击键盘，松开按键...
可以通过为事件绑定响应函数（回调函数），来完成和用户之间的交互
绑定响应函数的方式
（1）直接在元素的属性中设置
（2）通过为元素的指定属性设置回调函数的形式来绑定事件（一个事件只能绑定一个响应函数）
（3）通过元素的addEventListener()方法来绑定事件

 ...
<body>
  <button id="btn" onclick="alert('直接在元素的属性中设置')">点我一下</button>
  <script>
    // 获取btn对象
    const btn = document.getElementById("btn");
    // 为按钮对象的事件属性设置响应函数
    btn.onclick = function(){
      alert("通过为元素的指定属性设置回调函数的形式来绑定事件");
    };
    btn.onclick = function(){
      alert("重复绑定覆盖上面响应函数，上面函数失效");
    };
    btn.addEventListener("click", function(){
      alert("addEventListener111");
    });
    btn.addEventListener("click", function(){
      alert("addEventListener222");
    });
    btn.addEventListener("click", function(){
      alert("addEventListener333");
    });
  </script>
</body>
...

posted @ 2023-01-31 22:51 程序员张3 阅读(15) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JavaScript学习笔记—DOM：元素的添加、修改、删除

· JavaScript学习笔记—DOM：文本节点

· JavaScript事件

· JavaScript 事件

· 事件的绑定

JavaScript学习笔记—DOM：事件

事件（event）

公告

搜索

常用链接

我的标签

随笔分类 (92)

	...
	<body>
	<button id="btn" onclick="alert('直接在元素的属性中设置')">点我一下</button>
	<script>
	// 获取btn对象
	const btn = document.getElementById("btn");
	// 为按钮对象的事件属性设置响应函数
	btn.onclick = function(){
	alert("通过为元素的指定属性设置回调函数的形式来绑定事件");
	};
	btn.onclick = function(){
	alert("重复绑定覆盖上面响应函数，上面函数失效");
	};
	btn.addEventListener("click", function(){
	alert("addEventListener111");
	});
	btn.addEventListener("click", function(){
	alert("addEventListener222");
	});
	btn.addEventListener("click", function(){
	alert("addEventListener333");
	});
	</script>
	</body>
	...