JS之事件名称与事件对象

最新推荐文章于 2022-12-12 15:19:23 发布
最新推荐文章于 2022-12-12 15:19:23 发布
阅读量2.2k 收藏 3
点赞数 2
分类专栏： 前端 文章标签： 事件 ev js mouse
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liurongsheng123/article/details/79490318
版权

JS之事件

事件名称

鼠标事件一般加给div 
键盘事件一般加给document 输入框
提交与重置事件是加给整个form表单
<head>
    <style type="text/css">
        .redDiv{
            width:200px;
            height:200px;
            background-color:red;
        }
        body{
        // 为了出现纵向滚动条
            height:3000px;
        }
    </style>
</head>
<body>
    <div class="redDiv"></div>
    <form action="" id="uName">
        <input type="text" id="uName" />  // 创建文本框
        <input type="submit" id="submit" />  // 创建提交按钮
        <input type="reset" id="reset" />  // 设置重置按钮
    </form>
</body>
<script type="text/javascript">
    var redDiv = document.getElementsByClassName('redDiv')[0];
    var reg = document.getElementById('reg');
    var uName = document.getElementById('uName');

    // 鼠标事件
    redDiv.onmousemove = function(){
        console.log("鼠标移动的时候触发");
    }
    redDiv.onclick = function(){
        console.log("单击事件");
    }
    redDiv.ondblclick = function(){
        console.log("双击事件");
    }
    redDiv.onmousedown = function(){
        console.log("鼠标按下事件");
    }
    redDiv.onmouseup = function(){
        console.log("鼠标抬起事件");
    }
    redDiv.oncontextmenu = function(){
        console.log("鼠标右击事件");
        // 不添加返回值,右击时会出现菜单栏
        // 添加这个返回值,右击时菜单栏不会再出现
        return false;
    }

    // over和out会在鼠标从redDiv的父级移到子集的时候触发,先触发out,再触发over
    // leave和enter从redDiv(父级)移到blueDiv(子集)的时候不会触发
    // 只有鼠标离开/移入整个redDiv的时候才会触发
    redDiv.onmouseover = function(){
        console.log("over鼠标移入");
    }
    redDiv.onmouseout = function(){
        console.log("out鼠标移出");
    }
    redDiv.onmouseenter = function(){
        console.log("enter鼠标移入");
    }
    redDiv.onmouseleave = function(){
        console.log("leave鼠标移出");
    }

    // 键盘事件
    document.onkeydown = function(){
    // 按下任意键时触发
        console.log("down键盘按下");
    }
    document.onkeypress = function(){
    // 按下任意键触发
        console.log("press键盘按下");
    }
    // press与down的区别
    // press区分大小写,但不支持特殊键
    // dowm 不区分大小写,但支持特殊键
    document.onkeyup = function(){
    // 松开键时触发
        console.log("键盘拾起事件");
    }

    // 表单事件
    uName.oninput = function(){
        console.log(input内容发生改变后触发);
    }
    uName.onchange = function(){
        console.log(change内容发生改变后触发);
    }
    // text框中,移入一个英语单词,每当输入一个字母时,就会触发oninput事件
    // 当输入完毕,离开文本框时,会触发onchange事件
    uName.onfocus = function(){
    // 点击text文本框时触发
        console.log("聚焦");
    }
    // 再点击其他地方时,触发onblur事件
    uName.onblur = function("失焦");

    // 给form表单绑定事件
    reg.onsubmit = function(){
        console.log("提交");
        // 没有return false的时候,点击提交按钮会刷新页面
        // 有return false的时候,点击提交按钮不会刷新页面
        return false;
    }
    reg.onreset = function(){
    // 没有return false的时候,可以重置text框体内容
    // 有return false的时候,重置将会失败
        console.log("重置");
        return false;
    }

    // window事件
    window.onresize = function(){
        console.log("窗口尺寸发生变化的时候触发");
    }
    window.onscroll = function(){
    // 前提是要有滚动条
        console.log("窗口内容滚动的时候触发");
    }
    // 图片加载完成后 会触发这个方法
    img.onload = function(){

    }
    // 窗口加载完毕后,会触发这个方法
    window.onload = function(){
        console.log("窗口加载完毕后触发");
    }
</script>

事件对象

<head>
    <meta charset = "utd-8" />
    <title>事件对象</title>
    <style type="text/css">
        .body{
            height:3000px;
        }
        .redDiv{
            width:200px;
            height:200px;
        }
        p{
            margin:0px;
            height:100px;
            margin-left:100px;
            background-color:blue;
        }
    </style>
</head>
<body>
    <div class = "redDiv">
        <p></p>
    </div>
</body>
<script text="text/javascript">
    var dic = document.getElementsByClassName('redDiv')[0];
