讲给后台程序员看的前端系列教程(38)——事件处理

C语言自学完备手册(33篇)Android多分辨率适配框架HTML5前端开发实战系列教程MySQL数据库实操教程(35篇图文版)推翻自己和过往——自定义View系列教程(10篇)走出思维困境,踏上精进之路——Android开发进阶精华录讲给Android程序员看的前端系列教程(40集免费视频教程 源码)版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdf...

讲给后台程序员看的前端系列教程(38)——事件处理

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程 源码)

版权声明
  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl
事件概述

事件被看作是JavaScript与网页之间交互的桥梁,当事件发生时,可以通过JavaScript 代码执行相关的操作。例如,用户可以通过鼠标拖曳登录框、改变登录框的显示位置、单击鼠标、双击鼠标等等。其实,在软件开发领域,几乎所有的GUI编程都会涉及到事件机制。比如,我们在Android中非常熟悉的单击,触摸,滑动,双击,长按等等都属于事件的范畴。今天我们就来学习JavaScript中事件处理机制。

事件模型

在此介绍JavaScript事件模型中的几个重要概念。

事件类型

事件类型(event type)是一个用于标明事件类型的字符串。例如:“click”表示单击事件;”load”表示页面或者图片加载完成的事件

事件目标

事件目标(event target)表示触发事件的对象。比如,点击button后发出一个click事件,那么该button就是事件目标也叫做事件源

事件

简单地来说,事件(event)=事件类型(event type) 事件目标(event target)。通常情况下我们描述一个事件都会包括两方面的信息:事件类型和事件目标。比如:页面中的红色button触发了click事件

事件监听器

事件监听器(event listener)也叫做事件处理器(event handler),顾名思义,它就是用于处理或者响应事件的JavaScript函数。

常见事件举例

在此,列举几个JavaScript常见的事件:

onclick 表示单击事件
onchange 表示域内容发生变化
onload 表示页面或图像被加载完成
onmousemove 表示鼠标移动
onmouseover 表示鼠标移到元素之上
onfocus 表示元素获得焦点
onselect 表示文本被选定

事件绑定及其处理

在此介绍JavaScript中几种常用的事件绑定及其处理的方式。

方式一:利用标签属性绑定事件处理函数

语法如下:

<标签名 事件="事件的处理程序">

在该语法中,标签名可以是任意的HTML标签,如div标签、button标签等等;事件是由on和事件名称组成的一个HTML属性,如单击事件对应的属性名为onclick;事件的处理程序指的是JavaScript代码,如匿名函数等。

示例如下:

<!DOCTYPE html><!-- 本文作者:谷哥的小弟--><!-- 博客地址:https://blog.csdn.net/lfdfhl--><html lang="en"><head><meta charset="UTF-8"><title>event</title></head><body><button id="button" onclick="buttonClick()">Please click me</button><script type="text/javascript">function buttonClick() {alert("You click the button");}</script></body></html>

结果如下:
在这里插入图片描述

需要注意的是,由于开发中提倡JavaScript代码与HTML代码相分离。因此,不建议使用该方式绑定和处理事件。

方式二:利用JavaScript代码绑定事件处理函数

语法如下:

元素对象.事件 = 事件的处理程序;

示例如下:

<!DOCTYPE html><!-- 本文作者:谷哥的小弟--><!-- 博客地址:https://blog.csdn.net/lfdfhl--><html lang="en"><head><meta charset="UTF-8"><title>event</title></head><body><button id="button">Please click me</button><script type="text/javascript">var button = document.getElementById("button");button.onclick = function() {alert("You click the button");};</script></body></html>

结果如下:
在这里插入图片描述

方式三:利用addEventListener( )绑定事件处理函数

语法如下:

对象.addEventListener(eventName,handle,useCapture);

在该语法中各参数详解如下:

  • eventName:事件名称。例如,单击事件传入”click”即可
  • handle:处理事件的函数。
  • useCapture:该boolean类型参数用于指定监听事件传播的哪个阶段。其中,false表示监听冒泡阶段;true表示监听捕获阶段

我想看到“捕获”二字,很多人心里都在想:这是啥玩意?!?

还记得我们Android里面的事件传递机制么?在Android开发中我们常提事件的传递和消费。其实在JavaScript中也是这么个套路,无非是换了个说法罢了——把”传递”说成了”捕获”;把”消费”说成了”冒泡”。也就是说,JavaScript里常说的事件捕获和冒泡与Android中常说的事件传递和消费是同一回事儿!所以,关于JavaScript的事件传播可以分成两个阶段:事件捕获阶段和事件冒泡阶段。嗯哼,关于JavaScript的事件传播不再赘述,如果有不明白的童鞋请参考我的博客专栏《 Android自定义View系列经典教程》,该教程中源码角度剖析了Android事件传递机制。

