javascript - JS点击事件梳理

最新推荐文章于 2024-06-20 23:18:02 发布
最新推荐文章于 2024-06-20 23:18:02 发布
阅读量232 收藏 1
点赞数
分类专栏： Javascript 文章标签： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42947716/article/details/100514757
版权

点击事件的三种写法

  1. 直接在标签添加

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
	<button id="bt" onclick="showClick()">click</button>
    <script type="text/javascript" src="index.js"></script>

</body>
</html>

index.js


function showClick(){
	alert("clicked");
}
  1. 方法二（onclick）

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
	<button id="bt">click</button>
    <script type="text/javascript" src="index.js"></script>

</body>
</html>

index.js

var btn=document.getElementById("bt");
btn.onclick=function(){
	alert("clicked");
}

/*
等价于：
var btn=document.getElementById("bt");
function showClick() {
    alert("clicked");
}
btn.onclick=showClick;
*/

//去掉绑定的事件：btn.onclick=null;
  1. 方法三（click）

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
	<button id="bt">click</button>
    <script type="text/javascript" src="index.js"></script>

</body>
</html>

index.js


var btn=document.getElementById("bt");
btn.addEventListener("click",function(){
	alert("clicked");
},false);

//去除绑定:btn2.removeEventListener('click', showMsg, false);

事件触发顺序

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
	<button id="bt" onclick="showClick1()">click</button>
    <script type="text/javascript" src="index.js"></script>

</body>
</html>

index.js

var btn=document.getElementById("bt");
function showClick1() {
    alert("由标签绑定的onclick触发");
}
function showClick2() {
    alert("由click触发");
}
btn.addEventListener("click",showClick2,false);

在浏览器运行结果：
在这里插入图片描述
在这里插入图片描述
当点击id="bt"时,先执行onclick事件的方法showClick1(),再执行click事件的showClick2()方法;

