首页 > 编程语言 >JavaScript-event

JavaScript-event

时间:2024-06-06 15:46:21浏览次数:20  
标签:JavaScript 鼠标 元素 事件 input event

JavaScript-event

HTML事件是发生在HTML元素上的 “事情”,例如:

  • 按钮被点击
  • 鼠标移到元素上
  • 输入框失去焦点
事件的绑定

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

<input type="button" value="事件按钮" onclick="on()">

<script>
	function on() {
		alert("按钮1被点击了...");
	}
</script>

方式二:通过DOM中Element元素的事件属性进行绑定

<input type="button" value="事件按钮" >

<script>
	var input = document.getElementsByTagName("input");
	input[0].onclick = function() {
		alert("按钮1被点击了...");
	}
</script>
常见事件
事件属性名 说明
onclick 鼠标单击事件
onblur 元素失去焦点
onfocus 元素获得焦点
onload 某个页面或图像被完成加载
onsubmit 当表单提交时触发该事件
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开

标签:JavaScript,鼠标,元素,事件,input,event
From: https://www.cnblogs.com/ai-study/p/18235249

相关文章

  • JavaScript-Array
    JavaScript-Array1.定义方式方式一:vararr1=newArray(1,2,3,4);方式二:vararr2=[1,2,3];2.特点JavaScript中数组相当于java中的集合,数组的长度是可以变化的,并且可以存储任意数据类型的值。vararr1=newArray(1,2,3,4);console.log(arr1);arr1[10]=5......
  • JavaScript-BOM
    JavaScript-BOMBOM的全称是BrowserObjectModel,翻译过来是浏览器对象模型。BOM中提供了如下5个对象:对象名称描述Window浏览器窗口对象Navigator浏览器对象Screen屏幕对象History历史记录对象Location地址栏对象Windows对象window对象指的是浏......
  • JavaScript-DOM
    JavaScript-DOM1.DOM介绍DOM:DocumentObjectModel文档对象模型。也就是JavaScript将HTML文档的各个组成部分封装为对象。HTML文档是浏览器解析。封装的对象分为Document:整个文档对象Element:元素对象Attribute:属性对象Text:文本对象Comment:注释对象2.获取DOM对象......
  • JavaScript string charCodeAt() vs codePointAt() All In One
    JavaScriptstringcharCodeAt()vscodePointAt()AllInOneString.prototype.charCodeAt()vsString.prototype.codePointAt()String值的charCodeAt()方法返回0到65535之间的整数,表示给定索引处的UTF-16代码单元。取值范围:[0,2^16]2**16//655362**1......
  • 【经典游戏】JavaScript实现经典的水果忍者小游戏
    【前言】微信小游戏很久之前刮起了一股切水果热潮,还记得嘛?我记得纯粹是因为这个游戏家里的孩子依旧没放弃~比如:果盘忍者|水果切切切|一起切水果|全民切西瓜|王牌飞刀手......那时候——各种同类型的切水果小游戏层出不穷,并“前仆后继”地纷纷霸占小程序排行榜前列。那场面简......
  • JavaScript第十讲:DOM编程(1):节点概念,如何获取元素节点,节点属性,样式
    前言在当今的Web开发中,DOM(DocumentObjectModel)编程扮演着至关重要的角色。DOM是HTML和XML文档的编程接口,它使得我们可以像操作对象一样来操作网页上的元素。无论是构建动态网页,还是实现用户交互,都离不开对DOM的深入理解和灵活运用。在本文中,我们将开启DOM编程的系列学习之旅......
  • 【华为OD】D卷真题200分:会议接待 JavaScript代码实现[思路+代码]
    【华为OD】2024年C、D卷真题集:最新的真题集题库C/C++/Java/python/JavaScript【华为OD】2024年C、D卷真题集:最新的真题集题库C/C++/Java/python/JavaScript-CSDN博客JS、python、Java、C、C++代码实现:【华为OD】D卷真题200分:会议接待JavaScript代码实现[思路+代码]-CSDN......
  • JavaScript-匿名函数
    原文链接:https://blog.csdn.net/weixin_45203607/article/details/124227504什么是匿名函数1、匿名函数,即没有名称的函数2、如果单独只写一个匿名函数,此时是不符合语法要求的会报错。需要给匿名函数包裹一个括号,使之成为表达式。3、被小括号包裹的内容会被js识别为一个函数表......
  • javaScript高级23_事件4
    一、概念某些组件被执行了某些操作后,触发某些代码的执行。事件:某些操作。如:单击,双击,键盘按下了,鼠标移动了事件源:组件。如:按钮文本输入框...监听器:代码。注册监听:将事件,事件源,监听器结合在一起。当事件源上发生了某个事件,则触发执行某个监听器代码。二、常见的事件......
  • 【JS】JavaScript编程语言-谷歌浏览器调试之前端代码(2024-06-05)
    1、在浏览器中调试调试是指在一个脚本中找出并修复错误的过程。所有的现代浏览器和大多数其他环境都支持调试工具——开发者工具中的一个令调试更加容易的特殊用户界面。它也可以让我们一步步地跟踪代码以查看当前实际运行情况。在这里我们将会使用Chrome(谷歌浏览器)。2......