JavaScript 事件

JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

(在JavaScript中，必须 有定义事件和调用事件或者也可以称为触发事件。）例如：

在script中定义事件，在元素中触发事件。

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

在以下实例中，按钮元素中添加了 onclick 属性 (并加上代码):

<body>
<p id="demo">我要被修改了，好怕怕呀！</p>
<script>
  function myfunction(){
   document.getElementById("demo").innerHTML=Date();
  }
</script>
<button type="button" onclick="myfunction()">The time is?</button>           //当我们在点击button这个按钮的时候，会触发onclick事件，因而执行myfunction方法，实现曹作。


常见的HTML事件

下面是一些常见的HTML事件的列表:

事件描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载


JavaScript 可以做什么?

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

  • 页面加载时触发事件
  • 页面关闭时触发事件
  • 用户点击按钮执行动作
  • 验证用户输入内容的合法性
  • 等等 ...

可以使用多种方法来执行 JavaScript 事件代码：

  • HTML 事件属性可以直接执行 JavaScript 代码
  • HTML 事件属性可以调用 JavaScript 函数
  • 你可以为 HTML 元素指定自己的事件处理程序
  • 你可以阻止事件的发生。
  • 等等 ...

(一)onclick事件

onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。

<head>
   <script type="text/javascript">
      function add2(){
        var numa,numb,sum;
        numa=6;
        numb=8;
        sum=numa+numb;
        document.write("两数和为:"+sum);  }
   </script>
</head>
<body>
   <form>
      <input name="button" type="button" value="点击提交" onclick="add2()" />
   </form>
</body>
注意: 在网页中，如使用事件，就在该元素中设置事件属性。

(二)onmouseover

鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

<body>
<form>
    <lable>密码：</lable>
    <input type="password"   name="pass" />
    <input type="button"  onmouseover="add2()"  name="cn" value="确认">
</form>
<script>
  function add2(){
      alert("请输入密码后，再单击确认");
  }
</script>
</body>

 

(三)鼠标移开事件（onmouseout）

鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。

当把鼠标移动到"登录"按钮上，然后再移开时，触发onmouseout事件，调用函数message()，代码如下:

body>
<form>
    <lable>密码：</lable>
    <input type="password"   name="pass" />
    <input type="button"  onmouseout="add2()"  name="cn" value="确认">
</form>
<script>
  function add2(){
      alert("不要离开，只要输入密码，再单击登录，就ok了！");
  }
</script>
</body>

(四)光标聚焦事件（onfocus）

当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。

如下代码, 当将光标移到文本框内时，即焦点在文本框内，触发onfocus 事件，并调用函数message()。

(五)失焦事件（onblur）

onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。

如下代码, 网页中有用户和密码两个文本框。当前光标在用户文本框内时（即焦点在文本框），在光标离开该文本框后（即失焦时），触发onblur事件，并调用函数message()。

（六）内容选中事件（onselect）

选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。

如下代码,当选中用户文本框内的文字时，触发onselect 事件，并调用函数message()。

 

(七)文本框内容改变事件（onchange）

通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。

如下代码,当用户将文本框内的文字改变后，弹出对话框“您改变了文本内容！”。

（八）加载事件（onload）

事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：1. 加载页面时，触发onload事件，事件写在<body>标签内。

      2. 此节的加载页面，可理解为打开一个新页面时。
如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”

（九）

卸载事件（onunload）

当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。

注意：不同浏览器对onunload事件支持不同。

如下代码,当退出页面时，弹出对话框“您确定离开该网页吗？”。

综合练习<!--使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。-->
<form>
    <input type="text" id="con1" value="输入的值"/>
    <select  id="con">
        <option  value="+"> + </option>
        <option  value="-"> -</option>
        <option  value="*"> * </option>
        <option  value="/"> /</option>
    </select>
    <input type="text" id="con2"  value="输入的值"/>
    <input type="button" id="co" value="=">
    <input type="text" id="cont" onclick="add()" value="结果值" />
</form>
<script>
    function add(){
        var x,y;
        x=document.getElementById("con1").value;
        y=document.getElementById("con2").value;
        if(document.getElementById("con").value=="+") {
            document.getElementById("cont").value=x+y;
        }
        if(document.getElementById("con").value=="-") {
            document.getElementById("cont").value=x-y;
        }
        if(document.getElementById("con").value=="*") {
            document.getElementById("cont").value=x*y;
        }
        if(document.getElementById("con").value=="/") {
            document.getElementById("cont").value=x/y;
        }
   }
</script>
</body>

 （十）onsubmit事件。

定义和用法

onsubmit 事件会在表单中的确认按钮被点击时发生。

支持该事件的 HTML 标签：

<form>

支持该事件的 JavaScript 对象：

form

例如：                                                                                             结果：
解析：首先onsubmit只用于form表单中，当点击表单中的提交按钮会执行该事件。当myfunction返回值为false，则表单不提交，否则，提交表单。在上例中myfunction返回值为false，因而不提交表单。在onsubmit中调用myfunction必须有return，不然myfunction的返回值哪怕是false，仍然提交。也就是说，onsubmit=“return false”为不执行提交；onsubmit=“return true”或onsubmit=“return ”都执行提交；




 （十）onmousedown onmouseup事件。




<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<head>
<script>
function lighton(){
	document.getElementById('myimage').src="/statics/images/course/pic_bulbon.gif";
}
function lightoff(){
	document.getElementById('myimage').src="/statics/images/course/pic_bulboff.gif";
}
</script>
</head>


<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="/statics/images/course/pic_bulboff.gif" width="100" height="180" />
<p>点击不释放鼠标灯将一直亮着!</p>
</body>
</html>



当点击图片时，灯一直亮着（当点击鼠标时，触发onmousedown事件，图片为亮着的那种图片）
















 当松开鼠标，触发onmouseup事件（此时，图片为灯灭着的另一张图片）





HTML DOM EventListener


addEventListener() 方法




实例


当用户点击按钮时触发监听事件：


document.getElementById("myBtn").addEventListener("click", displayDate);











addEventListener() 方法用于向指定元素添加事件句柄。


addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。


你可以向一个元素添加多个事件句柄。


你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。


你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。


addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。


当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。


你可以使用 removeEventListener() 方法来移除事件的监听。























语法




element.addEventListener(event, function, useCapture);










第一个参数是事件的类型 (如 "click" 或 "mousedown").


第二个参数是事件触发后调用的函数。


第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。





Note
注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。




























在此例中，我们对于button这个元素没有定义属性onclick，在JavaScript中用了监听事件添加onclick事件。


向同一个元素中添加多个事件句柄


addEventListener() 方法允许向同个元素添加多个事件，且不会覆盖已存在的事件：




实例


element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);












你可以向同个元素添加不同类型的事件：




实例


element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);



传递参数


当传递参数值时，使用"匿名函数"调用带参数的函数：




实例


element.addEventListener("click", function(){ myFunction(p1, p2); });





事件冒泡或事件捕获？


事件传递有两种方式：冒泡与捕获。


事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？


在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。


在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。


addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：




addEventListener(event, function, useCapture);







默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。





removeEventListener() 方法


removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:




实例


element.removeEventListener("mousemove", myFunction);



























        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/yyn120804/p/7365673.html