首页 > 编程语言 >轻松学会JavaScript事件

轻松学会JavaScript事件

时间：2022-11-21 11:08:27浏览次数：45  
标签：function 元素 鼠标 学会 JavaScript 轻松 事件 document 监听


文章目录

  • ​​事件与事件流​​
  • ​​事件监听（绑定事件方法）​​
  • ​​JavaScript事件​​
  • ​​鼠标事件​​
  • ​​表单事件​​
  • ​​键盘事件​​
  • ​​UI事件​​
  • ​​快速投票​​


轻松学会JavaScript事件_前端

  事件可以说是JavaScript最引人注目的特性，因为它提供了一个平台，让用户不仅能浏览页面中的内容，而且能跟页面进行交互。

  本文将围绕JavaScript事件进行讲解，通过重案例代码和轻知识理论结合的方式带您简单的学会JavaScript事件的编写。

事件与事件流

1、事件

  事件是文档或者浏览器窗口发生的，特定的交互瞬间。事件是发生在HTML元素上的某些特定的事情，它的作用是使用页面具有某些行为，并执行某些动作。
  类比生活中的例子，学生听到上课铃响，就会走进教室。这里上课铃响相当于事件，走进教室相当于响应事件的动作。在一个网页中，已经预先定义好了很多事案件，开发人员可以编写相应的事件处理程序来响应相应的时间。
事件可以是浏览器行为，也可以是用户行为。例如下面3个行为都是事件。

  • 一个页面完成加载。
  • 某个按钮被单击。
  • 鼠标指针移动到某个元素上面。

2、事件流

  了解了事件的概念之后，还需要了解事件流的概念。由于DOM是树状结构，因此当某个子元素被单击时，它的父元素实际上也被单击了，它的的父元素的父元素也被单击了，一直到根元素。因此鼠标单击产生的并不是一个事件，而是一系列事件，这一系列事件就组成了事件流。

  一般情况下，当某个事件发生的时候，实际上都会产生一个事件流。而我们并不需要对事件流中的所有事件都编写处理程序，而只需要对我们关心的那一个事件编写程序进行处理就可以了。

轻松学会JavaScript事件_事件监听_02


  既然事件发生时总是以流的形式一次发生，那么就要分个先后循序。如上图所示，产生事件流的过程可以分为3个阶段：从最外层的根元素HTML开始依次向下，称为捕获阶段；到达目标元素p时，称为到达阶段；最后依次向上回到根元素，称为冒泡阶段。

  DOM轨发中规定，捕获阶段不会命中事件，如果需要的话，每个对象在捕获阶段和冒泡阶段都可以获得一次处理事件的机会。

事件监听（绑定事件方法）

  页面中的事件都需要一个函数来响应，这类函数通常被称为事件处理函数。从另外一个角度来说，这类函数时时都在监听是否有事件发生，因此它们又被称为事件监听函数。下面将介绍三种绑定事件方法。

1、简单的行内写法

  通常对于简单的事件，没必要编写大量复杂的代码，在HTML的标签中就可以直接定义事件处理函数，而且通常它们的兼容性很好。

案例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>简单的行内写法</title>
  </head>
  <body>
    <button onclick="show()">btn</button>
  </body>
  <script>
    function show(){
      alert('简单的行内写法');
    }
  </script>
</html>

这种写法虽然方便，但是有两个缺点：

  • 如果有多个元素需要有相同的事件处理方式，则需要为每个元素单独写事件监听函数，这样很不方便；
  • 这种方式不符合结构与行为分离的指导思想。

2、使用 HTML DOM 来分配事件

  HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件。

案例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>使用 HTML DOM 来分配事件方法</title>
  </head>
  <body>
    <button>btn</button>
  </body>
  <script>
    var btn = document.querySelector('button');
    btn.onclick = function(){
      alert('使用 HTML DOM 来分配事件方法');
    }
  </script>
</html>

3、设置事件监听函数

标准DOM定义了两个方法用于添加和删除事件监听函数，即addEventListener()和removeEventListener()。

案例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>设置事件监听函数方法</title>
  </head>
  <body>
    <button>btn</button>
  </body>
  <script>
    var btn = document.querySelector('button');
    btn.addEventListener('click',function(){
      alert('设置事件监听函数方法');
    })
  </script>
</html>

  在通常情况下，我们都使用默认事件冒泡机制。因此，如果一个容器元素里面 有多个同类子元素，而且要给这些子元素绑定同一个事件监听函数，则通常有两种方法：

  • 选出所有的子元素，然后分别给他们绑定事件监听函数；
  • 把事件监听函数绑定到容器元素上，然后在函数内部过滤出需要的子元素，最后进行处理。

