事件

事件:触发-响应机制。

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

事件三要素

  • 事件源:触发(被)事件的元素

  • 事件名称: click 点击事件

  • 事件处理程序:事件触发后要执行的代码(函数形式)

事件的基本使用

  1.  var box = document.getElementById('box');
     box.onclick = function() {
       console.log('代码会在box被点击后执行');  
     };

案例

  • 点击按钮弹出提示框

  • 点击按钮切换图片

事件详解

HTML事件

直接在HTML元素标签内添加事件,来执行脚本。

DOM0级事件

如果要给多个元素绑定事件,采用HTML的方式绑定,每个元素都要在标签内写好绑定事件,这样十分麻烦,也不利于维护,因此我们可以通过DOM0级事件的方式来为元素绑定事件,先获取DOM元素,再在元素上绑定事件。

注意!调用时,函数名后面不要加括号!如果加了括号,事件被触发前就执行。

案例

根据效果图,实现以下功能:

(1)当点击“录入”按钮时,循环弹出“请输入员工姓名”的输入框,每次录入一个员工的姓名。

(2)直到用户输入-1时,才停止弹出输入框,然后将用户输入的信息输出在页面上。

效果图如下:

思路

一系列代码需要在entryFn()方法中进行编写:

(1)  定义一个新数组,保存用户输入的所有信息,var arr=new Array();

(2)  定义一个变量,接收用户每一次输入的信息,var input;

(3) 使用while循环,循环弹出输入框,直到用户输入-1,则停止弹出;同时,需要把弹出框中获取到的内容放到第一步定义的数组中。

(4)  用户在输入框中输入的每一个信息,都被放进了新建的数组中,除了结束符-1,所以需要去除数组的最后一项,运用arr.pop();方法去除。

(5) 使用for循环,将用户输入的信息依次显示在页面中,注意i要+1,因为下表是从0开始的:

我的代码

鼠标事件

onload

onload 事件会在页面或图像加载完成后立即发生。

案例

补充下面的代码,实现以下功能:

(1)   当点击按钮时,按钮的字体颜色变成红色

(2)   当鼠标离开按钮时,字体颜色变成灰色

注意,把js脚本写在<head>标签中。

效果图如下:

思路

第一步:定义onload方法,并把所有的js代码放到onload方法中。

第二步:通过元素获取dom对象的方式获取到按钮元素

第三步:按钮绑定点击事件,当点击按钮时,按钮的字体颜色变为红色

第四步:按钮再绑定鼠标离开事件,当鼠标离开按钮时,按钮的字体颜色变为灰色

我的代码

onfocus &onblur

编程练习

根据效果图,补充代码,实现下列功能:

(1)当输入框获得焦点:

如果输入框值为空,提示“请输入您的姓名”

(2)当输入框失去焦点:

如果输入框值为空,提示“用户名不能为空”,并且边框颜色变为红色

如果输入框值不为空,那么没有提示文字,边框颜色是默认颜色

效果图如下:

思路

根据gif效果图完成下列步骤:

第一步:通过元素名获取dom对象的方式,得到输入框对象以及放置提示文字的元素对象,并用变量进行接收

第二步:给输入框绑定获得焦点事件,当输入框获得焦点时,判断:

如果值为空,输入框后出现提示文字“请输入您的姓名”

第三步:给输入框绑定失去焦点事件,当输入框获得焦点时,判断:

(1)如果值为空,输入框后出现提示文字“用户名不能为空”,并且将样式表中的边框样式添加给输入框

(2)如果值不为空,输入框后的提示文字消失,之前加上的样式也要去掉

Tips:

(1)  在第三步的判断中,如果值为空,给输入框加上颜色,那么当我们输入框获取焦点时,要将边框样式恢复默认样式

(2)用设置元素的class属性这个方法给输入框加样式,用到的是className属性给class添加值,比如this.className="red";

我的代码

onchange

给菜单绑定change事件,一般作用于select或checkbox或radio。

编程练习

根据效果图,补充代码,使用onchange事件实现下列功能:

(1)选择下拉列表中不同的选项,页面中的div就设置成不同的背景颜色,div中的内容也发生变化。 比如:选择黄色选项,div的背景颜色就变为黄色,文本内容就变为“我的背景颜色变成了yellow色”

(2)当选择下拉列表中的“请选择”时,div的背景颜色变成白色,文本变为“我没有发生任何变化”

效果图如下:

