小案例带你揭秘JS事件

小案例带你揭秘JS事件

### 什么是事件？
  • 在js中一个事件的组成由那些呢？

    • 谁触发事件：事件源
    • 触发什么事件: 事件的类型
    • 触发事件干什么事：事件处理函数

事件传播的过程

  • 捕获阶段

    • 就是从window事件处理函数开始，依次向内，只要事件目标的事件处理函数都会执行
    • 执行顺序是从上到下的函数执行顺序
  • 目标阶段
    • 你触发在哪个元素上那么这个事件的目标源就是谁
  • 冒泡阶段
    • 从事件目标的时间处理函数开始，依次向外，知道window的事件处理函数触发
    • 执行顺序是从内到外的

事件委托

  • 就是我们把要做的事情委托给别人做
  • 因为存在冒泡机制，点击子元素的时候，实际上也会同步触发父元素的相同事件
  • 所以我们可以把子元素的时间委托给父元素来监听

常见事件

  • 我们在写页面的时候经常用到的一些事件
  • 大致分为几类，浏览器事件 / 鼠标事件 / 键盘事件 / 表单事件 / 触摸事件
  • 不需要都记住，但是大概要知道

浏览器事件

  • load ： 页面全部资源加载完毕
  • scroll ： 浏览器滚动的时候触发
  • ...

鼠标事件

  • click ：点击事件
  • dblclick ：双击事件
  • contextmenu ： 右键单击事件
  • mousedown ：鼠标左键按下事件
  • mouseup ：鼠标左键抬起事件
  • mousemove ：鼠标移动
  • mouseover ：鼠标移入事件
  • mouseout ：鼠标移出事件
  • mouseenter ：鼠标移入事件
  • mouseleave ：鼠标移出事件
  • ...

键盘事件

  • keyup ： 键盘抬起事件
  • keydown ： 键盘按下事件
  • keypress ： 键盘按下再抬起事件
  • ...

表单事件

  • change : 表单内容改变事件
  • input : 表单内容输入事件
  • submit : 表单提交事件
  • ...

触摸事件

  • touchstart ： 触摸开始事件
  • touchend ： 触摸结束事件
  • touchmove ： 触摸移动事件
  • ...

事件案例

  • 鼠标坐标定位器
<!DOCTYPE html>
<!--
 * @Descripttion:
 * @version:
 * @Author: 小小荧
 * @Date: 2020-03-14 15:55:22
 * @LastEditors: 小小荧
 * @LastEditTime: 2020-03-14 16:08:19
 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 30px;
            position: absolute;
            bottom: 0;
            left: 0;
            border: 1px solid #eeeeee;
            background-color: aqua;
            box-sizing:  border-box;
            line-height: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div></div>

    <script>

//      获得div盒子的节点
        var div_ele = document.querySelector("div");
        // 绑定鼠标移动事件
        document.onmousemove = function( evt ){

            // 处理兼容
            var e = evt || event

            // 获取鼠标每次移动距离浏览器窗口左上角的坐标
            var client_x = e.clientX;

            var client_y = e.clientY;

            div_ele.innerHTML = "x:" + client_x + " y:" + client_y;
        }

    </script>
</body>
</html>

  • 模拟下拉菜单