/*
为什么JS事件函数里面都有一个参数(ev)?
因为ev是事件的参数,在ev里面包含了事件触发时的参数,比如click事件中的ev中包含着e.pageX,e.pageY,keyDown事件中
包含着ev.keyCode等,在ie中,ev是全局的,可以通过window.event来获取,在其他浏览器中都是作为参数传入的.
所以好多事件函数都这样写:
mydiv.onclick = function(ev){
    if(!ev){
        ev = window.event; // 这句话也可以简写成:ev = window.event || ev;
    }
}
这么写为了兼容各个浏览器
在火狐浏览器中,事件绑定的函数要获取到事件本身,需要从函数中传入,而IE等浏览器则可以直接使用event或者window.event得到事件本身.
这一句话的用途:需要获取和事件相关的信息时使用
*/
    redDiv.onclick = function(ev){
        evObj = window.event || ev;
        // 触发事件的元素(触发事件的元素不一定是绑定事件的元素)
        // 各元素之间有关联的时候,触发一个事件,可能会影响到另外一个事件的触发
        console.log(evObj.target);
        // 鼠标距离窗口顶部的坐标 p标签本身有一个marginTop
        console.log(evObj.clientY);
        // 鼠标距离页面顶部的坐标
        console.log(evObj.pageY);
        // 鼠标举例target顶部的坐标
        console.log(evObj.offsetY);
    }
    document.onkeypress = function(ev){
    // keyCode标示按哪一个按键
        console.log("press" + ev.keyCode);
    }
    document.onkeydown = function(ev){
        console.log(ev.keyCode);
        if(ev.keyCode == 66){
            console.log("按了B");
        }
        // ev.metaKey
        if(ev.keyCode == 66 && ev.metaKey){
            console.log("按了command+b");
        }
    }