示例如下:

<!DOCTYPE html><!-- 本文作者:谷哥的小弟--><!-- 博客地址:https://blog.csdn.net/lfdfhl--><html lang="en"><head><meta charset="UTF-8"><title>event</title></head><body><button id="button">Please click me</button><script type="text/javascript">var buttonClick = function() {alert("You click the button");}var button = document.getElementById("button");button.addEventListener("click", buttonClick, false);</script></body></html>

结果如下:
在这里插入图片描述
在该示例中通过addEventListener( )为标签绑定了事件处理函数;类似地,也可在需要的时候利用JavaScript提供的removeEventListener( )解除事件处理函数的绑定。在该示例中,我们将addEventListener( )函数的第三个参数设置为false,表示不监听捕获阶段而监听冒泡阶段。其实,一般情况下均为第三个参数传入false即可。为什么呢?因为IE8和更老的浏览器压根就不支持对于捕获阶段的监听。

我们再回过头来瞅瞅事件的绑定及其解绑:

elementObject.addEventListener(eventName,handle,useCapture); elementObject.removeEventListener(eventName,handle,useCapture);

这一对方法的第三个参数useCapture表示是否监听捕获阶段:

如果设为false,表示不监听捕获阶段,监听冒泡阶段
如果设为true,表示不监听冒泡阶段,监听捕获阶段

事件对象

在JavaScript中当发生事件时都会产生一个事件对象event。该对象中包含着所有与 事件相关的信息:发生事件的DOM元素、事件的类型以及其它与特定事件相关的信息。例 如:鼠标移动发生事件时事件对象中会包括鼠标位置(横坐标、纵坐标)等相关的信息;操作键盘发生事件时,事件对象中会包括按下键的键值等相关信息。

示例如下:

<!DOCTYPE html><!-- 本文作者:谷哥的小弟--><!-- 博客地址:https://blog.csdn.net/lfdfhl--><html lang="en"><head><meta charset="UTF-8"><title>event</title></head><body><button id="button" class="buttonClass">Please click me</button><script type="text/javascript">var button = document.getElementById("button");button.onclick = function(event) {//获取事件的typevar type=event.type;//获取事件target(即触发此事件的元素)var target=event.target;//获取target的节点名var targetName=target.nodeName;//获取target的id属性的值var targetID=target.id;//获取target的class属性的值var targetClassName=target.className;//获取target的文本内容var targetInnerHTML=target.innerHTML;console.log("type=" type);console.log("target=" target);console.log("targetName=" targetName);console.log("targetID=" targetID);console.log("targetClassName=" targetClassName);console.log("targetInnerHTML=" targetInnerHTML);};</script></body></html>

结果如下:
在这里插入图片描述

事件分类

在此,按照事件发生场景不同对其进行分类介绍。

页面事件

JavaScript提供了页面事件,它改变JavaScript代码的执行时机。

常用页面事件如下:

  • load:当页面载入完毕后触发
    当body内所有标签都加载完成后触发load事件
  • unload:当页面关闭时触发
    当页面关闭时触发unload事件,在开发中经常用于清除引用和释放资源避免内存泄漏。
焦点事件

常用焦点事件如下:

  • focus:当获得焦点时触发
  • blur:当失去焦点时触发

示例如下:

<!DOCTYPE html><!-- 本文作者:谷哥的小弟--><!-- 博客地址:https://blog.csdn.net/lfdfhl--><html lang="en"><head><meta charset="UTF-8"><title>结合事件验证输入内容是否为空</title><style type="text/css">body {background: #ddd;}.loginDiv {background: #fff;padding: 20px 30px;width: 400px;margin: 0 auto;text-align: center;}button {width: 180px;height: 40px;background: #3388ff;border: 1px solid #fff;color: #fff;font-size: 14px;}input {width: 260px;padding: 4px 2px;}.tips {width: 440px;height: 30px;margin: 5px auto;background: #fff;color: red;border: 1px solid #ccc;display: none;line-height: 30px;padding-left: 20px;font-size: 13px;}</style></head><body><div id="tipsDivID" class="tips"></div><div class="loginDiv"><p><label>用户名:<input id="username" type="text"></label></p><p><label>密 码:<input id="password" type="password"></label></p><p><button id="login">登录</button></p></div><script>//页面载入完毕window.onload = function() {var usernameInput = document.getElementById('username');var passwordInput = document.getElementById('password');usernameInput.onblur = function() {isEmpty(this);};passwordInput.onblur = function() {isEmpty(this);};};// 判断输入内容是否为空function isEmpty(obj) {var tipsDiv = document.getElementById('tipsDivID');if (obj.value === '') {tipsDiv.style.display = 'block';tipsDiv.innerHTML = '输入内容不能为空!';} else {tipsDiv.style.display = 'none';}}</script></body></html>

