jsinput输入完触发事件_JavaScript event 事件详解

最新推荐文章于 2024-07-14 03:36:05 发布

weixin_39923262

最新推荐文章于 2024-07-14 03:36:05 发布

阅读量8.5k

点赞数 2

文章标签： jsinput输入完触发事件

JavaScript是一种以事件驱动(Event-driven)的开发语言。事件驱动是程式设计的主要流程，是由图形化使用者操作界面(UI)的交互事件为主要核心，藉由事件的触发动作(鼠标点击、键盘输入等等)或是感应器的信息，以此启动程式。

维基百科对它的解释是：

事件驱动程序设计（英语：Event-driven programming）是一种电脑程序设计模型。这种模型的程序运行流程是由用户的动作（如鼠标的按键，键盘的按键动作）或者是由其他程序的消息来决定的。相对于批处理程序设计（batch programming）而言，程序运行的流程是由程序员来决定。批量的程序设计在初级程序设计教学课程上是一种方式。然而，事件驱动程序设计这种设计模型是在交互程序（Interactive program）的情况下孕育而生的

JavaScript event即为事件，开发人员在代码中使用事件处理器（event handlers）来监听使用者的行为（Events），通常Event 会通过某特定函数来执行特定动作，浏览器内置的JavaScript核心会判断使用者发生哪些动作，如click动作（对应onclick event负责监听）、改变表单中的某个文本框（对应onchange event负责监听）、鼠标移滑动（对应onmouseover负责监听）等等，一旦监听到到使用者发生的动作，就能够触发特定function执行，这就是JavaScript event事件。原则上每一个event事件在JavaScript 语法中的标准写法都是英文字母小写，除非在HTML中使用不需要顾虑大小写，否则建议别把onmouseover写成onMouseover，这么做很可能Script不执行，另外，JavaScript Event也有简写方式，但并非每个浏览器都支援，这里还是建议以标准写法为主，以下有几个参考范例。

JavaScript event样例：

1.onclick

<script language="javascript">
    function ShowToday(){
          var Today=new Date();
          alert("今天日期是 " + Today.getFullYear()+ " 年 " + (Today.getMonth()+1) + " 月 " + Today.getDate() + " 日");
     }
</script>
<input type="button" onclick="ShowToday()" value="今天星期几">

JavaScript onclick 是使用率非常高的一个event，范例中准备了一个按钮（button）并加入一个onclick 事件的监听，当选择这个今天星期几的按钮，就会触发ShowToday 的function，通过“取得今天日期“的技巧，将结果alert 出一个对话窗口。

2,onblur

<script language="javascript">
function TestOnblur(){
    alert('test onblur');
}
</script>
<input type="text" onblur="TestOnblur()">

onblur 的意思是当某个元素失焦的时候，什么是失焦？可以说是当网友的鼠标游标从该元素移开，浏览器会根据网友点选其他元素时，认定原本的元素已经失焦，情况类似网友在填写某个表单元素，填写完之后，鼠标游标点选到下一个栏位继续填写资料，这个时候，原本在填写的那个栏位就产生了失焦的状态，用onblur 监听输入栏位，将会发现该事件。其实onblur 不完全是监听鼠标移到下一个栏位这么局限，而是当鼠标点选网页的其他地方都算是原本栏位失焦，以本范例来说，当鼠标移出栏位就会被onblur 发现而触发TestOnblur 函式。

3.onchange

<script language="javascript">
function TestOnchange(){
    alert('test onchange');
}
</script>
<select onchange="TestOnchange()">
<option>选项 A</option>
<option>选项 B</option>
</select>

onchange 事件是当一个元素发生改变的时候，例如下拉选单就是一个很容易改变的元素，网友从下拉选单中挑选其他项目的时候，就会被onchange 监听到，通常这样的行为模式，可以用来制作跳页选单。

4.onmouseover

<script language="javascript">
function ChangeBgColor(){
    document.getElementById("TBox").style="width:200px;height:60px;background-color:#FFC9C9;";
}
</script>
<div onmouseover="ChangeBgColor()" id="TBox" style="width:200px;height:60px;background-color:#FFCC6E;">
鼠标移经这将改变颜色
</div>

onmouseover 是鼠标事件的其中之一，代表当鼠标移经某个元素的时候，以此范例来说，当鼠标移经DIV 区块，就会触发ChangeBgColor 函数，将DIV 区块的背景颜色（background-color）变更，onmouseover 还可以用在网页中的其他不同元素上。