石榴笑了
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript事件简介、事件对象event、绑定点击事件、鼠标移入移出事件、区块移动、表单事件、内容转变事件、焦点事件、键盘事件、浏览器相关事件、触摸事件、拖动效果
qq_56756602的博客
08-30 1154
JavaScript事件简介、事件对象event、绑定点击事件、鼠标移入移出事件、区块移动、表单事件、内容转变事件、焦点事件、键盘事件、浏览器相关事件、触摸事件、拖动效果等等
JavaScript的点击事件处理
qq_48783543的博客
10-17 188
单击事件 在body体中只要是可见的标签都可以添加事件 元素指的就是HTML标签 例如呢这样子 < button οnclick= “console.log(“hello”)”>点击我</ button > 这样子我们就定义了一个点击的事件点一下网页中的“点击我"就会输出一个hello 但是我们一般不这样去操作事件。我们一般这样子： 可以触发事件的元素我们叫做事件源 通过document.getElementById(“id的名称”)来获取元素 注意你这里获取的元素就是HTM
js的点击事件
weixin_30950237的博客
06-15 124
鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onclick事件，并执行onclick事件调用的程序。 现实鼠标点击 window.onload = function () { var nav=document.getElementsByClassName("nav") var acc = document.getElementsByClassName('acc'); v...
Javascript中点击(click)事件的三种写法
最新发布
忧郁的蛋的专栏
06-20 471
在JavaScript中Click事件是一种常见的用户交互事件,表示用户在网页上点击某个元素的动作,这篇文章主要给大家介绍了关于Javascript中点击(click)事件的三种写法,需要的朋友可以参考下。
javaScript事件总结
qq_22017771的博客
03-21 129
js事件： 1.通过 addEventListener（type，function，capture） 方法添加时间 type :事件名字 function:事件回调 capture:是否捕捉类型截获 2.事件传递方式 w3c标准是 root－》targetDom—》root，跟节点捕获事件然后递归传递到触发节点，然后在冒泡到跟节点。3.事件回调触发 如果capture为true，就会在
js中常用的事件，onclick 单击事件、onblur 失去焦点事件、onchange改变事件、onmouseover鼠标进入事件、onmouseout鼠标移除事件、onsubmit提交事件
热门推荐
ghjzzhg的博客
01-16 7万+
onclick 单击事件 onblur 失去焦点事件 onchange 当对象或选中区的内容改变时触发。 onmouseover 当用户将鼠标指针移动到对象内时触发。 onmouseout 当用户将鼠标指针移出对象边界时触发。 onsubmit 当表单将要被提交时触发。 1、静态点击事件 script type="text/javascript"> // A标签的点击事
js中点击事件
JinYixin0116的博客
06-22 1566
<!DOCTYPE html> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=gbk" charset="utf-8"/> <script type="text/javascript"> function openWindow(){.
JavaScript基础14-JS操作页面_点击事件
安小静--
10-22 645
前面都是介绍了JavaScript的基本语法，如果你有一门语言基础的话，这些基本语法很快就能学完并掌握，各种编程语言基本上是相同的。接下来，我们开始介绍用JavaScript处理一些web前端的事件； JS操作页面 DOM简介 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model...
javascript-知识：JavaScript知识点梳理
02-25
JavaScript知识点梳理 使用思维导图与问答形式将所有遇到JavaScript知识点串联起来，按照普通思维逻辑一点点深入JavaScript知识 为了正确保证知识点答案的准确性，知识答案基本都来自书籍或官方文档 为什么做这件事...
web前端高级JavaScript - 事件和事件绑定的基础知识梳理
lixiaosenlin的专栏
12-04 5782
事件 什么是事件 事件是浏览器赋予元素的默认行为，也可以理解为事件是天生具备的，不论我们是否为其绑定方法，当某些行为触发的时候，相关的事件都会被触发执行，只不过如果没有为其绑定方法，当事件被触发的时候将什么都不做。 浏览器赋予元素的事件行为 事件参考 鼠标事件 click 点击事件（PC：点击N次就触发N次事件） 单击事件（移动端：300ms内没有发生第二次点击操作，算作单击事件行为，所以click在移动端有300ms的延迟） dblclick 双击事件 contextmenu 鼠标右键点
HarmonyOS应用开发-JS相关整体梳理.docx
06-05
### HarmonyOS应用开发-JS相关整体梳理 #### 方舟开发框架概述 方舟开发框架是华为为HarmonyOS设计的一款跨设备的高性能UI开发框架，它支持声明式编程及跨设备多态UI的设计理念，旨在简化开发者的开发过程并提高...
javascript-cros:跨域的一些问题和方法总结
05-26
javascript-cros 跨域的一些问题和方法总结 一直都说想找个大总结的文章关于跨域的处理奈何度娘上的资料太老旧，自己对于新的知识点又不是十分十分有研究。因此一直让懒癌发作下去。奈何最近做了双失青年，因此有了...
【JavaScript - Web API】DOM（获取元素 / 事件基础 / 操作元素 / 节点操作）
qq_30148319的博客
05-18 455
一、DOM 简介 1、什么是 DOM ？ 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 2、DOM 树 文档：一个页面就是一个文档，DOM 中使用 document 表示。 元素：页面中的所有标签都是元素，DOM 中使用 element 表示。 ...
JS点击事件
xxx0627的博客
04-07 1万+
第一种： 第二种： 第三种： 备注： btnObj.click()是真正地用程序去点击按钮，触发了按钮的onclick（）事件 btnObj.onclick()只是简单地调用了btnObj的onclick所指向的方法，只是调用方法而已，并未触发事件 ...
js点击事件
qx020814的博客
07-20 5983
可以将事件绑定在按钮上，点击就触发。将方法中的点击属性重新付给它自己。悬浮在图片上停止，离开图片继续。
js 点击事件
qq_42718130的博客
04-08 1万+
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js中的点击事件（click）的实现方式</title> </head> <body> <!-- 第三种方式--> <button id="btn0" onclick="threeFn()">点我</button.
JavaScript中的点击事件
weixin_44558721的博客
10-24 3万+
JavaScript中的基础知识
JS点击事件详解
weixin_75154342的博客
10-06 2500
需要注意的是，如果一个元素既绑定了`addEventListener`方法，又赋值了`onclick`属性，那么`onclick`属性中的代码会在`addEventListener`方法中的代码之后执行。要使用点击事件，我们首先需要选取要绑定点击事件的元素。另外，如果需要取消点击事件的监听，可以使用`removeEventListener`方法或者将元素的`onclick`属性设置为`null`。除了使用`addEventListener`方法，我们还可以直接将点击事件赋值给元素的`onclick`属性。
JavaScript事件绑定方式详解与冒泡、捕获顺序梳理
本文档主要梳理了JavaScript中的事件绑定、事件冒泡、事件捕获和事件执行顺序的相关概念，并结合实际代码示例进行详细解释。作者首先介绍了事件绑定的五种方式： 1. **HTML中直接绑定**：利用HTML元素自带的`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值