</script>
liurongsheng123
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 常用事件大全
浮幻的博客
08-27 5397
JavaScript 常用的事件以及事件对象，鼠标事件，键盘事件，触摸事件，表单事件...
js中事件的处理与浏览器对象示例介绍
10-26
本文将深入探讨JS中的简单事件处理和浏览器对象，并提供相关示例。 首先，让我们来看一下事件处理。在JavaScript中，有多种方式来处理事件。在提供的示例中，有两个例子展示了如何在HTML元素上绑定事件处理函数。一...
Js中所有事件列表,on+事件名,React 适用
林中明月间丶
12-08 914
https://reactjs.org/docs/events.html#clipboard-events Clipboard Events: onCopy onCut onPaste Keyboard Events: onKeyDown onKeyPress onKeyUp onFocus onBlur Form Events: onChange onInput onInvalid onReset onSubmit Mouse Events: onClick onContextMen.
js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件
weixin_33829657的博客
07-05 208
js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件 一、总结 一句话总结：event.type 描述事件的类型。 event.target 触发该事件的 DOM 元素。 event.currentTarget 在事件冒泡阶段中的当前DOM元素,等同于'this'。 1、event.target和event.currentTarget的...
事件名
weixin_39093202的博客
04-08 514
不同于组件和prop，事件名不逊在任何自动化的大小写转换。而是 触发的事件名需要完全匹配监听这个事件所用的名称。 如果触发一个camelCase名字的事件： this.$emit("myEvent") 则监听这个名字的kebab-case版本是不会有任何效果的： 这种写法没有效果～！ <my-component v-on:my-event="doSomething">&lt...
JS动态给对象添加事件的简单方法
10-21
在JavaScript中，动态地给对象添加事件是常见的需求，特别是在构建交互式的Web应用程序时。本文将详细介绍如何使用JavaScript为HTML元素动态添加事件监听器，并探讨跨浏览器兼容性问题。 首先，我们来理解...
JS实现点击事件统计的简单实例
10-21
- `cookie`：延迟上报时使用的cookie名称。 - `domain`：cookie存储的域名，应根据实际网站设置。 - `delay`：布尔值，决定是否延迟上报。如果为`true`，则使用cookie存储点击事件。 - `delay_attr`：标签中的属性，...
JS判断浏览器之Navigator对象
10-31
Navigator 对象在 JavaScript 中的应用 Navigator 对象是 JavaScript 中的一个内置对象，包含了关于访问者浏览器的所有信息。在 Navigator 对象中，我们可以获取浏览器的名称和版本号等信息。 一、appName 属性 ...
javaScript对象模型与事件处理资料.pdf
11-09
- **浏览器对象模型（BOM）** 提供了与浏览器交互的对象，比如`Navigator`、`Screen`、`Window`等，这些对象与网页内容无关，但能操控浏览器行为。 - **文档对象模型（DOM）** 是W3C制定的标准，允许程序和脚本...
JS 事件名称 与 事件对象
中正仁和,方广圆炁
03-18 2645
鼠标事件 一般会加给 div 键盘事件一般会加给document 输入框 提交与 事件重置 则是加给整个form表单 用 类名获取 redDiv 鼠标事件 redDiv.onmousemove = function(){ console.log("鼠标移动的时候触发") } //鼠标移动的时候触发 redDiv.onclik = function(){ console.log("单机事件...
js各种事件名称
weixin_42446516的博客
06-12 164
键盘事件 onKeyDown onKeyPress onKeyUp 焦点事件 onFocus onBlur 表单事件 onChange onInput onSubmit 鼠标事件 onClick onContextMenu onDoubleClick onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onMouseEnter onMo...
JS事件类型有哪些
boundle_ss的博客
10-29 2954
JS事件类型有哪些？分别是什么？ JavaScript可以处理的事件类型为：鼠标类型、键盘类型和HTML类型！ 注意：所有的事件处理函数都由两个部分组成，on+事件名称。 例如：click事件，处理函数就是onclick！ 鼠标事件。 click：单击鼠标按钮时触发； dblclick：当用户双击主鼠标按钮时触发； mousedown：当用户按下鼠标还未弹起时触发； mouseup：当用户释放鼠标按钮时触发； mouseover：当鼠标移到某个元素上方时触发； mouseout：当鼠标移.
单击事件
weixin_46174967的博客
01-19 362
//获取元素 给元素添加 单击事件 onclick: 鼠标的单击事件 方式一： 获取元素，在js中给元素绑定 备注： 直接赋值使用，不需要函数名 <input type="button" class="ipt" value="点我"/> <div class="box" style="wi...
前端的一些命名的总结
qq_17686345的博客
08-14 766
这是一篇以这些年在开发过程中逐渐总结形成的前端命名规则 主要分为：html、css、js 对js 1、对相关联的变量，使用对象来将它们包含在一起 目的是不让变量过于分散，便于管理变量，使得相关的变量一目了然 对象名称也相当于一个小型的命名空间，可以不用担心命名冲突 //比如页码 const pageInfo = reactive({ page: 1, size: 10, total: 0 }) 对方法的命名，根据事件的类型来命名 对一般的处理事件，使用
前端常用命名
YaNglIN123i的博客
12-12 1084
table,chart, graph, diagram: 表格，图表，曲线图，图表。uppercase/lowercase: 大/小写。repo(repository): 仓库；segment/fragment: 片段、碎片。env(envirnment): 环境。ref(reference): 引用。res(response): 响应。production: 线上；modifier: 修饰字；explicit: 显示的；implicit: 含蓄的；effect: 影响；primary: 原始的，第一的。
javascript 禁止事件_前端开发变量命名系列 - JavaScript篇
weixin_39653766的博客
11-20 161
JavaScript作为前端开发从业人员必须掌握的3大基础知识中最重要的一环，也是平是接触时间最长、写得最多的。在开发过程中必然会遇到命名的问题，你会词穷、纠结、惆怅吗？本文的出现相信能够解决大部分烦恼，让你轻松写出符合规范、易读、简短的代码。本文将通过大量的实例来试图自圆其说，形成一套系统化、实用的变量命名理化体系。通过按JavaScript的数据类型分类着手、细到一个函数的参数命名，并提供众多...
日常总结（3） 各种单击事件的总结
m_cainiaokuaifei的博客
12-17 565
学习了很多的事件的回调方法。想总结一下。 1 UGUI中1（1） 在编辑器里，Button有一个Click事件，是在Inspector面板中，需要一个游戏物体，这个游戏脚本中有一个公有的方法。在单击Button之后实现该方法的调用，可以调用Button自身的脚本中的方法，也可以是别的。别忘记空物体上也可以挂载脚本，有时这个方法会特别好用。 （2）Button也可以是实现接口。来使用单击的方法。
HarmonyOS实战—单击事件的四种写法
兮动人
07-27 511
文章目录单击事件的四种写法1. 自己编写实现类2. 当前类实现接口3. 自己编写实现类 和 当前类实现接口 的区别4. 匿名内部类5. 方法引用6. 小节 单击事件的四种写法 1. 自己编写实现类 编写实现类（MyListener）去实现 Component.ClickedListener 接口 在类里面重新下 onClick 方法，把点击代码实现的操作就写在 onClick 方法当中 实现代码： 创建项目名为：ListenerApplication ability_main.xml <?
JavaScript关于对象和事件的练习题
最新发布
05-11
1. 创建一个对象，包含以下属性和方法： 属性： - `name`: 字符串类型，表示对象的名称 - `age`: 数值类型，表示对象的年龄 - `gender`: 字符串类型，表示对象的性别 方法： - `greet()`: 打印出对象的名称和年龄，例如：`Hello, my name is John and I am 25 years old.` ```javascript let person = { name: "John", age: 25, gender: "male", greet() { console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); } }; ``` 2. 创建一个按钮，当点击按钮时，弹出一个警告框，显示`Hello World!`。 ```html <button onclick="alert('Hello World!')">Click me</button> ``` 3. 创建一个输入框和一个按钮，当点击按钮时，将输入框中的文本打印到控制台上。 ```html <input id="inputBox" type="text"> <button onclick="console.log(document.getElementById('inputBox').value)">Print input</button> ``` 4. 创建一个列表，包含若干个选项。当用户点击某个选项时，将选项的文本打印到控制台上。 ```html <ul> <li onclick="console.log(this.innerText)">Option 1</li> <li onclick="console.log(this.innerText)">Option 2</li> <li onclick="console.log(this.innerText)">Option 3</li> </ul> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值