最常用的JavaScript 事件

JavaScript 事件:

事件指的就是当某些组件执行了某些操作后,会触发某些代码的执行。
更多事件:https://www.w3school.com.cn/jsref/dom_obj_event.asp

常用的事件:
属性触发时机
onabort图像加载被中断
onblur元素失去焦点
onchange用户改变域的内容
onclick鼠标点击某个对象
ondblclick鼠标双击某个对象
onerror当加载文档或图像时发生某个错误
onfocus元素获得焦点
onkeydown某个键盘的键被按下
onkeypress某个键盘的键被按下或按住
onkeyup某个键盘的键被松开
onload某个页面或图像被完成加载
onmousedown某个鼠标按键被按下
onmousemove鼠标被移动
onmouseout鼠标从某元素移开
onmouseover鼠标被移到某元素之上
onmouseup某个鼠标按键被松开
onreset重置按钮被点击
onresize窗口或框架被调整尺寸
onselect文本被选定
onsubmit提交按钮被点击
onunload用户退出页面
事件操作

绑定事件

方式一: 通过标签中的事件属性进行绑定。

<body>
<img id="img" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1582373193,2567665585&fm=26&gp=0.jpg">
<br/>
<button id="up" onclick="up()">上一张</button>&nbsp;
<button id="down" onclick="down()">下一张</button>
</body><script>// 显示第一张function up() {let img = document.getElementById("img");img.setAttribute("src", "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1582373193,2567665585&fm=26&gp=0.jpg")}// 显示第二张function down() {let img = document.getElementById("img");img.setAttribute("src", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.58cdn.com.cn%2Fp1%2Fbig%2Fn_v26f22be8b05a74c42b8f9dfb859480186.jpg%3Fw%3D425%26h%3D320&refer=http%3A%2F%2Fpic4.58cdn.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618451421&t=0310ddbd6f7cd840299b10dd314572c8")}
</script>

方式二: 通过 DOM 元素属性绑定。

<body><img id="img" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1582373193,2567665585&fm=26&gp=0.jpg">
<br/>
<button id="up">上一张</button>&nbsp;
<button id="down">下一张</button>
</body><script>// 显示第一张function up() {let img = document.getElementById("img");img.setAttribute("src", "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1582373193,2567665585&fm=26&gp=0.jpg")}let s = document.getElementById("up");s.onclick = up;// 显示第二张function down() {let img = document.getElementById("img");img.setAttribute("src", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.58cdn.com.cn%2Fp1%2Fbig%2Fn_v26f22be8b05a74c42b8f9dfb859480186.jpg%3Fw%3D425%26h%3D320&refer=http%3A%2F%2Fpic4.58cdn.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618451421&t=0310ddbd6f7cd840299b10dd314572c8")}let x = document.getElementById("down");x.onclick = down;
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/572192.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Codevs 1025 选菜

1025 选菜 时间限制: 1 s空间限制: 128000 KB题目等级 : 黄金 Gold题解题目描述 Description在小松宿舍楼下的不远处&#xff0c;有PK大学最不错的一个食堂——The Farmer’s Canteen&#xff08;NM食堂&#xff09;。由于该食堂的菜都很不错&#xff0c;价格也公道&#xff0c…

SAS笔记(2) RETAIN语句

本文重点&#xff1a; 使用RETIAN,INPUT在每次循环执行时保留上一次PDV中的变量值。SUM语句和SET语句会自动RETAIN变量。1. RETAIN语句 1.1 Example 1 先来看看在DATA步不使用和使用RETAIN语句的差异 没有使用RETAIN: DATA WITHOUT_1;PUT "Before the INPUT statement: &…

Hive优化策略

hive优化目标 在有限的资源下&#xff0c;运行效率高。常见问题 数据倾斜、Map数设置、Reduce数设置等 hive运行 查看运行计划 explain [extended] hql 例子 explain select no,count(*) from testudf group by no; explain extended select no,count(*) from testudf group …

POJ 3268 Silver Cow Party (最短路径)

POJ 3268 Silver Cow Party &#xff08;最短路径&#xff09; Description One cow from each of N farms (1 ≤ N ≤ 1000) conveniently numbered 1..N is going to attend the big cow party to be held at farm #X (1 ≤ X ≤ N). A total of M (1 ≤ M ≤ 100,000) unidi…

GPU性能实时监测的实用工具

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

条件随机场-应用

今天介绍CRFs在中文分词中的应用 工具&#xff1a;CRF,可以去 https://taku910.github.io/crfpp/ 下载&#xff0c;训练数据和测试数据可以考虑使用bakeoff2005,这是链接 http://sighan.cs.uchicago.edu/bakeoff2005/ 首先需要了解一些概念 字标记法——统计分词模型常用的方法…

Codeforces-808D Array Division (multiset 折半???)

