Javascript -如何拾取触发了事件的元素
JavaScript是一种广泛应用于网页开发的脚本语言，它可以用来实现网页的动态交互效果。在JavaScript中，可以通过事件来触发特定的操作，而拾取触发了事件的元素是常见的需求之一。
要拾取触发了事件的元素，可以使用事件对象（event object）来获取相关信息。事件对象包含了与事件相关的属性和方法，其中包括target属性，它表示触发事件的元素。
以下是一种常见的拾取触发了事件的元素的方法：
function handleClick(event) {
var element = event.target;
// 在这里可以对触发事件的元素进行操作
}
var button = document.getElementById("myButton");
button.addEventListener("click", handleClick);在上面的代码中，我们首先定义了一个名为handleClick的函数，它接收一个事件对象作为参数。在函数内部，我们通过event.target获取到了触发事件的元素，并将其赋值给了变量element。接下来，我们可以对element进行任何需要的操作。
需要注意的是，上述代码中的"myButton"是一个示例，实际上可以是任何具有事件的元素的id或其他选择器。
JavaScript中的事件处理是前端开发中非常重要的一部分，它可以用于实现各种交互效果和用户体验的改进。在实际应用中，可以根据具体的需求和场景选择合适的事件类型和相应的处理方法。
腾讯云提供了一系列与JavaScript开发相关的产品和服务，例如云函数（Serverless Cloud Function）、云开发（CloudBase）、云存储（Cloud Object Storage）等，这些产品可以帮助开发者更好地构建和部署JavaScript应用。你可以通过访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于这些产品的详细信息。
相关·内容
1回答
您好，我正在尝试在view initialize函数内进行dom修改后触发一个view事件。
编辑:很抱歉我的问题，它不是很清楚。这里有一个完整的代码示例。最后，我意识到我在添加class..feeling之前触发了更改事件，这太愚蠢了，但我挣扎了几个小时！谢谢您一直鼓励我!
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<script src="http://underscorejs.org/underscore.js">&l
浏览 2提问于2016-02-05得票数 0
1回答
我刚刚注册了，如果是这样的话，我正试着为下面的情况编写一个食谱。
我的孩子们没有自己的Google帐户；我们使用家庭帐户来为他们安排约会。例如，“在同学的地方玩约会A”。由于我已经添加了位置，现在我会收到谷歌的提醒时，我需要离开，让他下车。但我想提醒一下当我需要离开去接他的时候。
为此，我想在第一次约会结束时，在同一地点自动添加第二次约会，时间为五分钟或十分钟。
所以我想的是
IF
I have an event in my calendar with the name of one of my kids
AND
it has a location
AND
浏览 0提问于2016-07-12得票数 4
1回答
我在Kendo ( JavaScript one，而不是MVC)中使用Kendo上下文菜单。它提供了一个属性，当用户选择一行网格时，我将使用该属性来打开上下文菜单。现在，我需要使用模板在网格单元格中添加一个链接，但单击该链接时，我需要一个JavaScript函数来运行，而不是打开上下文菜单。下面是显示行和蓝色链接的片段，它不是调用JavaScript函数，而是打开上下文菜单。上下文菜单被设置为在左侧单击而不是右边打开，因为客户端希望它对于iPad是这样的。
如果单击该链接，是否无论如何要绕过上下文菜单打开，最好是在提及上下文菜单的filter属性时排除链接或锚标记。我提到过这样的菜单
浏览 2提问于2016-01-18得票数 4
回答已采纳
我有一个文件树，里面有可拖动的文件夹和文件，使用自定义代码(带有Backbone，这是无关紧要的)。当我拖动一个项目时，我将一个拖动元素“附加”到鼠标光标上，以显示该项目已被拾取。
然而，当我拖动项目时，我希望能够在树中的其他文件和文件夹(在我的例子中是mouseenter和mouseleave )上触发鼠标事件。这里的问题是，光标下的元素是被拖动的元素，这意味着不会触发其他鼠标事件。
我如何才能“看透”我用光标拖动的元素，这样鼠标事件仍然会在DOM的其余部分触发？
浏览 1提问于2013-04-26得票数 1
回答已采纳
对于VueJS，我有两个独立的组件。
一个模式和一个表单。
在模态表单中，用户输入一个PIN并确认，然后将该值设置为表单中的一个输入标记，以便基本上保存该值。
在模态组件中，我像这样简单地设置了值：
document.getElementById('pin').value = this.pin_input;
在表单组件中，input标记如下所示：
<input type="hidden" @change="submit()" id="pin">
在控制台中，此输入标记get的值已正确设置，尽管值更改时不会调用@chan
浏览 1提问于2019-04-21得票数 0
我正在处理一些代码(由其他人编写)，如下所示：
var _layoutRoot = $("#whatever");
eventName = 'CopyArticle';
eventData = { targetArticleIds: selectedArticleIds, targetCategoryIds: selectedCategoryIds };
// fire the event
if (eventName) // null is unexepcted here
_layoutRoot.trigger(eventName, eventDat
浏览 0提问于2013-12-18得票数 5
回答已采纳
1回答
我还没能成功地将jQuery事件侦听器附加到<object>类型的元素上，并让它拾取在该事件上触发的任何事件。
因此：
<object></object>
使用JavaScript：
$('object').on('foo', function(evt, data){ alert(data) });
$('object').trigger('foo', 'object-on-object');
如果我在$('body')上有完全相同的代码，那么它工作得很好。此外，
浏览 0提问于2012-05-25得票数 1
回答已采纳
如果我们查看互联网，一些网站说Javascript是同步的，NodeJs是非同步的。
我们可以进行异步调用，并且可以使用JS和nodeJs中的承诺，然后是如何同步的，而另一个则是异步的。或者，如果我错了，那么两者都是同步的，或者都是异步的。
所以，我的问题是：
Asynchronous?Is 是NodeJs Syncrhonous或 javascript Syncrhonous或Asyncrhonous?
浏览 5提问于2022-08-28得票数 -5
1回答
我正在尝试使用YUI阻止JavaScript事件继续传播。下面是一些最小的HTML和一些最小的JavaScript，它们演示了这个问题：
HTML：
<a href="#foo" onClick="fooClickTest()" id="foo">foo</a>
<a href="#bar" id="bar">bar</a>
JavaScript：
function fooClickTest(e) {
alert(
浏览 1提问于2009-03-23得票数 1
回答已采纳
我知道当元素加载jQuery时如何触发函数，但似乎无法在纯Javascript中找到它。我想做的这是JS。
因此，当一个元素加载时，我知道如何在jQuery中触发一个函数，但我想在Javascript中这样做。我想做的是纯Javascript。
$('img').load(
function(){
//do stuff
})
浏览 0提问于2017-09-09得票数 1
回答已采纳
我编写了这段javascript/jQuery代码来更改复选框。
Javascript
$(function() {
$("a").click(function() {
if ($("input[type='checkbox']").attr('checked') == "checked")
$("input[type='checkbox']").removeAttr('checked');
else
浏览 1提问于2012-04-15得票数 25
回答已采纳
可能重复：
我天真地尝试使用JavaScript以编程方式打开文件选择器(请参阅)：
<input type='file'>
<script>
$(function () {
$('input').click();
});
</script>
上面的话不起作用。如何使用input type='file'打开JavaScript的文件选择器？
浏览 3提问于2012-08-26得票数 9
回答已采纳
我正在尝试创建一个简单的html表，当用户将鼠标移到该表上时，它会高亮显示一行。不幸的是，css悬停项不适用于IE。这样我就可以用Javascript来模拟它了。我可以使用onmouseenter或onmouseover。
它们之间有什么区别，我应该使用哪一个？
浏览 1提问于2009-10-29得票数 46
回答已采纳
1回答
我正在使用bootstrap的模式，我希望在模式的顶部有一个导航栏，它使用jquery的.load在单击时更改模式的视图。我可以使用默认视图显示模式，但不能让其余按钮在单击时触发。下面是我想要的东西的简化版本。谢谢你的帮助。
<div class="modal-header">
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>X</button>
<h3
浏览 4提问于2013-03-15得票数 0
回答已采纳
1回答
为了简化(并使‘更漂亮’)在我正在建设的网站导航，我正在制作一个Silverlight组件，它将允许用户更改表格中的选定标签。我注意到了一个用于隐藏选项卡的选项(tabsheetName.hideTabs())。
有没有一种方法可以使用Javascript更改选定的选项卡？如果是，我的Silverlight导航组件就可以执行Javascript了。
我唯一能想到的另一件事就是编写一个定制的GWT组件。Vaadin手册解释了如何做到这一点，但它看起来并不简单。
谢谢。
浏览 0提问于2011-01-27得票数 2
回答已采纳
我还是个前卫新手。在提交对JavaScript textarea标记的更改时，我正在搜索对代码的快速调试。
我用浏览器控制台调试了它，但还没有弄清楚它是如何运行的。所需的行为应该是 Change 按钮最初是隐藏的，然后当用户开始更改文本区域中的内容时，按钮就会出现。单击按钮后，它将保留更改。
我试图查找与此行为相关的类似but，但这些but既不是JavaScript，也不是与我的相关的。
下面是以Javascript为特色的HTML片段(我现在忽略了CSS创建的演示文稿)：
<form>
<input type="button" value="
浏览 4提问于2017-08-05得票数 0
回答已采纳
问题：
我在我的selects代码中有一些带有options的on change event handler，并且设置了一个on change event handler，以确定何时会更改所选内容。
下面的代码显示了获取on更改的jQuery代码：
$(document).on('change', '.anyHtmlSelect', updateState);
我有一个现有的Javascript函数，它应该用作回调函数。
Javascript函数如下所示：
function updateState(element)
{
var currentId
浏览 1提问于2017-07-08得票数 0
回答已采纳
4回答
我不知道这有什么问题，因为我每一步都遵循了jquery.com关于表单提交事件的教程。
我的Javascript：
Ofc。包含最新的jQuery库。
<script type="text/javascript">
$("form#addFav").submit(function(event) { event.preventDefault(); alert("hello"); });
</script>
我也尝试过使用$(document).ready()事件：
$(document).ready(function(){
浏览 0提问于2012-04-14得票数 2
回答已采纳
3回答
iam的链接如下所示
<a item='1' href='javascript:void(0)'><img class='icon1' /><span>text1</span></a>
<a item='1' href='javascript:void(0)'><img class='icon2' /><span>text2</span></a>
<a item='1
浏览 0提问于2010-02-06得票数 0
回答已采纳
2回答
我一直在没完没了地寻找一种工作方式，用javascript (我正在制作一个用户脚本)来实现鼠标单击特定元素的自动化。结构如下：
<div id="elementContainer">
<div class="item1" style="width: 50px; height: 50px;">AutoClick Here!</div>
</div>
item1是我想要自动单击的东西。我尝试过许多方法，例如获取元素并在其上创建/初始化/发送“单击”事件、在其上调用.click()等，但老实说，我对
浏览 1提问于2011-02-11得票数 0
我最近开始尝试wordpress jetpack插件的无限滚动功能。它似乎工作得很好，但我正在尝试与Masonry集成，所以我需要使用post-load事件，该事件应该在Jetpack加载更多帖子时触发。
但我似乎不能捕捉到这一事件。
我有一个非常简单的设置(有一个受支持的默认主题--二十四)，我在footer.php中添加了这个小脚本来尝试捕捉事件：
<script type='text/javascript'>
document.body.addEventListener("post-load", function() {
浏览 2提问于2014-09-20得票数 4
我需要能够使用javascript/jquery更新字段。但是，我需要能够检查输入是用户手动更新的，还是使用document.getElementById().value动态更新输入的。
不管用户是否修改了控件，或者如果我动态更新了控件，onChange()方法似乎都会执行。
有什么帮助吗？是否有类似于onChange()的东西只在用户手动键入/编辑控件时执行？
浏览 3提问于2020-09-14得票数 0
回答已采纳
这个问题已经困扰了我一段时间了，我确信有某种技术上的问题阻止了这一点，但是有没有办法找到哪个Javascript文件链接到一个按钮？
因此，当我按下提交按钮并触发Javascript事件时，我需要找到被触发的代码，而不是在html头部的每个链接中查找
"jQuery('submitBtn').click(..."
我正在使用Firebug，有时还在使用Chrome的控制台。
浏览 3提问于2012-02-14得票数 3
回答已采纳
您好，我知道valueUpdate: valueUpdate将在用户输入后进行模型更新，但我想知道如何在其他javascript代码更改值后自动执行javascript
我有一个执行document.getElementById("input").value = "new value“的js代码；
我是否必须手动更新模型，或者我应该使用什么valueUpdate。
浏览 0提问于2012-11-30得票数 2
回答已采纳
我已经使用 & CSS动画/转换在我的移动web应用程序(PhoneGap)中实现了JavaScript Android模式。
不过，还有一件事还在躲着我。
我希望，一旦动作菜单完全显示，用户点击操作菜单之外的任何地方(图中标签为3)，菜单应该收回，并显示原始项目(在图中标记为1)。
在桌面应用程序中，可以“捕获焦点”并执行lostfocus中的(1)转换。
什么是与lostfocus事件等价的JS。我看到了一个onfocus和onblur事件，但从我所读到的情况来看，它确实用于需要聚焦的事物，比如输入、文本区域等等。
除了在页面中的每个其他元素的touchend中放置一些代
浏览 2提问于2013-12-25得票数 0
回答已采纳
5回答
我有一个简单的HTML页面：
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
<script>
$(document).ready(function () {
$('#test').click();
});
</script>
</head>
<body>
<a id=&
浏览 8提问于2014-09-22得票数 1
回答已采纳
1回答
我正在为每个新元素生成一个带有按钮的列表。
此部分位于生成列表的javascript函数中。我给了这个按钮一个叫做加法的类。当我点击一个按钮时，我正在等待一条消息。关于这个主题的其他条目和页面已经让我走了这么远，但我需要一个额外的解释，我做错了什么。
list (vehicleList.js) javascript的一部分：
... + '<input class="adding" type="button" name="vehicle" value="Add vehicle">' + ...
用于
浏览 3提问于2018-01-07得票数 1
回答已采纳
我使用以下结构在JavaScript中设置我的对象/类：
SelectUser = function(instanceID) {
this._instanceID = instanceID;
// Initialize
this.initialize();
}
SelectUser.prototype = {
initialize: function () {
...
},
update(userID) {
$('#hidden-field-' + this._instanceID).val(
浏览 0提问于2010-08-21得票数 1
回答已采纳
我试图理解JavaScript的useCapture参数中的addEventListener()。这是我的HTML：
<div id="wrapper">
<button id="button">Click me</button>
</div>
这是我的JavaScript：
document.getElementById('wrapper').addEventListener('click', function () { console.log('Wrapper c
浏览 1提问于2013-08-07得票数 4
回答已采纳
在JavaScript页面上，如果用户使用以下命令按enter键，我将弹出一个警告
if(evt.keyCode == 13){
alert("Return Key Pressed");
}
但当我按下iPad上的return键时，事件不会触发。如何捕捉事件？
浏览 0提问于2012-05-09得票数 3
回答已采纳
我有以下jQuery代码：
$('.carousel[data-type="multi"].item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone(true).appendTo($(this));
浏览 13提问于2016-08-19得票数 0
回答已采纳
1回答
onblur事件并不总是触发。
这不是很容易预测的。我包含了一个小程序，您可以运行它来复制问题。您需要在iframe内单击，并查看控制台中是否有asti。如果它在那里，这个世界就万事大吉了。但是，有时onblur不会触发，也不会打印任何内容。故障频率约为5%。
为什么onblur事件并不总是会触发？
<html>
<head>
<title> INDEX </title>
</head>
<body >
<h1> TABARNAC </h1>
<p>
浏览 3提问于2015-07-17得票数 0
1回答
使用LitElement创建web组件。我在同一个页面中多次使用这个组件。
我只想在我的组件第一次在页面上呈现时触发一个事件。
浏览 2提问于2020-07-11得票数 0
2回答
我想激活这个javascript：
jsPlumb.repaintEverything();
...and启动一个警告框，上面写着“我在扩展！”当用户单击中的按钮时
有人知道如何做到这一点吗？
浏览 3提问于2016-12-02得票数 3
回答已采纳
1回答
有没有办法通过Javascript检测input元素上伪类:invalid的“外观”？
换句话说，当:invalid伪类出现在input元素上时，如何触发某些Javascript代码运行？
浏览 1提问于2013-04-04得票数 11
回答已采纳
我有一个带有name="testo_da_inviare"的按钮，我可以用以下方式触发它的单击事件：
document.forms['form_da_ricordare'].elements['testo_da_inviare'].onclick
现在，我想用不支持button属性的a元素替换name元素。所以我给了一个元素id="testo_da_inviare"
如何编辑js以触发onclick？javascript不是我的茶，我还在学习如何使用普通的Javascript。
浏览 7提问于2016-03-16得票数 0
回答已采纳
我在画布上添加了一些折线，并注册了在画布上缩放的事件处理程序，但只有当鼠标恰好在折线上时，缩放才起作用。当鼠标在画布上的其他位置时，我如何使缩放工作？
浏览 1提问于2010-12-22得票数 1
在我思考之前，我已经看过几次了，但是没有明确的例子出现在我的脑海中。
我想要做的是使用javascript来切换当前选定的表单域。例如，我有一个用于输入出生日期的表单域，一个用于电子邮件的表单域。一旦出生日期生效，光标将自动切换到电子邮件输入字段。
我将使用jQuery的change()事件绑定器来监视字段更改并在本地进行验证，然后执行下一步操作，我只是不确定如何选择表单域。
我可能是错的，这可能是不可能的，但如果是的话，我将非常感谢任何帮助，因为我还没有使用我认为最合适的搜索查询找到任何东西。
谢谢:)。
浏览 0提问于2012-08-08得票数 1
回答已采纳
1回答
我有一个茉莉花测试，我有两个输入字段。我专注于第一个输入，然后模拟'tab‘键上的按键，并期望焦点放在第二个输入上。不幸的是，情况并非如此。重点和第一次没有改变，我的测试失败了。如何才能解决这一问题，使失败的测试通过？
我试图测试的东西的小提琴：
茉莉花试验失败的小提琴：
HTML：
<input id="first"></input>
<input id="second"></input>
JavaScript：
function simulateTab() {
var TAB_KEY = 9;
浏览 2提问于2014-07-30得票数 5
我有一个锚，在这个锚上我用JavaScript触发了一个click。请参阅。
$(function() {
$('a').click();
});
由于某些原因，触发click不会将我带到由锚点的href属性指定的页面。
如何让click事件也将我带到由锚点链接的页面？
浏览 0提问于2013-03-24得票数 0
回答已采纳
我已经浏览了.trigger()文档。但仍不确定这把小提琴是如何工作的。链接：
HTML:
<input id="theInput"/>
Javascript
$(document).ready(function() {
$("#theInput").trigger("input");
});
$("#theInput").on("input", function() {
alert("Here");
});
现在，在每个keyup/paste事件上都会触发输入事件。
浏览 3提问于2016-01-27得票数 1
回答已采纳
1回答
我正在用PHP和mysql在后端构建一个基于Javascript的应用程序。由于代码的复杂性，我希望能够触发自定义事件，并在捕捉到这些事件时执行操作。
所以我遇到了和。根据，我们也可以使用jQuery触发器。
太棒了?还没。在这些文档中，IE不支持这些自定义事件( )。
但是，我以前使用过jQuery插件，它使用自定义事件并在IE上工作。
我的问题是
IE是否支持自定义事件？
如何找到跨浏览器的兼容性？
使用自定义事件的正确方法是什么？
是否有适合自定义事件的jQuery插件？
使用自定义事件有什么负面影响吗？
问题1、2和3是提出这个问题的主要问题。
浏览 3提问于2014-05-14得票数 3
1回答
JavaScript：
$(function(){
$('#userID').change(function(){
$('#username').val($('#userID option:selected').data('username'));
});
});
HTML：
<select class="form-control" name="nip" id="userID">
<option value='1
浏览 7提问于2017-08-24得票数 0
回答已采纳
我想单击a#lanostracasa从外部.html中获取两个不同的div，并将其加载到另外两个div中(外部文件havePicture中的#fotoCasa )(外部havePicture的和 )。
我快疯了，因为我看到容器中的文本正在加载，而所有的文本都消失了，没有任何内容被加载。
<div id="contAll">
<div id="fotoCasaHtml"></div>
<div id="container">
<p>
<div id=
浏览 1提问于2012-09-20得票数 1
我正在使用来自BootstrapVue的BootstrapVue组件为我的应用程序呈现一个导航。
例如，我的导航中有30个菜单项，因此侧边栏中的内容垂直滚动。我想将滚动事件绑定到动态添加/删除某些类。
我尝试创建一个自定义滚动指令：
Vue.directive('scroll', {
inserted: function(el, binding) {
console.log('el', el);
let f = function(evt) {
if (binding.value(evt, el))
浏览 2提问于2021-06-11得票数 0
回答已采纳
1回答
我在主体上使用了网格显示，在第1列中使用了一些控制元素，在第二列中使用了完整页面视图。第一列可能包含许多元素，并且需要垂直滚动(overflow:auto)。
我在网格列中的其他元素中有一个输入元素，我将平面选择器分配给它。
flatpickr("#date-input", {
static: true,
//appendTo: "scroll-parent"
});
我的问题是，没有静态属性的平板拾取控件显示，但不会滚动。
使用静态属性，平板选择器控件将与输入元素一起滚动，但显示会使父容器溢出滚动。
我希望控件在没有静态的情况下显示为可见，但在滚动时
浏览 10提问于2022-03-15得票数 0
回答已采纳
1回答
当使用jQUery进行AJAX调用时，如果假设响应在执行$.ajax()后的下一行JavaScript之前返回给客户端，浏览器将在调用AJAX回调函数之前继续通过脚本执行，还是会立即暂停执行并跳转到回调函数？例如：
function MyAJAXFunction() {
// Make AJAX call
$.ajax({
url: "/api/...",
success: function () {
alert("AJAX Callback");
}
});
浏览 5提问于2013-07-19得票数 1
回答已采纳
1回答
我是新的传单，并建立了它的教程，这是我没有问题加载地图。当我试图通过外部JS文件运行脚本，而不是将脚本粘贴到HTML标记中时，问题就开始了。所以现在我不能让它像这样工作: HTML：
<head>
<link rel="stylesheet" type="text/css" href="leaflet/leaflet.css"/>
<script type="text/javascript" src="leaflet/leaflet.js"></script
浏览 2提问于2017-11-03得票数 1
1回答
我有一个asp隐藏值字段：
<asp:HiddenField Value="" ID="TitleViewerHiddenValue" OnValueChanged="TitleViewerHiddenValue_ValueChanged" />
我有一个javascript事件：
function setHiddenValue()
{
var x = document.getElementById('<%=TitleViewerHiddenValue.ClientID %>');
x.
浏览 2提问于2013-10-05得票数 0
我已经找了大约30分钟了，所以如果我已经错过了这个答案，我很抱歉。我见过很多亲密无间的人，但都不是这样的。
我有一个导入的JavaScript函数，它在几个文件中使用。它使得任何行具有clickable-row类的表都将重定向到href属性，从而使整个行充当一个锚标记。
但是，在td上的某些页面上填充了一个复选框，我希望能够在不进行页面重定向的情况下单击该复选框(这样我就可以在表中选择多个行)。
以下是我目前的职能：
jQuery(document).ready(function() {
jQuery('.clickable-row').click(function()
浏览 4提问于2014-10-13得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
