JS event 自定义属性的妙用

最新推荐文章于 2023-06-10 17:28:29 发布
原创 最新推荐文章于 2023-06-10 17:28:29 发布 · 765 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JavaScript #Ajax #HTML #ViewUI

本文介绍了JavaScript中Event对象的应用及如何通过自定义属性实现特定功能。通过两个实例展示了如何利用event对象及其属性来捕获点击事件并读取自定义属性的值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近接触JS比较多  mark个event的用法

阿里妈妈的有个页面 采用的ajax实现的 其中使用到event

我们可以通过自定义的属性 来达到一些功能 例如下面的a 标签中的 siteid 就是自定义的标签

<html>
<script type="text/javascript">
 function test(event){
   alert(event)
   var ev=!event?window.event:event;
   alert(ev);
   alert(ev.srcElement.sitename)
 
 }
</script>


<a href="javascript:void(0)" siteid="whut" id="baba" onclick="test()">aaaa</a>
</html>

 

我们还可以这样

<html>
<script type="text/javascript">
document.onclick=function(e){
 var ev=!e?window.event:e;
 var node=ev.srcElement;
 if(node.getAttribute("siteid")=="whut"){
  alert("do some ajax here");
 }
}

</script>


<a siteid="whut" id="baba" >aaaa</a>
</html>