思路

第一步:定义onload事件,所有的js代码都放到onload方法中。

第二步: 通过id获取元素的方式得到下拉列表对象和div元素对象

第三步: 给下拉列表绑定选项发生变化时触发的事件(onchange事件),在事件中需要判断:

(1)如果下拉列表的value值是0时,div的背景颜色设置为白色,文本内容设置为“我没有发生任何变化”

(2)div的背景颜色与下拉列表的value值一致,文本内容随之变化为:“我的背景颜色变成了…”,注意这里需要拼接字符串。

我的代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>onchange()</title>
  6. <style type="text/css">
  7. #div{
  8. width:300px;
  9. height:300px;
  10. border:2px solid gray;
  11. margin:100px 0 0 200px;
  12. }
  13. </style>
  14. <script type="text/javascript">
  15. //补充代码
  16. window.onload=function(){
  17. var select = document.getElementById("color");
  18. var div = document.getElementById("div");
  19. select.onchange=function(){
  20. if(this.value == 0){
  21. div.innerHTML="我没发生任何变化";
  22. div.style.background="white";
  23. }else{
  24. div.innerHTML="我的背景颜色变成了"+this.value+"色";
  25. div.style.background=this.value;
  26. }
  27. }
  28. }
  29. </script>
  30. </head>
  31. <body>
  32. <div>
  33. <span>请选择您喜欢的颜色:</span>
  34. <select id="color">
  35. <option value="0">请选择</option>
  36. <option value="yellow">黄色</option>
  37. <option value="orange">橘色</option>
  38. <option value="pink">粉色</option>
  39. <option value="purple">紫色</option>
  40. </select>
  41. </div>
  42. <div id="div">我是div</div>
  43. </body>
  44. </html>

onsubmit

表单中的确认按钮被点击时发生。

onmousedownonmousemoveonmouseup

鼠标按下 & 鼠标移动 & 鼠标按下后松开

常用于拖动元素时绑定事件。

onresize

调整浏览器窗口大小时触发

onscroll

拖动滚动条时触发(浏览器窗口或某个元素的滚动条)

编程练习

根据下面的效果演示,补充代码,实现下列功能:

(1)  当鼠标在带滚动条的文本框上滑动时,字体颜色变成红色

(2)  当鼠标移出带滚动条的文本框时,字体颜色变成绿色

(3)  当鼠标移动文本框的滚动条时,空白的文本框出现文本“内容滚动了”

思路

第一步:通过id选取元素的方式分别获取这两个文本框

第二步:给带滚动条的文本框绑定事件

(1)绑定拖动滚动条时触发的事件,当滚动条被拖动时,空白文本框出现文本“内容滚动了”

(2)绑定鼠标移动时触发的事件,当鼠标在带滚动条的文本框上移动时,带滚动条的文本框字体颜色变为红色

(3)绑定鼠标离开时触发的事件,当鼠标在离开带滚动条的文本框时,带滚动条的文本框字体颜色变为绿色

我的代码

键盘事件与keycode属性

编程练习

根据效果图,补充下面的代码,

实现:

(1)在文本域中输入文本,文本域的字数限制在30个字以内。

(2)每当用户输入一个字,就要提示还能输入多少个字

(3)当用户输入的文本超出了30个字时,要提示用户超出了多少字

思路

第一步:获取到文本域对象、字数变化元素、字数超过限制提示标签

第二步:自定义一个变量,接收可输入的总字数(30)

第三步:给文本域绑定按键被松开时的事件,后跟匿名函数,以下步骤均在函数中

第四步:自定义变量,用于接收按键每松开一次获取一次文本域的值的长度

第五步:自定义变量,用于接收可输入的字体个数,b标签中的文本内容设置为该变量

第六步:判断,如果可输入的字数小于0,span标签的内容要设置为“已超出多少字”

我的代码

注意:获取文本框中文本用value而不是innerHTML·····

关于this指向

在事件触发的函数中,this是对该DOM对象的引用。

注册/移除事件的三种方式

  1.  var box = document.getElementById('box');
     box.onclick = function () {
       console.log('点击后执行');
     };
     box.onclick = null;
     
     box.addEventListener('click', eventCode, false);
     box.removeEventListener('click', eventCode, false);
     
     box.attachEvent('onclick', eventCode);
     box.detachEvent('onclick', eventCode);
     
     function eventCode() {
       console.log('点击后执行');
     }

