Event事件常用对象==鼠标事件和表单事件

最新推荐文章于 2023-12-06 00:48:17 发布
最新推荐文章于 2023-12-06 00:48:17 发布
阅读量328 收藏
点赞数
分类专栏： 笔记 文章标签： javascript 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51847874/article/details/122796383
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: darkgoldenrod;
        }
        #inner {
            width: 100px;
            height: 100px;
            background-color: darkred;
        }
    </style>
</head>
<body>
    <div>
        <div id="inner"></div>
    </div>

    <script>
        var div = document.querySelector('div');

        // // click事件
        // div.onclick = function(e) {
        //     console.log(e.type);
        // };

        // // dblclick事件
        // div.ondblclick = function(e) {
        //     console.log(e.type);
        // };

        // // mouseover事件:如果有后代元素，那么在进入到后代元素或从后代元素再进入到自身时会多次触发该事件，
        

> // mouseover速度快，重复多

        // div.onmouseover = function(e) {
        //     console.log(e.type);
        // };

        // mouseout事件：问题同上，进入自己和后代的元素，不会重复触发在某个元素内
        // div.onmouseout = function(e) {
        //     console.log(e.type);
        // };

        // // mouseenter事件：如果有后代元素，不会重复触发，只有进出本元素才会触发
        // div.onmouseenter = function(e) {
        //     console.log(e.type);
        // };

        // // mouseleave事件：也没有重复触发问题
        // div.onmouseleave = function(e) {
        //     console.log(e.type);
        // };

        // mousedown事件：在鼠标压下去的时候只触发一次（包含后代元素），不会持续触发
        div.onmousedown = function(e) {
            console.log(e.type);
        };

        // mouseup事件
        div.onmouseup = function(e) {
            console.log(e.type);
        };

        // mousemove事件
        div.onmousemove = function(e) {
            console.log(e.type);
        };
    </script>
</body>
</html>