<!DOCTYPE html>
<!--
 * @Descripttion:
 * @version:
 * @Author: 小小荧
 * @Date: 2020-03-10 21:26:28
 * @LastEditors: 小小荧
 * @LastEditTime: 2020-03-14 16:33:39
 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .container {
            width: 150px;
            height: 30px;
            margin: 30px auto;
        }

        span {
            display: block;
            width: 150px;
            height: 30px;
            border: 1px solid black;
            line-height: 30px;
        }

        .list {
            width: 150px;
            height: 30px;
            display: none;
        }

        .list li {
            width: 150px;
            height: 30px;
            border: 1px solid black;
            border-top: none;
            cursor: pointer;
        }

        .list .active {
            background: skyblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <span>请选择</span>
        <ul class="list">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Java</li>
            <li>Python</li>
        </ul>
    </div>
    <script>

        // 获取最外面大盒子的节点
        var container = document.querySelector(".container");

        // 获取菜单ul的节点
        var list_ele = document.querySelector(".list");

        // 获取菜单ul下面每一个li的节点
        var li_eles = list_ele.querySelectorAll(".list li");

        /*
        给最外层的盒子添加事件监听
        这里我们需要了解一下什么是事件委托
        事件委托的含义就是把自己的时间交给别人来完成
         */
        container.addEventListener("click", function (evt) {

            // 处理事件对象兼容

            var e = evt || event;

            // 拿到事件源
            var target = e.target || e.srcElement;

            // 判断事件源与我们点击的时间原是否一致
            if (target.nodeName === "SPAN") {

                // 让一开始隐藏的节点显示
                list_ele.style.display = "block";

                // 获取该节点下面所有的子元素节点
                li_eles = list_ele.children;

                // 循环遍历每一个节点为他们绑定事件
                for (var i = 0; i < li_eles.length; i++) {

                    // 绑定鼠标移入事件
                    li_eles[i].addEventListener("mouseover", function () {

                        // 调用函数用来处理class类名

                        removeClassName(li_eles, "active");

                        this.className += "active";

                    });

                    // 为每一个li绑定点击事件每当点击每一个里的时候我们需要将给li里面的内容放入选择框中
                    li_eles[i].addEventListener("click", function () {

                        target.innerHTML = this.innerHTML;
                        removeClassName(li_eles, "active");
                        list_ele.style.display = "none";

                    })
                }

            }

        });

        document.addEventListener("click", function () {

            list_ele.style.display = "none";

            removeClassName(li_eles, "active");

        }, true);

        /**
         * 删除active的className的名字
         *
         */
        function removeClassName(eles, className) {

            // 循环遍历每个节点，取出每个class

            for (var i = 0; i < eles.length; i++) {

                var class_name = eles[i].className.split(" ");

                var active_index = class_name.indexOf(className);

                // 如果找到了就把那个active删除

                if (active_index !== -1) {

                    // 删除

                    class_name.splice(active_index, 1);

                    // 删除之后我们在把处理好的值给拼接回去

                    eles[i].className = class_name.join(" ");

                }

            }

        }

    </script>
</body>

</html>

  • 图片拖拽加回放
<!DOCTYPE html>
<!--
 * @Descripttion:
 * @version:
 * @Author: 小小荧
 * @Date: 2020-03-11 10:34:04
 * @LastEditors: 小小荧
 * @LastEditTime: 2020-03-14 17:05:27
 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 100px;
            height: 100px;
            background: teal;
            position: absolute;
            top: 0;
            left: 0;
        }

        #replay {
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <button id="replay">回放</button>
    <script>
        (function () {
            // 盒子

            var box = document.getElementById("box");

            // 回放按钮节点
            var replay_btn = document.getElementById("replay");

            var drag_start = false;

            // 第一次鼠标按下的时候鼠标相对于点击元素的x轴距离
            var offset_x = null;

            // 第一次鼠标按下的时候鼠标相对于点击元素的y轴距离

            var offset_y = null;

            // 拖拽盒子的宽度

            var c_w_max = (document.body.clientWidth || document.documentElement.clientWidth) - box.offsetWidth;

            // 拖拽盒子的高度

            var c_h_max = (document.body.clientHeight || document.documentElement.clientHeight) - box.offsetHeight;

            // 存储没鼠标移动是x和y轴的坐标

            var replay_x_y_arr = [];

            //    鼠标按下事件
            box.onmousedown = function (evt) {
                var e = evt || event;

                drag_start = true;
                // 鼠标点击的时候我们需要获取鼠标距离这个元素左上角的坐标

                offset_x = e.offsetX;

                offset_y = e.offsetY;

                // 鼠标按下的时候我们需要降低一个坐标放入数组中记录

                var replay_x = this.offsetLeft;

                var replay_y = this.offsetTop;

                replay_x_y_arr.push({ x: replay_x, y: replay_y });
            }
            document.onmousemove = function (evt) {

                var e = evt || event;

                if (drag_start === false) {

                    return false;

                }

                var left_x = e.clientX - offset_x;

                var top_y = e.clientY - offset_y;

                left_x = left_x <= 0 ? 0 : left_x;

                left_x = left_x >= c_w_max ? c_w_max : left_x;

                top_y = top_y <= 0 ? 0 : top_y;

                top_y = top_y >= c_h_max ? c_h_max : top_y;

                // 每一次鼠标移动的时候我们把x和y的值放入数组中记录

                // 记录的数字我们可以优化一下，让最后一个数字和当前的数字之前差距为5px的时候在去存储
                if (Math.abs(left_x - replay_x_y_arr[replay_x_y_arr.length - 1].x) >= 5 || Math.abs(top_y - replay_x_y_arr[replay_x_y_arr.length - 1].y) >= 5) {

                    replay_x_y_arr.push({ x: left_x, y: top_y });
                }

                // 每一次拖动我们需要让盒子的位置发生变化

                box.style.left = left_x + "px";

                box.style.top = top_y + "px";

            }

            box.onmouseup = function () {
                drag_start = false;
            }

            // 回放按钮的监听

            var timer = null;

            replay_btn.addEventListener("click", function () {

                clearInterval(timer);
                timer = setInterval(function () {

                    // 将数组的最后一个元素取出
                    var item_val = replay_x_y_arr.pop();

                    // 然后分别把该对象的x值和y值分别设置给盒子的left和top
                    box.style.left = item_val.x + "px";

                    box.style.top = item_val.y + "px";

                    // 如果当数组为0的时候清空定时器
                    if (replay_x_y_arr.length === 0) {
                        clearInterval(timer);
                    }

                }, 50)

            });
        })();
    </script>