结果如下:
在这里插入图片描述

鼠标事件

常用鼠标事件如下:

  • click:当按下并释放任意鼠标按键时触发
  • dbclick:当鼠标双击时触发
  • mouseover:当鼠标进入时触发
  • mouseout:当鼠标离开时触发
  • change:当内容发生改变时触发
  • mousedown:当按下任意鼠标按键时触发
  • mouseup:当释放任意鼠标按键时触发
  • mousemove:在元素内当鼠标移动时持续触发

该类事件常用属性如下:

  • clientX鼠标指针位于浏览器页面当前窗口可视区的水平坐标(X轴坐标)
  • clientY鼠标指针位于浏览器页面当前窗口可视区的垂直坐标(Y轴坐标)
  • pageX鼠标指针位于文档的水平坐标(X轴坐标),IE6〜8不兼容
  • pageY鼠标指针位于文档的垂直坐标(Y轴坐标),IE6〜8不兼容
  • screenX鼠标指针位于屏幕的水平坐标(X轴坐标)
  • screenY爵标指针位于屏幕的垂直坐标(Y轴坐标)

示例如下:

<!DOCTYPE html><!-- 本文作者:谷哥的小弟--><!-- 博客地址:https://blog.csdn.net/lfdfhl--><html lang="en"><head><meta charset="UTF-8"><title>鼠标单击页面时显示小圆点</title><style>.mouse {position: absolute;background: greenyellow;width: 40px;height: 40px;border-radius: 20px;}</style></head><body><div id="mouseID" class="mouse"></div><script>var mouse = document.getElementById('mouseID');document.onclick = function(event) {// 获取鼠标单击的位置var pageX = event.pageX;var pageY = event.pageY;// 计算圆点显示位置var targetX = pageX - mouse.offsetWidth / 2;var targetY = pageY - mouse.offsetHeight / 2;// 显示圆点 mouse.style.display = 'block';mouse.style.left = targetX'px';mouse.style.top = targetY'px';};</script></body></html>

结果如下:
在这里插入图片描述

键盘事件

常用键盘事件如下:

  • keydown:当任意键按下时触发
  • keyup:当任意键弹起时触发

示例如下:

<!DOCTYPE html><!-- 本文作者:谷哥的小弟--><!-- 博客地址:https://blog.csdn.net/lfdfhl--><html><head><meta charset="UTF-8"><title>按Enter键切换文本输入框</title></head><body><p>用户姓名:<input type="text"></p><p>电子邮箱:<input type="text"></p><p>手机号码:<input type="text"></p><script>var inputs = document.getElementsByTagName('input');for (var i = 0; i < inputs.length;i) {inputs[i].onkeydown = function(e) {// 按下键为回车键if (e.keyCode === 13) {for (var i = 0; i < inputs.length; i  ) {// 查找当前input的下标if (inputs[i] === this) {// 计算下个input元素的下标var index = (i1 >= inputs.length ? 0 : i1);break;}}// 假若下个input元素是文本框则获取键盘焦点if (inputs[index].type === 'text') {inputs[index].focus();}}};}</script></body></html>

结果如下:
在这里插入图片描述

表单事件

常用表单事件如下:

  • submit:当表单提交时触发
    submit事件需绑定到form标签上,当用户单击submit按钮时触发。事件返回值若是false则会取消默认操作,事件返回值若是true则执行默认操作。
  • reset:当表单重置时触发
    reset事件需绑定到form标签上,当用户单击reset按钮时触发。事件返回值若是false则会取消默认操作,事件返回值若是true则执行默认操作。

示例如下:

<!DOCTYPE html><!-- 本文作者:谷哥的小弟--><!-- 博客地址:https://blog.csdn.net/lfdfhl--><html><head><meta charset="UTF-8"><title>表单事件</title></head><body><form id="userForm"><label>用户名:<input id="username" type="text"></label><input type="submit" value="提交"><input type="reset" value="重置"></form><script>// 获取表单对象var userForm = document.getElementById('userForm');// 获取需要验证的元素对象var username = document.getElementById('username');// 为表单添加submit事件userForm.onsubmit = function(event) { console.log(event.type);// 判断表单元素内容是否为空,若为空则该事件返回false,否则该事件返回truereturn username.value ? true : false;}// 为表单添加reset事件userForm.onreset = function(event) {console.log(event.type);// 判断是否确认重置,若按下“确定”则该事件返回true,若按下“取消”则该事件返回falsereturn confirm('请确认是否要重置信息,重置后表单填写的内容将全部清空');}</script></body></html>

结果如下:
在这里插入图片描述

源文地址:https://www.guoxiongfei.cn/csdn/7962.html