js中三种事件绑定之间的关系和事件处理函数里的this值

最新推荐文章于 2024-06-28 23:30:00 发布
最新推荐文章于 2024-06-28 23:30:00 发布
阅读量5.7k 收藏 2
点赞数 1
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/THEANARKH/article/details/50520789
版权
<!DOCTYPE HTML>
<html >
<head>
    <meta charset="UTF-8">

</head>
<body>
<div id="b" οnclick="console.log(this)">
<div>
</body>

</html>

输出：div元素本身


<!DOCTYPE HTML>
<html >
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="b" οnclick="console.log(this)">
<div>


<script type="text/javascript">
var c=document.getElementById("b");
c.οnclick=function(){console.log(1)}

</script> 
</body>

</html>

输出：1

onclick的绑定方式会覆盖内联式的事件绑定。也可以在c.onclick里输出this，可知道this代表div元素本身。


<!DOCTYPE HTML>
<html >
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="b" οnclick="console.log(this)">
<div>


<script type="text/javascript">
var c=document.getElementById("b");
c.οnclick=function(){console.log(1)}
c.addEventListener("click",function(){alert('2')},false)
</script> 
</body>

</html>

输出：1,弹出2

addEventListener不会覆盖c.onclick绑定的函数，（自然也不会覆盖内联的onclick，addEventListener就是以叠加的方式绑定事件处理函数的，就像用addEventListener也可以绑定几个事件处理函数一样）也可以在addEventListener的事件处理函数里输出this，可知道this代表div元素本身。