</body>

</html>

  • 顺表提起一下一些常见的默认事件

    • a标签的点击会默认跳转地址事件
    • submit点击后表单会直接提交事件
    • contentmenu浏览器奶鼠标右键弹出浏览器菜单事件
  • 如何禁止这些默认事件
    • 非IE浏览器使用event.preventDefault();
    • IE浏览器使用event.returnValue = false;
  • 阻止默认事件的兼容写法
<a href="https://www.baidu.com">点击我试试</a>
<script>
    var oA = document.querySelector('a')

  a.addEventListener('click', function (e) {
    e = e || window.event

    console.log(this.href)

    e.preventDefault ? e.preventDefault() : e.returnValue = false
  })
</script>

原文地址：https://www.cnblogs.com/xfy196/p/12496868.html

时间： 2024-10-04 03:37:44

小案例带你揭秘JS事件的相关文章

JS小案例分析

a.微博输入删除小案例 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } .box { width: 600px; margin: 100px auto; b

js小技巧: 给div绑定keydown事件

要想给一个元素绑定keydown事件我们经常这样: $('#some_thing').keydown(function(event){ ...... }) 但是当你尝试给div元素绑定时会发现不起作用, 解决办法是给这个div添加一个tabindex的属性: $('#some_div').attr('tabindex', 1).keydown(function(event){ ...... }) js小技巧: 给div绑定keydown事件

node.js(小案例)_实现学生信息增删改

一.前言 本节内容主要对小案例做一个总结: 1.如何开始搭建小项目 2.路由设计 3.模块应用 4.项目源码以及实现过程github地址: 项目演示如下: 二.主要内容 1.项目的关键性js源码: 项目的入口: /** * app.js 入门模块 * 职责: * 创建服务 * 做一些服务相关配置 * 模板引擎 * body-parser 解析表单 post 请求体 * 提供静态资源服务 * 挂载路由 * 监听端口启动服务 */ var express = require('express') v

JS高级---闭包小案例

闭包小案例 普通的函数 //普通的函数 function f1() { var num = 10; num++; return num; } console.log(f1()); //11 console.log(f1()); //11 console.log(f1()); //11 函数模式的闭包 //函数模式的闭包 function f2() { var num = 10; return function () { num++; return num; } } var ff = f2();

小天带你了解ajax

Ajax (asynchronous javascript and xml) 在没有ajax的时候,页面每次提交数据都必须销毁当前的页面,重新从服务器端获得一个页面.这样做不仅影响用户体验,而且会导致流量的浪费(都是钱啊).为了避免这种情况,google在2005年通过其Goggle Suggest使AJAX变得流行起来. (1)ajax的定义 在小天看来,ajax的本质就是利用浏览器提供的一个特殊的对象:XMLHttpRequest对象,也可以称为AJAX对象,向服务器发送异步请求.服务器返回

DevExpress控件的treeList完整小案例

这篇内容对刚接触treeList的程序员来说,会有一定的帮助. 以下会以一个小案例来讲解treeList的一些属性方法及事件 这是程序的窗体,frmTableMaintenance为窗体名,而groupControl1是一个分组控件,添加和修改都是 用同一个分组,也就是说,不管是添加还是修改,用的都是同一个页面,而button跟随操作的变化而变化 首先,加载树,即将数据绑定到treeList中 1 /// <summary> 2 /// 加载树 3 ///tl_TableMaintain是tr

Cookie插件小案例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <sc

javascript入门视频第一天 小案例制作 零基础开始学习javascript

JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此,小强老师给大家写了这篇入门的javascript文章.从零基础开始学习js,使大家入门更简单,希望大家喜欢.JavaScript是一种脚本语言. 也是我们web网络中最为流行一种脚本语言.脚本语言:     1.不是独立存在的.需要依附.js就是依附在浏览器中.     2.脚本语言也是语言,也有

node.js 事件发射器模式

目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEmitter 前言: 今天事儿太多了,没有发太多的东西.不好意思了各位. 本篇主要介绍Node.js中的事件驱动,至于Node.js事件概念的东西,太多了. 本系列课程主要抱着的理念就是,让大家慢慢的入门,我也尽量写的简单一点. 所以呢,本文事件驱动,大家的目标应该是:理解Node.js的事件驱动.会