注册事件addEventListener以及其他基本事件类型

已于 2023-02-16 18:22:56 修改
阅读量437 收藏
点赞数
文章标签： 前端 javascript 服务器
于 2022-11-10 11:28:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxllxl211/article/details/127785603
版权

在这里插入图片描述
btn[1].addEventListener(‘click’,function(){
alert(‘事件监听注册事件1’);
})
2.事件监听注册事件addEventListener()
(1)里面的事件类型是字符串，必定加引号，而且不带on
(2)同一个元素 同一事件，可以添加多个监听器（事件处理程序）

<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <script>
        btn=document.querySelectorAll('button');
        // 1.传统方法注册
        btn[0].onclick=function(){
            alert('传统1');
        }
        // 后面的会覆盖前面的注册事件
        btn[0].onclick=function(){
            alert('传统2');
        }

        // 2.事件监听注册事件addEventListener()
        // (1)里面的事件类型是字符串，必定加引号，而且不带on
        // (2)同一个元素 同一事件，可以添加多个监听器（事件处理程序）
        btn[1].addEventListener('click',function(){
            alert('事件监听注册事件1');
        })
        btn[1].addEventListener('click',function(){
            alert('事件监听注册事件2');
        })
        btn[1].addEventListener('mouseout',function(){
            alert('事件监听注册事件mouseout');
        })
        
    </script>

在这里插入图片描述
在这里插入图片描述
焦点事件

// 获的焦点
const ipt1=document.querySelector('.input1');
ipt1.addEventListener('focus',function () {
    console.log('我得到了焦点');
})
// 失去焦点
ipt1.addEventListener('blur',function () {
    console.log('我失去了焦点');
})

点击输入框
在这里插入图片描述

往屏幕其他位置点一下
在这里插入图片描述

键盘事件

<input type="text">

const input=document.querySelector('input');
input.addEventListener('keydown',function () {
    console.log('键盘按下了');
})
input.addEventListener('keyup',function () {
    console.log('键盘谈起了');
})

在这里插入图片描述

// 用户输入事件input
input.addEventListener('input',function () {
       console.log('用户输入了');
})

在这里插入图片描述
得到用户输入内容：元素.value

ipt.addEventListener('input',function () {
     // console.log('用户输入了');
     console.log(ipt.value);
})

在这里插入图片描述

