当前位置：网站首页 > 技术文章 > 正文

Js基础2:基本概念之事件

myzbx 2025-01-10 15:41 28 浏览

JS中的事件

事件是可以被控件识别的操作，如按下确定按钮，选择某个单选按钮或者复选框。每一种控件有自己可以识别的事件，如窗体的加载、单击、双击等事件，编辑框（文本框）的文本改变事件，等等。

事件是基于触发-响应 机制实现的，当用户对控件做某些操作时，如点击，移入鼠标，输入文字等，控件会识别到该操作，并作出对应的响应。

5.1、事件三要素

1、事件源: 被触发的对象 2、事件类型: 用户的操作、例如：鼠标点击，鼠标经过，鼠标离开 3、事件处理程序: 事件触发后要执行的代码(函数形式)--就是我们要去做上面事情

唐僧念紧箍咒——疼在后（猴）头
事件源：三藏
事件类型：念紧箍咒
事件处理程序：猴子头疼

5.2、Javascript的书写位置

js 行内式：

 <button onclick="alert('哈哈,我是行内式')">行内式</button>

js 内嵌式：

 <button onclick="fun()">内嵌式</button>
 <script type="text/javascript">
 function fun(){
 alert("内嵌式");
 }

外部javascript：

第一步：先建立一个JS的文件 demo.js 书写JS代码第二步：调用外部JS文件

 <script type="text/javascript" src="demo.js"></script>
 
 <button onclick="fun1()">外部JS</button>

5.3、Javascript代码分离

行内事件绑定语法：

 <button onclick="fun()">点击</button>
 <script>
   function fun(){
      alert("您点击了我");
  }
 </script>

行内事件绑定的写法没有体现出结构样式行为代码分离的特性，所以这种用法大家会用即可

我们重点掌握的是用代码分离的写法：

 事件源.on事件=function(){要执行的处理程序;}

代码示例：

 var btn=document.getElementById("btn");  /*获取id为btn的元素*/
  /*事件源.事件=function(){ }*/
 btn.onclick=function(){
     alert("您点击了我");
 }

HTML 事件

相关推荐