兼容代码

  1.  function addEventListener(element, type, fn) {
       if (element.addEventListener) {
         element.addEventListener(type, fn, false);
      } else if (element.attachEvent){
         element.attachEvent('on' + type,fn);
      } else {
         element['on' + type] = fn;
      }
     }
     
     function removeEventListener(element, type, fn) {
       if (element.removeEventListener) {
         element.removeEventListener(type, fn, false);
      } else if (element.detachEvent) {
         element.detachEvent('on' + type, fn);
      } else {
         element['on'+type] = null;
      }
     }

事件的三个阶段

  1. 捕获阶段

  2. 当前目标阶段

  3. 冒泡阶段

    事件对象.eventPhase属性可以查看事件触发时所处的阶段

事件对象的属性和方法

  • event.type 获取事件类型

  • clientX/clientY 所有浏览器都支持,窗口位置

  • pageX/pageY IE8以前不支持,页面位置

  • event.target || event.srcElement 用于获取触发事件的元素

  • event.preventDefault() 取消默认行为

案例

  • 跟着鼠标飞的天使

  • 鼠标点哪图片飞到哪里

  • 获取鼠标在div内的坐标

阻止事件传播的方式

  • 标准方式 event.stopPropagation();

  • IE低版本 event.cancelBubble = true; 标准中已废弃

DOM——事件详解的更多相关文章

  1. JavaScript事件详解-jQuery的事件实现(三)

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  2. JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  3. JavaScript事件详解-zepto的事件实现

    zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...

  4. JAVASCRIPT事件详解-------原生事件基础....

    javaScirpt事件详解-原生事件基础(一)   事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...

  5. dom对象详解--document对象(一)

     document对象 Document对象代表整个html文档,可用来访问页面中的所有元素,是最复杂的一个dom对象,可以说是学习好dom编程的关键所在. Document对象是window对象的一 ...

  6. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  7. JavaScript中的鼠标滚轮事件详解

    JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...

  8. 移动端开发touchstart,touchmove,touchend事件详解和项目

    移动端开发touchstart,touchmove,touchend事件详解和项目 最近在做移动端的开发,在一个“服务商管理”页面使用到了触摸事件"touchstart",&quo ...

  9. react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)

    第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 ...

随机推荐

  1. pip install RISE报错解决

    ERROR: Cannot uninstall 'tornado' ERROR: Cannot uninstall 'tornado'. It is a distutils installed pro ...

  2. kubeadm部署多master节点高可用k8s1.16.2

    一.架构信息 系统版本:CentOS 7.6 内核:3.10.0‐1062.4.1.el7.x86_64 Kubernetes: v1.16.2 Docker­ce: 19.03 推荐硬件配置:2核4 ...

  3. leetcode-168周赛-1298-你能从盒子中获得的最大糖果数

    题目描述: 方法一:bfs class Solution: def maxCandies(self, status: List[int], candies: List[int], keys: List ...

  4. 「NOI2018」屠龙勇士 解题报告

    「NOI2018」屠龙勇士 首先对于每个龙用哪个剑砍,我们可以用set随便模拟一下得到. 然后求出拿这个剑砍这条龙的答案 \[ atk_ix-p_iy=a_i \] 其中\(atk_i\)是砍第\(i ...

  5. 基础(二):Linux系统/etc/init.d目录和/etc/rc.local脚本

    原文来自http://www.ghacks.net/2009/04/04/get-to-know-linux-the-etcinitd-directory/ 译文来自http://blog.csdn. ...

  6. NX二次开发-NXOpenC++ Example

    NxOpenC++ Example NXOpen::WCS wcs坐标系 https://www.cnblogs.com/nxopen2018/p/11368763.html NXOpen::Draw ...

  7. 简单理解Ext.extend

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. php编译安装增加pdo扩展

    首先查看mysql版本和位置 mysql --version whereis mysql 去php安装目录安装扩展 cd /usr/local/src/php-5.4.25/ext/pdo_mysql ...

  9. (转)ubuntu 下安装mysql5.5.30的过程以及遇到的问题

    转:http://blog.chinaunix.net/uid-27103408-id-3280584.html 由于实验需要安装mysql,当然我们可以通过sudo apt-get install ...

  10. C#获取局域网ip

    string hostName = System.Net.Dns.GetHostName();//本地计算机的 DNS 主机名的字符串 IPHostEntry hostInfo = Dns.GetHo ...