1. 给元素添加事件的三种方式

已于 2024-01-18 17:45:56 修改
阅读量625 收藏 8
点赞数 9
分类专栏： javascript 文章标签： 前端 javascript 开发语言
于 2024-01-16 21:31:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56463494/article/details/135635740
版权
本文介绍了如何通过JavaScript在HTML元素上使用命名函数和匿名函数进行事件处理，以及如何通过DOM编程添加事件监听器来响应元素点击。
摘要由CSDN通过智能技术生成

1.调用命名函数

通过设置元素的onclick属性来触发函数，也就是说当这个元素被点击了就会调用onclick属性中声明的函数。具体实例如下：
在这里插入图片描述

2.调用匿名函数

不给元素设置onclick属性，通过dom编程给元素设置onclick属性，在这里会用到匿名函数，当元素被点击后就会触发匿名函数。
在这里插入图片描述

3.给元素添加事件监听器

通过dom编程获取元素，并且给元素添加事件监听器，第一个参数是事件监听器要监听的事件，第二个参数是一个匿名函数。当监听的事件被触发时，就会执行在事件监听器中定义的匿名函数。
在这里插入图片描述

xiaoyu27397
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
03-jQuery-事件绑定【click() 、on()】、事件切换toggle()、事件方法、样式控制
记录java学习日常~
05-20 7785
on() 方法是 jQuery 中最常用且最通用的事件绑定方法，可以绑定多个事件类型，并为每个事件类型指定一个或多个处理程序。click() 方法是一种简洁的事件绑定方法，只能绑定 click 事件，并且只允许绑定一个处理程序，无法为同一个元素绑定多个处理程序。off() 方法用于移除之前绑定的事件处理程序，它需要传递一个或多个事件类型参数，并为这些事件类型制定要移除的处理程序。jQuery 事件绑定中，on() 方法用于为元素添加事件处理程序，off() 方法则用于移除绑定的事件处理程序。
为按钮和表单绑定事件常用的两种方式
qq_45344586的博客
06-28 2143
绑定事件常用的两种方式，以及其注意事项
# JavaScript动态的为元素添加事件
最新发布
good7ob的博客
06-10 177
在上面的例子中，我们首先通过getElementById方法获取了id为myButton的按钮元素，然后定义了一个名为handleClick的函数作为点击事件的处理函数。在上面的例子中，我们将点击事件绑定到id为parentElement的父级元素上，然后在事件处理函数中判断事件的目标元素是否为button，如果是，则触发相应的处理逻辑。在上面的例子中，我们获取了id为myButton的按钮元素，然后直接为其onclick属性赋予了一个匿名函数，当按钮被点击时，会触发这个匿名函数。
元素绑定事件的几种方式（以绑定点击事件为例）
weixin_45026839的博客
04-10 5330
一、 在HTML上绑定点击事件 <body> <div class="test" id="main"> 这是测试区域的内容 </div> <input type="button" value="变红" onclick="fun1()" id="change"> <script> function fun1() { var getId = document.g.
为元素绑定点击事件
zlebxzy的博客
12-28 136
为元素绑定点击事件，例子是点击返回dataid属性值 $('.dataCss').bind("click",function(){ name = $(this).attr('dataid'); })
为元素添加点击切换事件
qq_43029797的博客
03-01 642
1、 var btn = document.querySelector('#btn'); var falg = true; btn.addEventListener('click',function(){ if(falg){ alert("点击"); falg=false; }else{ alert("切换"); falg=true; } }) 2、 $('#btn').toggle(function(){//为当前元素设置切换事
动态添加子元素，并给子元素添加点击事件
qq_43341807的博客
08-01 831
动态添加子元素，并给子元素添加点击事件
html5中监听canvas内部元素点击事件的三种方法
12-14
本文将探讨三种方法来监听Canvas内部元素的点击事件。 1. **像素法**： 像素检测法的核心思想是利用`getImageData()`方法获取Canvas的像素数据。首先，将Canvas上的图形离屏绘制并存储像素信息。当用户点击Canvas...
javascript中为某个元素指定事件的三种方式
10-25
在JavaScript中，为某个元素指定事件是常见的交互设计方式，主要分为三种方法：使用`onclick`属性、在JavaScript中设置`onclick`属性以及使用`addEventListener`方法。这三种方法各有特点，下面将详细阐述它们的用法...
事件绑定与销毁共1页.pdf.zip
10-30
1. **DOM0级事件处理程序**：这是最简单的方法，直接通过元素的事件属性设置函数，例如`element.onclick = function(){};`。这种方法的缺点是无法添加多个事件监听器，并且在销毁时需要手动设置为null。 2. **DOM2...
JS动态给对象添加事件的简单方法
12-04
在IE浏览器中，我们使用`attachEvent`方法为元素添加事件处理程序。例如，如果我们想要在文本框失去焦点（`onblur`事件）时显示一个警告，我们可以使用以下代码： ```javascript document.getElementById("txtPrice...
解决给dom元素绑定click等事件无效问题的方法
12-09
之前一直遇到js插件生成的元素，click事件无效的问题，重新绑定也不行，终于找到解决方法，在此记下来。 同时加深对js事件处理机制的理解。 1. 事件被解绑 这种情况下一般不会导致click失效，但以下情况，click事件就失效了： $(function(){ $('.btn').unbind() }) $('.btn').click(function(){ //... }) 所以，click事件要有个好习惯： $(function(){ $('.btn').click(function(){ //... }) }) 2. js插件异步／动态加载dom 一般含有等待时间／开
给动态添加的元素绑定事件
XCMercy
01-17 579
on()方法 jQuery的on()方法即可完成给页面上动态添加的元素绑定事件。 $(选择器1).on(events,选择器2,function(event){ // do something... }); 参数解释 选择器1：页面上非动态生成祖先元素选择器。动态添加的元素一定是页面上非动态生成的某个元素的后代元素，所以选择器1就是动态生成的后代元素所属的祖先元素的选择器。...
html中绑定点击事件的三种方法
热门推荐
dong123ohyes的专栏
09-20 4万+
HTML中为button绑定事件的方式有三种。 例如以下标签： 1 submit 一、使用jquery进行绑定 1 2 $('#btn_submit').click(function(){ }); 二、使用原生js绑定，（注意：Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。 这类浏览器版本要使用 attachEvent() 方法来添加事件） 1 2 document.getElementById
元素绑定click的三种实现方式
超哥很努力的专栏
05-10 618
给ajax拼接的元素添加一个单击事件，并传入当前元素
sdhkwjlxxx的博客
11-24 690
给ajax拼接的元素添加一个单击事件，并传入当前元素
页面点击事件，元素点击事件
weixin_30448685的博客
09-12 912
html元素的点击事件 <tr><td class=".cus_td" data-id="djlfd">dddd</td><tr> $('body').on('click',".cus_td", function(){ var modelId=$(this).attr("data-id"); ...
jQuery为元素绑定事件
chenqiuqian的博客
07-27 2734
这是bind链式方法，方法.bind(“事件名字”，事件处理函数).bind(“事件名字”，事件处理函数).bind(“事件名字”，事件处理函数)这个方法跟前面的几个方法有些不一样，这个是给父元素绑定事件，方法父元素.delegate(“事件名字”，“子元素”，事件处理函数)。这是键值对方法，方法.bind({“事件函数”事件处理函数，“事件函数”事件处理函数，“事件函数”事件处理函数})这是bind方法，方法bind(“事件名字”，事件处理函数)；为元素绑定事件的几个方法。...
JavaScript：事件
读心悦
10-24 1471
JavaScript和HTML的交互是通过事件来实现的，常见的事件就是鼠标点击事件，click事件、load事件mouseover事件等等，在事件触发时候，会执行绑定在元素上的事件处理程序。事件流，就是描述从页面中接收到事件的顺序。事件在触发之后，会在目标节点和根节点之间按照一定的顺序在传播，经过的节点都会接收到事件。比如有一个table表格，分别在table表格、tbody、tr、td单元格上绑定click事件。第一个阶段是事件捕获型事件流，第二阶段是属于事件冒泡型事件流。
给页面中ID为“div1”的元素的所有后代元素添加"click事用jq写
06-07
您好，可以使用以下的jQuery代码给页面中ID为"div1"的元素的所有后代元素添加"click事件"： ```javascript $("#div1").on("click", "*", function() { // 在这里编写click事件的处理逻辑 }); ``` 这段代码中，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值