题目链接&#xff1a; http://codeforces.com/problemset/problem/808/D 题意: 给定一个数列&#xff0c;移动0或1个数字&#xff0c;使数列能从某个位置分开前后两半的和相等。 思路&#xff1a; from: http://www.cnblogs.com/robin1998/p/6864278.html 我们可以假想有个隔板…

Linq中dbSet 的查询

1.Find&#xff1a;按照关键字的ID号来查询&#xff08;速度快&#xff09; 如&#xff1a; ADShiTi aDShiTi db.ADShiTis.Find(id); 2.FirstOrDefault&#xff1a;根据部分条件查询&#xff0c;显示最前的一条 如&#xff1a;按照daCID进行查找&#xff0c;有&#xff0c…

AJAX详解教程

AJAX(Asynchronous JavaScript And XML)&#xff1a;异步的 JavaScript 和 XML。本身不是一种新技术&#xff0c;而是多个技术综合。用于快速创建动态网页的技术。一般的网页如果需要更新内容&#xff0c;必需重新加载个页面。而 AJAX通过浏览器与服务器进行少量数据交换&#…

JSON转换工具

JSON的处理&#xff1a; JSON(JavaScript Object Notation)&#xff1a;是一种轻量级的数据交换格式。 它是基于 ECMAScript 规范的一个子集&#xff0c;采用完全独立于编程语言的文本格式来存储和表示数据。 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅…

如何获取codeforces的完整数据

推荐&#xff1a; 如何获取codeforces的完整数据&#xff1f;&#xff08;玄学方法&#xff09; http://www.cnblogs.com/Saurus/p/6220513.html转载于:https://www.cnblogs.com/cmyg/p/7232386.html

Vue与Element入门使用

Vue&#xff1a; Vue是一套构建用户界面的渐进式前端框架。只关注视图层&#xff0c;并且非常容易学习&#xff0c;还可以很方便的与其它库或已有项目整合。通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。视图&#xff1a;负责页面渲染&#xff0c;主要由HTMLCSS构…

nRF51822 配对之device_manager_init 调用,以及保证 用户数据存储 的Flash 操作不与device manager 模块冲突...

昨天 遇到了一个烦心的问题&#xff0c;被老外客户怼了两句&#xff0c;恼火&#xff0c;很想发火&#xff0c;发现英文不够用&#xff0c;算了&#xff0c;就不跟直肠的鬼佬一般见识。说正事。 最近的一个nRF51822MT2503 钱包防丢项目&#xff0c;准备接近量产了。昨天做APP的…

表单的ajax填入问题

又是表单 今天的表单是用事件委托从table里面获得eventId&#xff0c;用get请求从后台获得json数据填入表单中 第一个执行的比较顺利&#xff0c;但当再添加一个事件之后&#xff0c;修改&#xff08;将数据填入表单&#xff09;功能竟然失灵了&#xff0c;然后各种找原因&…

Redis基础-下载安装配置

Nosql&#xff1a; NoSQL&#xff1a;即 Not-Only SQL&#xff08; 泛指非关系型的数据库&#xff09;&#xff0c;作为关系型数据库的补充。 作用&#xff1a; 应对基于海量用户和海量数据前提下的数据处理问题。 特征&#xff1a; 可扩容&#xff0c;可伸缩大数据量下高性能…

R学习-- 数组和矩阵

生成 4行5列的数组&#xff0c;逐列逐行赋值x array(1:20, dim c(4,5))依据已知向量生成二维数组i array(c(1:3,3:1,4:6,5:7), dimc(3,4))也能够调整行列顺序 &#xff08;3行4列变为4行3列&#xff09;i array (c(1:3,3:1,4:6,7:9), dimc(4,3))数组a元素作为索引值操作数组…

PHP获取客户端ip的五种方式

方法一 1 <?php 2 $ip $_SERVER["REMOTE_ADDR"]; 3 echo $ip; 方法二 <?php $user_IP ($_SERVER["HTTP_VIA&qu…

Jedis使用

Jedis&#xff1a; Jedis是Redis官方推荐的Java连接服务工具。Java语言连接redis服务还有这些SpringData、Redis 、 Lettuce下载地址&#xff1a;https://mvnrepository.com/artifact/redis.clients/jedisAPI文档&#xff1a;http://xetorthio.github.io/jedis/ 连接练习&#…

Centos6.6升级python2到python3

系统更新部分&#xff1a; 一、由于系统原有的源无法连接&#xff0c;需要更新为新的源。起初&#xff0c;首选163的源&#xff0c;但是由于更改源以后&#xff0c;无法使用yum等问题&#xff0c;所以直接使用上海交通大学提供的源。 修改前&#xff0c;将原来/etc/yum.repos.d…

转:20分钟教你使用hexo搭建github博客

注册Github账号 这里我们就不多讲了&#xff0c;小伙伴们可以点击这里&#xff0c;进入官网进行注册。 创建仓库 图片来自Github登录账号后&#xff0c;在Github页面的右上方选择New repository进行仓库的创建。 图片来自Github在仓库名字输入框中输入&#xff1a; Github昵称.…