e.target 原生js 没有 $event的 自定义属性值 传参
lyinshaofeng的博客
11-10 608
vue 原生js e.target 没有 $event的 自定义属性值 传参
JavaScript 学习之旅：第三十一课：CSS 自定义属性
caifox的博客
01-06 760
CSS 自定义属性是 CSS 中的一种特殊变量，允许你在样式表中定义可复用的值。这些值可以是颜色、字体大小、间距等任何有效的 CSS 属性值。
《JS 之 自定义事件对象》
yk_ddm的博客
07-29 169
目录常见事件自定义事件事件监听 常见事件 click、dblclick、mouseenter、… 自定义事件 事件监听 attachEvent（浏览器存在兼容性问题，IE老版本特有的方法，IE6-10支持）、addEventListener （浏览器存在兼容性问题，IE9以后才支持） ...
获取自定义属性/event的触发事件对象和绑定事件对象
Lambert0320的博客
12-25 3719
1.获取自定义属性 var testEle = document.getElementById("test")   testEle.setAttribute("key","value"); // 设置   testEle.attributes["key"].nodeValue; // 获得   2.event的触发事件对象和绑定事件对象 event.target返回触发事
js事件Event对象(自定义事件对象 CustomEvent)
黄彪博客
09-09 4060
文章目录一、参考二、Event 接口介绍2.1 事件分类三、 创建过时Event不推荐3.1 document.createEvent3.1.1 语法`var event = document.createEvent(type);`3.1.2 案例3.2 Event.initEvent()3.2.1 语法 `event.initEvent(type, bubbles, cancelable);`3.2.2 案例四、推荐自定义事件4.1 CustomEvent()4.1.1 语法`event = new Cu
JavaScript event属性
weixin_43294560的博客
11-28 609
【代码】JavaScript event属性。
JS的自定义属性
weixin_42565663的博客
07-08 599
1、除了一些特定属性，如value、name，还可以添加自定义属性：oBtn.abc = 123 ;    JS可以为任何HTML元素添加任意个 自定义属性。2、for里面套了function，function里面的i变量为最后循环完的那个值，所以需要用带this。3、一般创建的索引值也为自定义属性，如aBtn[i].index = i ; 外面还包含一个for循环。从i=0依次递增建立索引值。4...
js 点击a标签 获取a的自定义属性方法
11-26
本文将详细讲解如何在JavaScript中点击`<a>`标签并获取其自定义属性的方法，以及如何解决在jQuery环境下遇到的问题。 首先，我们来回顾一下问题的背景。在项目中，开发者试图通过点击`<a>`标签来显示完整的内容。...
vue如何获取自定义元素属性参数值的方法
10-17
在Vue框架中，获取自定义元素属性参数值是进行组件间数据传递和操作的常见需求。...在处理自定义属性时，应当更加注意数据的传递与处理，避免直接操作DOM，而是更多地利用Vue提供的响应式系统来实现数据与视图的同步。
事件绑定和自定义属性
05-29
通过JavaScript，我们可以轻松访问这些自定义属性，以便在脚本中使用。 在实际应用中，事件绑定和自定义属性经常结合使用。比如，一个按钮元素可能有`data-action="save"`的自定义属性，然后通过事件监听该按钮的...
JavaScript之DOM自定义属性的使用
weixin_44827643的博客
06-26 749
本文主要介绍DOM中自定义属性的设置、获取及移除。自定义属性比较典型的应用是给元素添加一个“标签”，方便查找该元素或建立此元素同其他元素之间的联系。1.setAttribute用于设置属性的值，若不存在该属性则进行创建2.getAttribute用于获取相应属性的值3.removeAttribute用于移除相应属性。（注：有时某些属性的值通过设置值的方式达不到效果，就可以进行移除）...
JS 之 事件Event对象详解（属性、方法、自定义事件）
weixin_45092437的博客
06-10 1万+
​ 事件event对象是指在浏览器中触发事件时，浏览器会自动创建一个event对象，其中存储了本次事件相关的信息，包括事件类型、事件目标、触发元素等等。浏览器创建完event对象之后，会自动将该对象作为参数传递给绑定的事件处理函数，我们可以在事件处理函数中通过访问event对象的属性和方法，来获取事件的相关信息，并做出后续的逻辑处理。
JavaScript实现自定义Event(omit,once,addEventListener)
Three_ST的博客
08-30 614
自定义实现JavaScript中的事件函数，包括AddListener,RemoveListener,Once,Emit等方法 function EventEmitter(){ this.events = new Map(); } // 实现方法 // addEventListener const wrapCallback = (fn,once=false)=>({callback:fn,once}); EventEmitter.prototype.addListener = function
JS之自定义属性的运用
qq_19004625的博客
12-12 418
在我们常使用的控件中，我们经常可以自己为元素定义一些属性来达到想要的效果。 例如：   我们想要给按钮设定一个值，这个值对每个按钮都要相同的效果。 ： window.onload=function(){ var aBtn=document.getElementsByTagName("input"); var arr=['A','B','C','D'];
JS获取元素属性和自定义属性
热门推荐
马优晨
09-14 16万+
昨天有同事问我，怎么获取自定义元素的属性，我意识到这个确实是个 问题，所有总结一下自己的心得。 获取元素的属性分为两种类型：1-获取元素常见的属性（class,id,type,value……）2-获取自定义的元素的属性（data-value,data-mess…….）获取元素的属性，设置元素的属性： 1-原生JS** 设置属性 .setAttribute("属性","值")
js中获取自定义属性的方法
weixin_46421045的博客
06-10 643
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> <li
在js中如何获取到你点击的元素的html、对象、属性值、以及自定义的属性值
xyq286654901的博客
05-25 5万+
前言：记录自己在工作中遇到的小问题，积少成多！因为是新手，有什么写的不好的地方还希望大家能够指出来。有什么更好的解决方法也希望大家能提出来，一起交流分享！（小弟在这里先谢谢大家） 直接上代码： 1、jsp页面代码 首先定义两个按钮,添加一些常规属性type、id、value 其次再定义给每个按钮一个自定义的属性custom 与方法一配套的input 与方法二配套的i
Vue中currentTarget $event 的用法
hh3167253066的博客
08-21 2037
<button @click = “clickfun($event)”>点击</button> methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 #获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML #获得点击元素的第一个子元素 e.currentTarget.fi
JS中event对象中的常见属性
mengxianglong123的博客
11-26 3039
在事件函数中，其实是可以写参数的，写法： &lt;script&gt; var btn = document.getElementById("btn"); btn.onclick = function (event) { var e = event || window.event; console.log(e.target); ...
layui的自定义属性的使用方法
最新发布
03-13
好的，我现在需要帮助用户解决关于Layui框架中如何使用自定义属性的问题。用户提到他们想查找相关的教程和示例，所以我得先回忆Layui的文档和相关引用内容。 首先，根据用户提供的引用内容，特别是引用[1]、[4]中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值