HTML的事件绑定、js的this指向以及 闭包 的问题

最新推荐文章于 2023-11-28 09:13:57 发布
最新推荐文章于 2023-11-28 09:13:57 发布
阅读量677 收藏
点赞数 3
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s1300352164/article/details/122220129
版权

一：html事件绑定

1.标签绑定

直接在标签上添加需要绑定的事件

2.元素绑定

获取页面内的标签元素，加以绑定事件

3.使用事件监听

二：this指向

1.浏览器里，在全局范围内的this 指向window对象；

2.在函数中，this永远指向最后调用他的那个对象；

3.构造函数中，this指向new出来的那个新的对象；

总结：谁调用它就指向谁

这里举一个例子：

最低0.47元/天 解锁文章
枫银等佳人
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue this.$message使用点击事件，el Message 消息提示加按钮，在this.$message加按钮
G佳伟
05-01 429
背景：在开发过程中需要再this.$message加点击事件，但是官方并没有提供相应的事件，所以需要自定义一套。
Html语句中加变量的方法
07-30
Html语句中加变量的方法，Html语句中加变量的方法，Html语句中加变量的方法，Html语句中加变量的方法
html绑定事件的方式（原生的js）
m0_61469746的博客
12-29 891
三种： 1》绑定事件：在标签上直接绑定 例：<p onclick="console.log(1)">hhh</p> 2》获取元素绑定 例：document.queryselector('p').onclick=function(){console.log(1) } 3》添加事件监听 例：document.queryselector('p').addEnentListener('click',()=>{consloe.log('1')}，false或true)//false为..
HTML 事件响应函数,HTML5： 事件处理函数的this指向问题
weixin_39614675的博客
06-07 195
HTML5：事件处理函数的this指向问题区分普通函数与事件处理函数普通函数是直接调用的。不存在 this 指向问题，谁调用的，this 指向就是谁。普通函数没有事件对象 event事件处理函数其实也是一个函数，只是他绑定在某个事件上。事件处理函数的 this 默认指向 undefined解决this指向问题的4种办法直接在事件绑定的地方加上 .bind(this)点我使用箭头函数onClick...
js双向数据绑定
m0_60440382的博客
07-21 372
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&gt.
js中的html事件绑定,js绑定事件_html/css_WEB-ITnose
weixin_28785757的博客
06-09 134
$(".eggList li").one("click",function() {$(this).children("span").hide();$(this).addClass("curr");$(".a").addClass("ab");setTimeout(function(){$(".eggList li").siblings().addClass("curr");$(".b").addC...
html 绑定 js变量,javascript-编译动态HTML并从JSON响应中绑定变量-具有隔离范围的指令-AngularJS...
weixin_39669982的博客
06-28 286
我需要从数据库渲染动态模板,还需要将变量绑定到表达式.我的响应JSON将如下所示,[{"htmlTemplate": "{{name}}{{age}}","bindData": {"name": "safeer","age" : "25"}}, {"htmlTemplate": "{{name}}{{address}}","bindData": {"name": "john","address":...
HTML之JavaScript事件绑定方式小结
qq_44829555的博客
05-30 356
一、嵌入dom <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js" ></script> ...
js向页面新加入的html事件绑定
雷绍发
01-12 2621
js向页面append或者直接给$（'div'）.innerhtml="页面内容"；的时候页面内容里面的单机事件无法绑定怎么办呢 1：jquery1.4之前的直接用live方法，个人觉得不靠谱 $(".aaaaa").live('click',function(){ }); 2：直接在赋值的下面接着写事件，能够执行，效果可以达到，但是代码不够小清晰，维护
html数据绑定js库,Vue.js 数据绑定
weixin_33850554的博客
06-04 258
Vue.js 数据绑定Vue.js支持不同类型的数据绑定。在学习Vue.js中的数据绑定之前，让我们看一下什么是数据绑定以及如何使用它。什么是数据绑定？数据绑定是一种用于将提供者和使用者的数据源绑定在一起并在检索时进行同步的技术。在数据绑定过程中，每当更改数据时，数据便会自动通过绑定到数据的元素反映出来。术语数据绑定也用于元素中数据的外部表示发生变化的情况，并自动更新基础数据以反映此更改。Vue....
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
12-10
在JS中，你写一个for循环的时候，内部的循环变量I其实是会保存在它运行的函数或类内的，所以你会发现你给元素批量绑定事件的时候，出现i=最后一个循环变量的值，这就很坑爹啊，解决的方案有2钟， 思路就是：把这个...
js闭包引起的事件注册问题介绍
11-23
背景：闲暇时间看了几篇关于js作用域链与闭包的文章，偶然又看到了之前遇到的一个问题，就是在for循环中为dom节点注册事件驱动，具体见下面代码： <!DOCTYPE html> <html> <head> <title>js...
javascript闭包传参和事件的循环绑定示例探讨
10-26
按常理循环绑定事件，但是得到的结果却不是想要的，下面有个不错的示例，可以为大家详细分解下
如何关联JS与HTML
weixin_50878401的博客
09-29 3268
如何关联JS与HTML关联 js通过id操作html组件 代码示例 <!--html--> <input type="text" id="myqr">//设定组件的id为“myqr” //js var love = document.getElementById('myqr');//通过id获取对应组件的索引 var a = love.value;//将组件的value属性值赋给变量a love.value = "love you so much";//将组件的输入内容设为该字符串
html js 动态绑定函数
weixin_30950607的博客
06-15 340
1、绑定到元素，这也是比较常见的一种比如：　　<input type="button" onclick="doEventThing(event)">触发：击此按钮 2、绑定事件到对象：这也是比较常见的一种，特别是在IE4+下面：　　document.getElementById("divid").onclick = doEventThing;3、使用<script ...
html中使用引入js文件中定义的变量
最新发布
SmallGirlYang的博客
11-28 1792
说明：一般开发人员都是使用服务形式打开，但是对于非开发人员，在他们电脑上打开时需要使用第一种形式。// 以访问js中方法的形式获取数据。
JS闭包和引用
weixin_34406061的博客
09-10 86
简介 Javascript 中一个最重要的特性就是闭包的使用。因为闭包的使用，当前作用域总可以访问外部的作用域。因为Javascript 没有块级作用域，只有函数作用域，所以闭包的使用与函数是紧密相关的。 各种专业文献上的"闭包"（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。 由于在Javascript语言中，只有函数内部的子函数才能读取局部变...
ajax返回的html内容绑定不了js事件
Isaac Lin
03-20 1782
bug描述 用ajax来动态改变网站的某一块内容，然后发现无法对其绑定js事件。用getElementsByClassName获取的数组长度也是为0。以下为Ajax返回的内容。 out.write("&lt;div class=\"fansItem\" id=\"fansItem\"&gt;"); out.write("&lt;img src=\"/user/portrait/pic_"
闭包中的this指向
09-15
在闭包中，`this`关键字的指向是根据函数调用的方式来确定的，而不是取决于函数是在全局作用域还是在闭包中定义。默认情况下，当函数作为全局函数调用时，`this`指向全局对象（例如在浏览器中，指向`window`对象），而当函数作为对象的方法调用时，`this`指向调用该方法的对象。 在闭包中，当内部函数引用了外部函数中的变量时，形成了一个作用域链。内部函数可以访问外部函数的变量和参数，但是内部函数没有定义自己的`this`值。因此，在闭包中，`this`仍然指向全局对象或者调用该闭包的对象，而不是外部函数的`this`值。 例如，考虑以下闭包示例： ```javascript function outerFunction() { var outerThis = this; return function innerFunction() { console.log(outerThis === this); // 输出：true }; } var fn = outerFunction(); fn(); // 在全局作用域中调用闭包 ``` 在上面的示例中，`outerFunction`定义了一个内部函数`innerFunction`，它访问了`outerFunction`的`outerThis`变量。当我们在全局作用域中调用闭包时，`innerFunction`的`this`值将指向全局对象，而不是`outerFunction`的`this`值。因此，输出为`true`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值