// mouseleave mouseenter，不冒泡，冒泡可以看作在后代元素是否重复触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #red {
            width: 300px;
            height: 300px;
            background-color: #f00;
        }
        #green {
            width: 200px;
            height: 200px;
            background-color: #0f0;
        }
        #blue {
            width: 100px;
            height: 100px;
            background-color: #00f;
        }
        div {
            margin: 50px auto;
            padding-top: 0.1px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="red">
        <div id="green">
            <div id="blue"></div>
        </div>
    </div>

    <script>
        var red = document.querySelector('#red');
        var green = document.querySelector('#green');
        var blue = document.querySelector('#blue');

        red.addEventListener('mouseenter', function() {
            console.log('red');
        }, false);
        green.addEventListener('mouseenter', function() {
            console.log('green');
        }, false);
        blue.addEventListener('mouseenter', function() {
            console.log('blue');
        }, false);
    </script>
</body>
</html>

//

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    用户名:
    <input type="text" name="userName">

    <script>
        var input = document.querySelector('input');

        input.onfocus = function(e) {
            console.log(e.type);
        };

        input.onblur = function(e) {
            console.log(e.type);
        };
    </script>
</body>
</html>

//

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    用户名：
    <input type="text" name="userName">

    <script>
        var input = document.querySelector('input');

        // oninput事件：当表单元素中的内容变化就会触发
        input.oninput = function(e) {
            console.log(e.type);
        };

        // onchange事件:当不当元素中内容变化，且失去焦点时触发，就是里面有东西，然后光标消失
        input.onchange = function(e) {
            console.log(e.type);
        };

        input.onblur = function(e) {
            console.log(e.type);
        };

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

//

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    用户名：
    <input type="text" name="userName">

    <script>
        var input = document.querySelector('input');

        // oninput事件：当表单元素中的内容变化就会触发
        input.oninput = function(e) {
            console.log(e.type);
        };

        // onchange事件:当不当元素中内容变化，且失去焦点时触发
        input.onchange = function(e) {
            console.log(e.type);
        };

        input.onblur = function(e) {
            console.log(e.type);
        };

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

//

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="ok.html">
        用户名:
        <input type="text" name="userName"><br>
        <button>提交</button>
        <button type="reset">重置</button>
    </form>


    <script>
        /* 
            submit事件：当提交按钮被点击时触发，注意该事件需要***给form元素***加,该事件可以被用来阻断数据的提交，如果该事件对应的事件处理函数的返回值为false，那么就会阻断提交
            reset事件：当重置按钮被点击时触发，注意该事件也是给form元素加
        */

        var form = document.querySelector('form');

        // form.onsubmit = function(e) {
        //     alert('提交按钮被点击了！！！');
        // };
        // form.onreset = function(e) {
        //     alert('重置按钮被点击了！！！');
        // };


        form.onsubmit = function() {
            return false;//如果submit事件处理函数的返回值为false，则阻断数据的提交
        };
    </script>
</body>
</html>

//

miku@meow
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
event事件---鼠标事件基础知识及其相关应用案例讲解
LYM0411的博客
05-22 890
event事件的鼠标事件基础介绍及相关案例
Event事件-2:mouseenter、mouseleave、mouseover、mouseout鼠标移入移出 / clientX鼠标位置 / pageX页面位置 / mousemove鼠标移动
kino2046的博客
03-17 822
mouseenter、mouseleave 鼠标移入移出 标移入或者移出，不受子级元素范围干扰 mouseover、mouseout鼠标移入移出 如果鼠标移入或者移出子元素范围，mouseover和mouseout会触发 clientX、clientY 鼠标位置 获取鼠标点击的位置（相对于显示区域可视区的位置） ...
【JavaScript 教程】事件——鼠标事件
油墨香^-^的博客
06-08 5791
作者 | 阮一峰 鼠标事件的种类 鼠标事件指与鼠标相关的事件，继承了MouseEvent接口。具体的事件主要有以下一些。 click：按下鼠标（通常是按下主按钮）时触发。 dblclick：在同一个元素上双击鼠标时触发。 mousedown：按下鼠标键时触发。 mouseup：释放按下的鼠标键时触发。 mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时
Mouse鼠标事件详解
最新发布
q1003675852的博客
12-06 2195
页面滚动会造成它们俩的数值不一致。我们知道我们给哪个元素绑定了事件，那么这个事件就是事件源，那么，当我们用事件委托来实现一些功能的时候，我们必须要知道我们的事件源。offsetX、offsetY ：事件属性返回触发事件时 鼠标相对于事件源元素 的X,Y坐标，标准事件没有对应的属性。mouseover事件发生时，事件的目标元素是获得光标的元素，但是有获得就有失去，此时的相关元素就是失去光标的元素。这是firefox独有的事件，当鼠标向前滚动时，event.detail的值为-3的倍数，否则为3的倍数。
event事件---鼠标事件
weixin_64804275的博客
05-22 147
鼠标事件事件类型坐标位置 事件类型 onclick单击事件 ondblclick双击事件 oncontextmenu右键菜单 onmouseover移入 onmouseout移出 onmouseenter移入 onmouseleave移出 onmousedown按下 onmouseup抬起 onmousemove移动 坐标位置 screenX在屏幕中的X坐标 screenY在屏幕中的Y坐标 clientX表示事件发生时鼠标指针在视口中的水平坐标（不包含滚动距离）（相对于body） clientY表示事
JavaScript详解(第2版)
04-25
　13.4.2　鼠标事件和图像——翻转　 　13.4.3　通过鼠标事件创建幻灯片　 　13.5　处理链接事件　 　13.6　处理表单事件　 　13.6.1　按钮　 　13.6.2　表单和按钮中的this关键字　 　13.6.3　表单和onClick事件...
javascript完全学习手册2 源码
04-12
第4章 JavaScript常用对象 4．1 Document对象 4．1．1 Document对象概述 4．1．2 使用Document对象 4．2 Form对象及其元素 4．2．1 Form对象概述 4．2．2 表单元素 4．2．3 表单元素属性和事件 4．2．4 表单验证 ...
javascript完全学习手册1 源码
04-12
第4章 JavaScript常用对象 73 4.1 Document对象 73 4.1.1 Document对象概述 73 4.1.2 使用Document对象 75 4.2 Form对象及其元素 79 4.2.1 Form对象概述 79 4.2.2 表单元素 80 4.2.3 表单元素属性和事件 82 4.2.4 ...
精通JS脚本之ExtJS框架.part1.rar
03-02
本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
精通JS脚本之ExtJS框架.part2.rar
03-02
本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
【JavaScript笔记】Event事件对象1
吾昂王
07-03 397
概念： 在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有事件相关的信息 获取事件对象-event： 事件对象：标准浏览器的事件对象是事件处理函数中的一个隐藏的（第一个）参数，可以通过参数获取对象 document.onmousedown = function(ev){//鼠标按下 ev:事件对象 console.log(ev); // console.log(arguments[0]) } document.onkeydown = functio..
mousedown、mouseup、click事件之间的关系及执行顺序
热门推荐
XCMercy
06-22 8万+
三个事件的触发时机 mousedown 当鼠标指针移动到元素上方，并按下鼠标按键（左、右键均可）时，会发生 mousedown 事件。 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。 mouseup 当在元素上松开鼠标按键（左、右键均可）时，会发生 mouseup 事件。 与 click 事件不同，mouseup 事件仅需要松开按钮。当鼠...
Event事件——鼠标事件
m0_62903673的博客
05-19 667
首先，什么是事件，事件就是可以被控件识别的操作，每一个控件、按钮都有自己的触发机制和产生相关的事件。比如，在搜索框上点击他就会出现光标让用户输入东西，这就是由点击产生的事件。在js里边事件由更好的定义。 基本事件类型分为 UI事件，鼠标事件，键盘事件，表单事件等。 接下来先对UI事件和键盘事件进行介绍： 1. UI事件就是不一定与用户操作有关的事件。它包含三个属性，load，resize，和scroll。 （1）load 当页面完全加载后在window上触...
HTML DOM Event对象中onmousedown与模拟鼠标事件
Shellerine的专栏
05-11 3771
刚开始疑惑已经有了onmousedown等事件，为什么还要大费周章的模拟鼠标事件呢。 因为它们的触发是不同的，前者是人为触发的，用户出发的；后者是写js代码来触发的，用户不用操作鼠标就能触发鼠标事件。 <img src="/i/example_mouse2.jpg" onmousedown="alert('You clicked the picture!')" />//这个是
鼠标事件-MouseEvent
weixin_34148456的博客
08-17 1263
当鼠标进行某种操作时，就会生成一个event对象，该对象记录着鼠标触发事件时的所有属性。 可以通过如下方法在google控制台打印出 MouseEvent 对象。 function mouseDown(e){ var e = e||event; console.log(e)}window.onload = function (){ document.getE...
惊讶！！js原生的拖拽居然有两种方法
Fancy_vae的博客
10-24 484
一.mousedown、mousemove和mouseup 拖着目标元素在页面任意位置 如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。 1.onmousedown：鼠标按下事件 2.onmousemove：鼠标移动事件 3.onmouseup：鼠标抬起事件 重点： 1、一定要绝对定位，脱离文档流才可以移动。 2、绑定拖拽的元素，移动和鼠标松开后是对document的绑定，因为移动的是整个div。 3、点击：a= 获取当前鼠标坐标、b =div距浏览器距离、c = 鼠标在div内
Event对象之鼠标事件
zzzzz周绍辉的博客
07-22 922
Event 对象Event 对象Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！事件句柄　(Event Handlers)HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入
js 获取鼠标位置
huolan__34的博客
12-27 2366
在JavaScript中，当事件发生时，获取鼠标的位置是件很重要的事件。由于浏览器的不兼容性，不同浏览器分别在各自事件对象中定义了不同的属性，说明如下表所示。这些属性都是以像素值定义了鼠标指针的坐标，但是由于它们参照的坐标系不同，导致精确计算鼠标的位置比较麻烦。 属性及其兼容性 属性 说明 兼容性 clientX 以浏览器窗口左上顶角为原点，定位 x 轴坐标 ...
html5游戏键盘事件,HTML5 Canvas鼠标与键盘事件
weixin_39968640的博客
05-31 142
演示HTML5 Canvas鼠标事件，获取Canvas对象上的鼠标坐标，演示键盘事件通过键盘控制Canvas上对象移动。Canvas对象支持所有的JavaScript的鼠标事件，包括鼠标点击(MouseClick), 鼠标按下(Mouse Down), 鼠标抬起(Mouse Up),鼠标移动( Mouse Move)对Canvas添加鼠标事件方式有两种，一种方式是通过API来完成：// mouse...
python 鼠标事件调用event的库
04-29
Python中可以使用Pygame库来调用鼠标事件，具体实现代码如下： ```python import pygame pygame.init() # 设置窗口大小 screen = pygame.display.set_mode((400, 300)) while True: for event in pygame.event....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值