总结一下，事件监听函数的格式是：
  [object].addEventListener(“event_name”,fnHandler,bCapture);

相应地，removeEventListener()方法用于移除某个事件监听函数。

案例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>removeEventListener()方法</title>
  </head>
  <head>
    <style>
      #myDIV {
        background-color: coral;
        border: 1px solid;
        padding: 50px;
        color: white;
      }
    </style>
  </head>
  <body>

    <div id="myDIV"> div 元素添加了 onm ousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
      <p>点击按钮移除 DIV 的事件句柄。</p>
      <button onclick="removeHandler()" id="myBtn">点我</button>
    </div>
    <p id="demo"></p>
    <script>
      document.getElementById("myDIV").addEventListener("mousemove", myFunction);

      function myFunction() {
        document.getElementById("demo").innerHTML = Math.random();
      }

      function removeHandler() {
        document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
      }
    </script>

  </body>
</html>

运行效果：

轻松学会JavaScript事件_表单_03

JavaScript事件

轻松学会JavaScript事件_表单_04


常见的JavaScript事件有四种：

  • 使用鼠标指针在页面上执行某些操作时所触发的事件。
  • 表单事件： 由HTML表单内的动作触发的事件。
  • 键盘事件： 使用键盘在页面上执行某些操作时所触发的事件。
  • UI事件： UI（User Interface，用户界面）事件，指的是那些不一定与用户操作有关的事件。

鼠标事件

事件名

描述

onclick

鼠标单击某个对象

ondblclick

鼠标双击某个对象

onmouseover

鼠标被移动到某个元素之上

onmouseout

鼠标从某元素移开

onmousedown

某个鼠标按键被按下

onmousemove

鼠标被移动

onmouseup

某个鼠标按键被松开

