H5都有那些事件？

于 2024-08-17 20:28:43 发布
阅读量237 收藏
点赞数 7
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75773271/article/details/141286209
版权

onblur： 当失去焦点时运行脚本

onchange： 当元素改变时运行脚本

onclick： 当单击鼠标时运行脚本

ondrop： 当被拖动元素正在被拖放时运行脚本

onended： 当媒体已抵达结尾时运行脚本

onerror： 当在元素加载期间发生错误时运行脚本

onfocus： 当获得焦点时运行脚本

oninput： 当元素获得用户输入时运行脚本

onkeydown： 当按下按键时运行脚本 (还没松开时就触发)

onkeypress： 当按下并松开按键时运行脚本 (必须经历按下 、松开这一过程才触发)

onkeyup： 当松开按键时运行脚本 (松开时即触发)

onload： 当加载时运行脚本

onmousedown： 当按下鼠标按钮时运行脚本

onmousemove：当鼠标指针移动时运行脚本

onmouseout： 当鼠标指针移出元素时运行脚本

onmouseover： 当鼠标指针移至元素之上时运行脚本

onmouseup： 当松开鼠标按钮时运行脚本

咖啡只喝拿铁~
关注
  • 7
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5移动端点击事件穿透问题解决
AIGC大前端小王子
08-03 9534
最近有遇到前端事件点击穿透的问题，拿来跟大家分享一下。 1.问题描述： 情景一：蒙层点击穿透问题，点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件。 情景二：跨页面点击穿透问题：如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转。 情景三：另一种跨页面点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应...
H5拖拽事件
weixin_44546509的博客
05-16 1416
H5拖拽事件 开发工具与关键技术：DW 作者：Mr_恺 撰写时间：2019.05.15 上次写了原生Js的拖拽事件，现在写一个Html5的拖拽事件，看看他们之间的区别到底在哪呢？ 先来Html布局: Css样式： 布局效果：就把它当作一个窗体 H5拖拽事件就不像原生js拖拽那样，要其它事件组合起来才能实现，H5拖拽直接用一个事件就可以完成。 来写JS的代码： 其实我们也可以不用减去100...
h5移动端手机长按事件
FantasyWeirdo的博客
01-06 6464
h5移动端手机长按事件 <div style="width:100%;"> <div id="touchArea" style="width:90%; height:200px; background-color:#CCC;font-size:100px">长按我</div> </div> var timeOutEvent=0
h5事件监听
qq_36545656的博客
08-27 2407
问题：点击div(或弹框)外的任何区域div(或弹框)消失 前情提要： 项目是用angular写的移动端页面，测试反馈点击确认按钮每次都要点击2次才生效，体验很不好，需要优化。页面如下图所示：点击金额输入框键盘出现输入金额，键盘是单独封装的组件，点击页面其他地方键盘消失。 定位问题： 当测试跟我说的时候，我第一反应是是不是点击有延迟啊，然后我亲自测了一遍，发现有键盘出现的时候需要点2次...
H5 touch事件处理
Liu
08-16 725
touch事件处理
H5模拟单击事件
weixin_45473759的博客
09-27 2743
H5模拟单击事件 项目背景（taro，H5） 功能（元素同时实现单击和长按功能，类似于微信消息列表长按显示菜单栏，单击进入聊天） 遇到问题（安卓手机正常使用，ios长按时会触发单击事件） 事故现场 解决方法 不使用onClick方法用模拟单击代替 先上代码 模拟单击事件做法其实非常简单，但要做到与单击事件一样并且提升用户体验是需要考虑很多问题的 下面来分享一下我的制作过程 我们可以使用记录...
app能不能跳转外部h5_APP内部H5页面跳转 & H5唤起APP 怎么做？
weixin_34763548的博客
01-26 2650
H5唤起APP某页面做的H5页面，在APP中放了入口，在APP中访问别的页面场景我们做的H5页面，希望从浏览器跳转至APP的某个特定页面，如在H5中设置购买按钮，希望点击跳转至APP内部的购买页面。2、过程(1)是否安装APP判断首先浏览器是不能自动判断设备是否安装APP，所以抛出如下弹窗让用户自己选：点击下载APP跳转至对应的下载页面 /download 或根据环境下载ios或Android 的...
h5移动端新增事件
song854601134的博客
03-31 1910
为什么touch事件中要阻止浏览器的默认行为 那肯定是在能支持触屏的设备上运行，比如手机，手机上你滑动的时候他本身就有个默认的滚屏，因此如果你要操作操作你个dom元素，用touchmove事件，这其实也是滑动。原本你的效果是要在dom上滑动然后产生相应的效果，这个时候你肯定不希望手机上的浏览器屏幕滚动，所以你应该把它默认的滚动给禁止了。这样才会有好的用户体验。 touchmove 默认会有滚动效果吗！？？ 移动端,同一页面不同层的划动操作会造成相互影响,需要额外处理 如:页面层和弹出层(如picke
【H5】-- 拖拽事件
qq_48802092的博客
08-31 856
dataTransfer是一个用来保存拖动及放置过程中的数据的对象，可以保存一项或者多项数据，可以是一种或者多种数据类型，用于拖动拖动元素与放置元素之间的数据传递。来获取到拖动元素中传出来的id，通过数据获取节点，放置节点。在拖动事件中设置 dataTransfer.setData(key,value) 将拖动元素的id传出去；案例中的console.log()都是为了测试的，实际应用时可以不需要将每一条过程都打印出啦。当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发。......
android与h5点击事件,android用webview加载H5页面出现点击事件失效的问题解决
weixin_39759182的博客
05-26 1138
不论点击还是标签链接都失效，反复查阅，可能性方法试了又试最终解决。总结下：1.开启js支持2.webview 设置WebChromeClient3.websetting和webviewclientimport android.os.Bundle;import android.annotation.SuppressLint;import android.app.Activity;import and...
H5小游戏源码 测测你有没有财运？.zip
10-14
6. **兼容性处理**：为了确保游戏在各种浏览器和设备上都能正常运行，开发者可能需要编写兼容性代码，如使用polyfill库来弥补老旧浏览器对新特性的支持不足。 7. **资源管理**：游戏可能包含音频、图像和其他媒体...
H5连连看小游戏示例及源码
01-14
【H5连连看小游戏开发详解】 在Web开发领域，HTML5（H5）技术的广泛应用使得开发者能够创建出丰富的互动体验，其中包括各种小...无论是初学者还是有经验的开发者，都可以从这个示例中汲取灵感，进一步提升自己的技能。
非常好用的H5选人组件
02-27
也可能有排序功能，按照姓名、字母顺序等进行排列。此外，良好的视觉设计和反馈机制也是关键，例如，选中状态的视觉提示，以及在选择过程中给予用户明确的反馈。 在实际应用中，开发者可能需要将H5选人组件整合到...
h5登录界面下载
12-16
学习这样的登录界面，适合对HTML5有一定基础的人群，他们应该已经了解基本的HTML结构、CSS样式和JavaScript事件处理。此外，如果涉及到服务器交互，还需要了解AJAX或Fetch API，以及后端接口的使用。 在实际项目中...
h5_h5源码_
10-03
《深入剖析H5源码：从58同城咸鱼项目实战出发》 在现代Web开发领域，HTML5（简称H5）已经成为了构建交互式、动态网页的核心技术。...无论你是初学者还是经验丰富的开发者，都能从中受益匪浅，提升自己的技能水平。
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 247
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
【vue教程】五. Vue 的路由管理
最新发布
前端探索者
08-13 1094
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
playwright链接本地浏览器，实现自动登录。
qq_38880880的博客
08-12 177
【代码】playwright链接本地浏览器，实现自动登录。
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 981
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
h5点击事件有哪些方式
05-11
HTML5提供了多种方式来绑定点击事件，包括： 1. 传统的HTML事件属性绑定方式（不推荐使用）： ```html <button onclick="handleClick()">点击我</button> ``` 2. addEventListener()方法绑定事件： ```html <button id="btn">点击我</button> <script> const btn = document.getElementById('btn'); btn.addEventListener('click', handleClick); function handleClick() { // 处理点击事件 } </script> ``` 3. 使用事件委托（event delegation）： ```html <ul id="list"> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ul> <script> const list = document.getElementById('list'); list.addEventListener('click', function(event) { if(event.target.tagName === 'LI') { // 处理点击事件 } }); </script> ``` 推荐使用 addEventListener() 方法来绑定事件，因为它可以方便地添加和删除事件监听器。使用事件委托可以减少事件处理程序的数量，提高性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值