lxl211
关注
addeventlistener事件参数_JavaScript事件详解
weixin_39639049的博客
11-22 4266
JavaScript 事件解析事件和事件绑定event reference事件： 浏览器赋予元素天生默认的一些行为，不论是否绑定相关的方法，只要进行相应的行为操作了，那么一定会触发相应的事件事件绑定： 给元素的某一个事件行为绑定方法，目的是行为触发时可以做点自己想做的事DOM0事件绑定element原理：给DOM元素的某一个私有事件属性赋值为函数。当用户触发这个事件行为,js引擎会帮助我们执行绑...
HTML DOM 事件
akuibpt23191的博客
07-13 601
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
JavaScript 事件监听器 addEventListener() 方法 和一些基本的事件
最新发布
qq_52530691的博客
07-01 3573
addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。
addEventListener() 方法 事件类型
sunsktop的博客
08-09 2044
addEventListener() 方法 事件类型
js addEventListener 鼠标事件类型汇总
子燕若水的博客
12-02 7692
Event Name Fired When auxclick A pointing device button (ANY non-primary button) has been pressed and released on an element. click (en-US) 在元素上按下并释放任意鼠标按键。 contextmenu (en-US) 右键点击（在右键菜单显示前触发）。 dblclick (en-US) 在元素上双击鼠标按钮。 mousedo
表单的验证js以及事件的注册代码详解教程共25页.pdf
10-31
以上是表单验证和事件注册的基本概念和实践方法。实际应用中，还需要考虑性能优化，如避免不必要的重复验证，以及兼容性和辅助功能的增强。这个25页的教程应该会深入到这些细节，并提供具体的示例代码，帮助读者更好...
关于js注册事件的常用方法
10-27
`addListener` 函数接受三个参数：要注册事件的元素（element），事件类型（type），以及事件处理函数（fn）。在函数内部，首先通过`typeof element == 'undefined'`检查确保传入了有效的元素。接着，函数会检查元素...
JS给元素注册事件的代码
10-30
### JS给元素注册事件的代码：麦鸡的TAB切换功能 #### 一、概述 本文档将详细介绍如何使用JavaScript为HTML元素添加事件监听器来实现一个简单的TAB切换功能。通过这种方式，用户可以通过点击不同的标签来切换显示...
Javascript 注册事件浅析
10-30
### JavaScript 注册事件浅析 #### 一、事件驱动机制概览 JavaScript 是一种典型的事件驱动语言，这意味着程序的行为主要由用户与网页交互时触发的事件来决定。这些事件可以是用户点击按钮、键盘输入或其他任何...
addeventlistener事件参数_「React进阶系列」史上最全React事件机制详解
weixin_39648492的博客
11-21 1717
框架总览 DOM事件流的三个阶段 关于React事件的疑问 React事件绑定机制 React事件和原生事件有什么区别 React事件和原生事件的执行顺序，可以混用吗 React事件如何解决跨浏览器兼容 React stopPropagation 与 stopImmediatePropagation 从React的事件机制源码看整个流程 基本流程 事件注册 事件触发 总结 站在巨人肩上DOM事件...
addEventListener 的另类写法
weixin_33875839的博客
10-15 131
addEventListener 参数如下 addEventListener(type, listener[, useCapture]); type，事件名称 listener，事件处理器 useCapture，是否捕获 一直把 listener 记成是响应函数，function 类型。相信很多人也是这么理解的。多数时候是这么使用 elem.addEventLi...
JavaScript 的addEventListener() 事件监听详解！
一亩地的专栏
12-19 5779
JavaScript 的addEventListener() 事件监听详解！ addEventListener() 用于向指定元素添加事件。  可以向一个元素添加多次事件或者多次不同事件，后面的事件是不会覆盖前面的。 语法：  element.addEventListener(event,fn,useCaption );  参数说明：tr件，比如 click mouseenter mouselea...
JS事件简单总结
野草园
03-04 497
这个其实不是很好描述，有可能是由用户发起的，比如鼠标事件，键盘事件，窗口事件，表单事件，也有可能是页面加载资源过程中的事件。常见的事件比如：click, dbclick, keydown, keypress, keyup, mousemove, wheel, scroll, focus, blur, load, unload, abort, error, resize, change, select, submit。
web前端学习（四十一）——JavaScript DOM EventListener（添加与移除监听事件）
热门推荐
★★光亭★★
02-22 1万+
web前端学习（四十一）——JavaScript DOM EventListener（添加与移除监听事件）
JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数...
weixin_34417200的博客
01-08 587
本篇体验JavaScript事件的基本面，包括：   ■ 事件必须在页面元素加载之后起效■ 点击事件的一个简单例子■ 为元素注册多个点击事件■ 获取事件参数 ■ 跨浏览器事件处理 □ 事件必须在页面元素加载之后起效   有这样一段简单的代码：&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=ut...
addEventListener（）和attachEvent（）的区别和兼容写法
qq_37321858的博客
09-05 2749
addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。 addEventListener共有3个参数，如下所示： element...
事件侦听注册事件（addEventListener）
weixin_52212950的博客
02-27 734
注册事件有两种方式，一种是之前的传统的注册事件方式，还有一种是事件侦听注册方式，两者在效果输出上有一定的差异。 传统的注册事件：没有兼容性问题，同一个元素同一个事件只能设置一个处理程序，最后写入的处理函数会覆盖掉之前的，并且事件前有 ‘on’，例如 onclick ，onmouseover 等等。 事件侦听注册事件（addEventListener）：是W3C推荐的方式，但是有兼容性问题，IE9以下浏览器不可使用此方法，优点为同一个元素同一个事件可以设置多个处理程序，里面的参数事件类型是字符串，要加
addEventListener( ) 方法 -- 事件监听
m0_52545254的博客
07-11 6548
事件监听/捕获/冒泡
addeventlistener事件js
06-26
这个方法允许你在特定的DOM（文档对象模型）元素上注册事件处理程序，以便在触发指定事件时执行相应的代码。 **基本用法**: ```javascript element.addEventListener(eventType, eventHandler, [useCapture]); ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值