一个案例带您掌握鼠标事件的应用：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>鼠标事件</title>
    <style>
      li{
        height: 50px;
        border: 1px solid #f00;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>鼠标单击我看效果</li>![请添加图片描述](/i/ll/?i=0e0d4e66943948498b4592ebc424c542.gif)

      <li>鼠标双击我看效果</li>
      <li>鼠标移入我看效果</li>
      <li>鼠标移出我看效果</li>
      <li>鼠标在我这不停移动看效果</li>
    </ul>
  </body>
  <script>
    var liEles = document.querySelectorAll('li');
    liEles[0].onclick = function(){
      liEles[0].style.backgroundColor = '#ccc';
    }
    
    liEles[1].ondblclick = function(){
      liEles[1].style.backgroundColor = '#f00';
    }
    
    liEles[2].onmouseover = function(){
      liEles[2].style.backgroundColor = '#0f0';
    }
    
    liEles[3].onmouseout = function(){
      liEles[3].style.backgroundColor = '#00f';
    }
    
    liEles[4].onmousemove = function(){
      console.log('我在移动....')
    }
  </script>
</html>

运行效果：

轻松学会JavaScript事件_html_05

表单事件

事件名

描述

onfocus

元素获得焦点

onblur

元素失去焦点

onchange

用户改变域的内容

onreset

表单重置时触发

onsubmit

表单提交时触发

注意：表单重置事件不支持input标签，支持form标签。

一个案例带您掌握表单事件的应用：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>表单事件</title>
    <style>
      span{
        margin-left: 20px;
        color: #ccc;
      }
      
      .err{
        color: #f00;
      }
      
      .right{
        color: #0f0;
      }
    </style>
  </head>
  <body>
    <form>
      姓名:<input type="text"/><span></span>
    </form>
  </body>
  <script>
    var inputEle = document.querySelector('input');
    var spanEle = document.querySelector('span');
    
    //输入框绑定获得焦点事件，给span标签插入内容
    inputEle.onfocus=function(){
      spanEle.innerText='姓名长度为2-12位';
      spanEle.className='';
    }
    
    //输入框绑定失去焦点事件，给span标签插入内容
    inputEle.onblur = function(){
      //在输入框失去焦点之后，应该获取输入框中的内容，然后对内容的长度进行判断
      // console.dir(inputEle);
      var textValue =inputEle.value;
      if(textValue.length<2||textValue.length>12){
        spanEle.innerText='姓名长度不符合要求，应在2-12位';
        spanEle.className='err';
      }else{
        spanEle.innerText='姓名长度符合要求';
        spanEle.className='right';
      }
    }
  </script>
</html>

效果展示：

轻松学会JavaScript事件_表单_06

键盘事件

事件名

描述

onkeydown

某个键盘的键被按下

onkeypress

某个键盘的键被按下并释放一个键发生

onkeyup

某个键盘的键被松开

提示：
键盘事件的事件次序：onkeydown onkeypress onkeyup

案例一：带您掌握键盘事件的应用：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    姓名：<input type="text"/>
  </body>
  
  <script>
    var inputEle = document.querySelector('input');
    
    inputEle.onkeydown = function(){
      console.log('你按下了一个键');
    }
    
    inputEle.onkeyup = function(){
      console.log('你释放了一个键');
    }
  </script>
</html>

通过console控制台去观察键盘按下和松开时的输出信息。

案例二：松开键盘键s,自动获取焦点。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jQuery3.6.1.js"></script>
  </head>
  <body>
    姓名：<input type="text"/><br />
    自我介绍：<textarea></textarea>
  </body>
  <script>
    var inputEle = document.querySelector('input');
    var textareaEle = document.querySelector('textarea');
    
    inputEle.onkeydown =function(event){
      console.log(event);
    }
    
    
    //按下s键释放后，焦点自动到输入框中
    document.addEventListener('keyup',function(event){
      if(event.keyCode==83){
        inputEle.focus();
      }
    })
    
  </script>
</html>

效果展示：松开键盘s键后，自动获取焦点

轻松学会JavaScript事件_前端_07

UI事件

事件名

描述

onload

某个页面或图像被完成加载

onresize

窗口或框架被调整尺寸

onscroll

当文档被滚动时发生的事件

提示：
如果重载页面，也会出发unload事件（以及onload事件）

案例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
    div{
      width: 800px;
      height: 1500px;
      background-color: bisque;
      margin: 0 auto;
    }
  </style>
  <body>
    <div></div>
  </body>
  <script>
    window.onload=function(){
      alert("页面加载完成");
    }
    function reSizeFn(){
      alert("您改变了浏览器窗口大小！");
    }
    var divEle=document.querySelector('div');
    divEle.onscroll=function(){
      alert("您滚动了div!");
    }
  </script>
</html>

快速投票


标签：function,元素,鼠标,学会,JavaScript,轻松,事件,document,监听
From： https://blog.51cto.com/u_15740516/5872998

相关文章

  • 轻松学习jQuery事件和动画
    ✅作者简介：热爱国学的Java后端开发者，修心和技术同步精进。......
  • JavaScript基础快速复习
    目录学习信息01初识JavaScript浏览器执行JS过程JS的组成JS初体验JS的注释02JavaScript输入输出语句03变量变量概述变量的使用变量的语法扩展变量的命名规范04数......
  • javascript - 练习题：事件练习 - 贪吃蛇
    贪吃蛇原生JS（非面向对象的方式），渡一教学的笔记；地图坐标{0,0}{1,0}{2,0}{3,0}{4,0}{0,1}{1,1}{2,1}{3,1}{4,1}{0,2}{1,2}{2,2}{3,2}{4,2}{0,3}{1,3}{2,3}{3,3}{4,3}{0,4}{1,4}......
  • javascript入门
    javascript入门1.javascript的介绍JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部......
  • javascript: 用图片加载演示promise的应用(chrome 107.0.5304.110)
    一，js代码：<html><head><metacharset="utf-8"/><title>测试</title></head><body><imgid="img"src=""/><script>//记录开始时间leta=newDate......
  • How to find event listeners on a DOM node in JavaScript or in debugging?
    HowtofindeventlistenersonaDOMnodeinJavaScriptorindebugging?回答1Chrome,Firefox,VivaldiandSafarisupportgetEventListeners(domElement)inth......
  • javascript - 练习题：事件练习
    拖拽方块先写一个靠边停着的方块；<divstyle="width:100px;height:100px;background-color:red;position:absolute;left:20px;top:20px;"></div>按照拖拽的逻辑，实现需求：var......
  • 前端项目npm打包出错问题-Reached heap limit Allocation failed - JavaScript heap o
    其实就是编译时的内存溢出，因为打包文件过大，刚好超过内存的限制大小造成编译中断。解决方案一通过package.json中的"build"加大内存增加--max_old_space_size参数解决方......
  • 学会发现自己
    仅记录自己的想法，以及自己的情绪变化，用于调整和改变自己 我是一个自由的人，没有人会关心和在乎的人，这么说可能会有人反驳，你还有家人，朋友。事实上确实，我有家人，朋友，但......
  • JavaScript基础知识——对象
    定义无序数据的集合，键值对的集合。写法构造函数letuser=newObject({name:'yang',age:100})字面量letuser={name:'yang',age:200}匿名对象console.l......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99