theanarkh
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
事件处理函数的this
04-17
NULL 博文链接：https://yxc-gdut.iteye.com/blog/1814757
好程序员分享React-010-事件处理函数的this指向问题
qq_35970166的博客
08-09 156
好程序员分享React-010-事件处理函数的this指向问题，区分普通函数与事件处理函数 1、普通函数是直接调用的。不存在 this 指向问题，谁调用的，this 指向就是谁。 2、普通函数没有事件对象 event 3、事件处理函数其实也是一个函数，只是他绑定在某个事件上。 4、事件处理函数的 this 默认指向 undefined 解决this指向问题的4种办法 1、直接在事件绑定...
JS（JavaScript）事件处理（事件绑定）
最新发布
分享式获得也是一种学习的态度
06-28 847
天行健，君子以自强不息；地势坤，君子以厚德载物。 每个人都有惰性，但不断学习是好好生活的根本，共勉！ 文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。 峨眉山月半轮秋，影入平羌江水流。 夜发清溪向三峡，思君不见下渝州。 ——《峨眉山月歌》 文章目录JS（JavaScript）事件处理（事件绑定）1. 事件简介1.1 事件的定义1.2 事件源1.3 事件对象1.4 事件监听2. 事件的绑定2.1 静态绑定2.2 动态绑定2.3 注意事项2.4 示例代码2.5 页面效果2.6 示例
事件处理函数里的this
小仙女的博客
07-05 1520
用框架angular写代码时： ngOnInit(){ this.boldBtn.nativeElement.addEventListener（ 'mouseover'，this.showItems）; } getItems(){ } showItems(){ this.getItems();//这里的this指向一个button } 错误： 控制台报错：this.getItems...
js事件处理函数的this的一种用法
m0_70627393的博客
06-24 131
可以看出onblur事件绑定的函数resourcefocus(this)中的this被形参field接收，通过field可以调用textarea文本框的值，还可以设置该文本框的字的颜色之类的样式。
【javascript】函数中的this的四种绑定形式
02-25
javascript中的this和函数息息相关，所以今天，我就给大家详细地讲述一番：javascript函数中的this一谈到this，很多让人晕晕乎乎的抽象概念就跑出来了，这里我就只说最核心的一点——函数中的this总指向调用它的对象...
js使用函数绑定技术改变事件处理程序的作用域
12-02
总结来说，JavaScript的事件处理程序通常会将`this`设置为触发事件的元素，但通过函数绑定，我们可以确保事件处理程序在我们期望的作用域中运行，这在进行面向对象编程时特别有用。理解并熟练运用这一技巧，可以提升...
JS 事件绑定函数代码
10-29
为了实现兼容性，我们可以编写一个名为 `bind` 的函数，该函数接受三个参数：目标对象 `object`、事件类型 `type` 和事件处理函数 `fn`。以下是一个示例实现： ```javascript var bind = function(object, type, fn...
vue绑定事件后获取绑定事件中的this方法
10-18
在Vue.js中，事件处理是框架的一个核心特性，它允许我们响应用户操作并执行相应的逻辑。在Vue中，我们可以使用`v-on`指令或者简写`@`来绑定事件监听器。本文将深入探讨如何在Vue事件绑定中获取`this`，以及如何使用`...
事件处理函数中的this
dlian的专栏
08-26 953
[color=red]这个问题我遇到过，但是我不是很明白下面的讲述-----ajax in action4.3.1[/color] 我们已经得到了一个DOM元素的句柄，分配了一个回调函数给onclick属性。当DOM元素收到鼠标点击事件时，回调即被调用。然而，函数上下文（即变量this所确定的值——参见附录B，可获得关于JavaScript Function对象的完整讨论）赋值为收到事件的D...
事件绑定的3种方式
weixin_30828379的博客
09-12 364
事件绑定 在JavaScript中，有三种常用的绑定事件的方法： 1、在DOM元素中直接绑定； 2、在JavaScript代码中绑定； 3、绑定事件监听函数。 1、DOM元素上绑定 我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、...
JS事件处理函数
不会code
09-22 2507
(a) ele.onxxx = function(event){} 兼容性好，同一个元素的同一个事件上绑定一次，基本等同于卸载HTML行间 this指向DOM元素 (b) obj.addEventListener(事件类型，处理函数，false) 同一个对象同一个事件绑定多个处理函数 this指向dom元素 IE9
js事件以及事件处理函数
qq_47138033的博客
02-20 417
js事件以及事件处理函数
JavaScript高级(6)
Text789的博客
03-22 1151
1.常见的事件 (1)页面初始化事件 onload <script> function testLoad(){ alert("页面初始化事件"); } </script> <body onload="testLoad();"> <script> （2）按钮点击事件 onclick <script> function testclick(){ alert("按钮点击事件"); } </s...
js中事件处理函数的总结
omelette
04-15 498
1.HTML事件处理        直接添加到HTML结构中，不过这样的不利于保证HTML页面和JS的分离。不推介。        demo:                 2、DOM  0级事件处理函数        把一个函数赋值给事件处理程序属性。js与页面分离的方法，但是不能够进行叠加，也就是对同一个Element赋值两个函数，第一个函数将被第二个覆盖。      
javascript事件处理-常用函数
ynm0000的博客
07-04 315
的JavaScript是一种基于对象与事件驱动并有安全性能的脚本语言。 JavaScript的的的的的的的常用事件驱动如下，事件后面一般接函数。 onLoad：表示网页加载时要触发的事件; onunload的的的：表示关闭页面时要触发的事件; onClick：表示单击某一控制时触发，“有趣并不一定触发的就是按钮，例如也可以是链接。&lt;a href ="#"onClick ="fun()"...
javascript基础：事件2事件处理函数
gongwutianya的博客
07-07 624
一、事件处理函数简介 JavaScript 可以处理的事件类型为:鼠标事件、键盘事件、HTML 事件。  所有的事件处理函数都会都有两个部分组成,on + 事件名称,例如 click 事件的事件处理函数就是:onclick。在这里,我们主要谈论脚本模型的方式来构建事件,违反分离原则的内联模式,我们忽略掉。 对于每一个
学js 第三天-事件处理函数
weixin_40205005的博客
06-05 229
①鼠标指针悬停在某个元素上时触发一个动作，用onmouseover。②鼠标指针离开某个元素时触发一个动作，用onmouseout。③当鼠标点击某个元素时触发一个动作，用onclick。          例： onclick="showPic(this);return false;" //当点击这个元素的时候，触发showPic这个函数，作用于当前的对象。        据书中记载，return ...
点击事件除了绑定了节流函数还要处理其他事件，要怎么写js
06-09
如果你需要在绑定了节流函数的点击事件中处理其他事件，可以在节流函数内部再调用一个处理其他事件的函数，例如： ```javascript function throttle(fn, delay) { let timer = null; return function(...args) { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值