原生js事件及其触发条件

最新推荐文章于 2023-06-30 15:24:48 发布
最新推荐文章于 2023-06-30 15:24:48 发布
阅读量294 收藏 2
点赞数 1
分类专栏： 方法查找 文章标签： javascript dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55869886/article/details/115544375
版权
js事件触发条件
onclick单击绑定元素
ondblclick双击绑定元素
onfocus绑定元素获取焦点
onblur绑定元素失去焦点
onchange绑定元素内容发生改变
onscroll绑定元素中的滚动条滚动
onmouseup鼠标按键松开
onmousedown鼠标按键按下
onmousemove鼠标移动
onmouseover鼠标移动到绑定元素中
onmouseout鼠标移动到绑定元素外
onmousewheel鼠标滚轮滚动
onkeyup键盘按键松开
onkeydown键盘按键按下
onkeypress键盘按键长按不松开
onload绑定元素加载完成
onunload退出页面
onresize浏览器窗口大小改变
ondrag绑定元素被拖拽 每350毫秒(ms)触发一次
ondragstart开始拖拽绑定元素时触发
ondragend绑定元素完成拖拽后触发
为什么选b
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS通用方法触发点击事件代码实例
11-20
这篇文章主要介绍了JS通用方法触发点击事件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最简单的触发单击事件肯定是elem.click()，平时在不需要考虑兼容性的场合我都是这么干的，但是毕竟这个方法有兼容性（具体兼容性如何没做过测试），所以还是要掌握一个通用的方法。 以下代码是网上比较容易找到的一段代码，我在前面加了一段MouseEvent的判断： /** * 触发单击事件 * @param elem 需要触发事件的DOM对象 */ function fireClickEvent(elem) { var event;
原生js自动触发事件
weixin_30505225的博客
10-21 986
熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件，那就是trigger（），那么通过原生js又怎么模拟触发呢？ js中添加一个主动触发事件的方法有dispatch。该方法能模拟用户行为，如点击（click）操作等。 标准使用dispatchEvent方法，IE6/7/8则使用fireEvent方法。 dispatchEvent() 方法给节点分派一个合成事件。 ...
js原生触发事件
anshaobiao6449的博客
03-13 593
在JQ时代我们使用如下方式，可以手动触发事件 $("button").click(function(){ $("input").trigger("select"); }); 但是如今的web application 已经淘汰JQ了，原生怎么写呢？很简单 先new一个事件，然后dom.dispatchEvent就可以了 const event = new Eve...
js触发元素的原生事件
04-01 988
平常大部分情况下是不需要触发元素的原生事件，但是有时很有必要模拟原生事件就会用到，直接看代码： /** * 触发元素的原生事件 *@params elem *@params type event type, such as: click, blur, focus, change ... *@returns */ function fire(elem, type){ var e
原生js常用的事件触发方法
Z_hai_yan的博客
04-09 2130
鼠标事件 onclick：单击鼠标时触发 ondblclick：当用户双击主鼠标按钮时触发； onmousedown：当用户按下鼠标还未弹起时触发； onmouseup：当用户释放鼠标按钮时触发； mouseover：当鼠标移到某个元素上方时触发； mouseout：当鼠标移出某个元素上方时触发； mousemove：当鼠标指针在元素上移动时触发； mouseenter：在鼠标光标从元素外部首次移动至元素范围内触发，不参与冒泡； mouseleave：鼠标移出； html事件 键盘事件 ...
vue学习笔记之给组件绑定原生事件操作示例
10-15
本篇文章将详细介绍如何在Vue组件中绑定原生事件以及遇到的问题及其解决方案。 首先，当我们尝试在父组件中直接为子组件定义一个点击事件（如`@click`），并期望它能正常触发时，会发现事件并未按预期工作。这是...
原生js实现下拉框功能（支持键盘事件）
11-27
在本文中，我们将深入探讨如何使用原生JavaScript实现下拉框功能，并且支持键盘事件。首先，我们需要了解HTML中的`<select>`元素及其关联的`<option>`元素，它们是创建下拉列表的基础。在纯JavaScript环境中，我们不...
js事件广播实现数据传递
12-24
### js事件广播实现数据传递 在JavaScript开发中，事件机制是一种非常重要的编程模式，它可以用于在不同的组件或模块之间进行通信。特别是在复杂的前端应用中，合理利用事件机制能够有效地提高代码的可维护性和扩展...
原生js下拉菜单带搜索
06-01
在这个场景下，“原生js下拉菜单带搜索”是一个实用的解决方案，它能够提升用户体验，让用户在大量的选项中快速找到目标。下面我们将详细探讨如何使用原生JavaScript实现这个功能，以及与之相关的jQuery特效。 首先...
Vue.js 事件修饰符的使用教程
12-07
这与JavaScript原生事件处理不同，Vue.js默认使用冒泡阶段。例如，如果希望在事件到达目标元素之前执行处理函数，可以在事件监听器上使用`.capture`。 4. `.self`修饰符：当设置了`.self`，只有在事件的直接目标...
原生js事件创建及触发
liangjm99的专栏
05-04 510
function go(e){ e=e||window.event; if(e.keyCode==13){ var btn =document.getElementById('link'); if( document.createEvent ) { var evObj = document.createEvent('MouseEvents'); e
关于js的事件触发
LXY224的博客
03-16 375
事件流是描述从页面接受事件的顺序事件分为三个阶段：事件捕获阶段目标事件阶段事件冒泡阶段事件冒泡是指事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点事件捕获是指的不太具体的节点应该先接受到事件，而最具体的节点应该最后接受到事件。事件捕获的意义在于事件到达预定目标之前捕获它实际上，目标在捕获阶段不会接受到事件在使用案例说明之前，先说明几个对象：event对象中有三个属性，在之后会被使用...
click事件形成的条件 - Eric
weixin_33859844的博客
01-11 788
鼠标点击后触发click事件的必要条件 - Eric 场景 1、页面上有很多输入框（发货单号），鼠标离开文本框会向后台发送请求保存发货单号，请求时页面会出现loading遮罩。2、页面上有一个【发货】按钮，点击发货按钮会向后台获取需要发货的数据（包含发货单号） 问题 在输入框中填写完发货单号，直接点击发货按钮时，有时候无法触发发货事件(...
js原生点击事件三种写法
weixin_51070638的博客
06-27 4768
【代码】js原生点击事件三种写法。
javascript 触发事件
最新发布
迹忆客
06-30 1090
我们将在冒泡事件传播中使用父子树来演示此实例。主要任务是创建表单和文本区域元素，其中表单是父元素。接下来，我们使用新的创建一个事件。我们的事件的名字很酷，它以气泡的对象为真，细节将是文本区域的值。稍后，该表单将有一个 eventListener，它会说酷事件将在触发时处理其内容。最后，我们使用触发事件，这是文本区域的事件监听器。让我们预览一下代码和输出。
JavaScript原生实现事件监听及手动触发
qq_35134066的博客
07-30 1万+
我们有时候会需要通过js修改表单元素的状态, 因为不是通过页面交互而是js操作的, 所以不会触发我们写的监听事件.这时就需要通过js手动触发监听事件. jquery实现方法就是trigger('eventType') 原生实现: <input type="checkbox" id="chk"> document.querySelector('#chk').addEventListener('change', function() { console.log(this.chec
JS：1.6，事件（Event）（onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse）
weixin_34202952的博客
01-10 260
ylbtech-Event:事件(Event)对象 事件(Event) HTML 4.0 事件属性 onclick onchange onload onunload onselect onmouse onfoucs-onblur checkbox-onclick JS：1.6.0，事件(Event)返回顶部 ...
常用的一些javascript小技巧
eric wang的专栏
07-25 2265
 以下信息来之于蓝色理想的oror帖子//事件源对象 event.srcElement.tagName event.srcElement.type //捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture();//事件按键 event.keyCode event.shiftKey event.alt
【JS】原生JS事件绑定onclick和addEventListener
热门推荐
mooonyuan的博客
04-11 3万+
onclick绑定方式 优点： - 简洁 - 处理事件的this关键字指向当前元素 缺点： - 不能对事件捕获或事件冒泡进行控制，只能使用事件冒泡，无法切换成事件捕获 - 一次只能对一个元素绑定一个事件处理程序，当使用window.onload属性时，会覆盖采用相同方法所绑定的事件代码 this与event查一不大 推荐使用event...
JS原生的生命周期函数怎么使用的
06-10
但是，JavaScript 中的一些对象和元素确实具有一些生命周期事件，比如页面加载完成时触发的 window.onload 事件、元素加载完成时触发的 element.onload 事件等等。 下面是一些常用的 JavaScript 生命周期事件： 1....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值