Questions tagged «dom-events»

DOM（文档对象模型）事件允许事件驱动的编程语言在DOM树内的元素节点上注册各种事件处理程序/侦听器。

9
在Angular 4中检测实时窗口大小变化
我一直在尝试构建一个响应式导航栏，并且不希望使用媒体查询，因此我打算使用*ngIF窗口大小作为标准。但是我遇到了一个问题，因为我无法找到有关Angular 4窗口大小检测的任何方法或文档。我也尝试过JavaScript方法，但不支持。 我也尝试了以下方法： constructor(platform: Platform) { platform.ready().then((readySource) => { console.log('Width: ' + platform.width()); console.log('Height: ' + platform.height()); }); } ...用于离子 并且screen.availHeight，但仍然没有成功。
118 html  angular  dom-events 
13
是否可以在不破坏后代事件监听器的情况下附加到innerHTML？
在以下示例代码中，我将onclick事件处理程序附加到包含文本“ foo”的范围。该处理程序是一个匿名函数，会弹出一个alert()。 但是，如果我分配给父节点的 innerHTML，则此onclick事件处理程序将被销毁-单击“ foo”将无法弹出警报框。 这个可以解决吗？ <html> <head> <script type="text/javascript"> function start () { myspan = document.getElementById("myspan"); myspan.onclick = function() { alert ("hi"); }; mydiv = document.getElementById("mydiv"); mydiv.innerHTML += "bar"; } </script> </head> <body onload="start()"> <div id="mydiv" style="border: solid red 2px"> <span id="myspan">foo</span> </div> </body> </html>
11
execCommand中“粘贴为纯文本”的JavaScript技巧
根据execCommand下面介绍的示例，我有一个基本的编辑器。有三种方法可以在execCommand区域内粘贴文本： Ctrl+V 右键单击->粘贴 右键单击->作为纯文本粘贴 我想只粘贴没有任何HTML标记的纯文本。如何强制前两个动作粘贴纯文本？ 可能的解决方案：我能想到的方法是为（Ctrl+ V）的keyup事件设置侦听器，并在粘贴之前剥离HTML标记。 这是最好的解决方案吗？ 避免粘贴任何HTML标记是否安全？ 如何将侦听器添加到右键单击->粘贴？
5
使用addEventListener获取附加到节点的事件侦听器
我已经看过以下问题： 在调试时或从JavaScript代码中如何在DOM节点上查找事件侦听器？ 如何以编程方式检查和修改html元素上的Javascript事件处理程序？ 如何使用Firebug（或类似工具）调试JavaScript / jQuery事件绑定 但是，它们都没有回答如何使用创建连接到节点的事件侦听器的列表addEventListener，而不addEventListener在创建事件侦听器之前修改原型。 VisualEvent不会显示所有事件侦听器（特定于iPhone的事件侦听器），而我想以编程方式（某种程度上）做到这一点。
10
如何观察阵列变化？
在Javascript中，当使用基于推，弹出，移位或基于索引的分配修改数组时，是否有一种通知方式？我想要可以触发事件的东西。 我知道watch()SpiderMonkey 的功能，但是只有在将整个变量设置为其他变量时才能使用。
14
如何检查是否存在动态附加的事件侦听器？
这是我的问题：是否可以通过某种方式检查动态附加事件侦听器的存在？或者如何检查DOM中“ onclick”（？）属性的状态？我已经像Stack Overflow一样在互联网上搜索解决方案，但是没有运气。这是我的html： <a id="link1" onclick="linkclick(event)"> link 1 </a> <a id="link2"> link 2 </a> <!-- without inline onclick handler --> 然后在Javascript中，将动态创建的事件侦听器附加到第二个链接： document.getElementById('link2').addEventListener('click', linkclick, false); 该代码运行良好，但是我所有检测该附加侦听器的尝试均失败： // test for #link2 - dynamically created eventlistener alert(elem.onclick); // null alert(elem.hasAttribute('onclick')); // false alert(elem.click); // function click(){[native code]} // btw, what's this? jsFiddle在这里。如果单击“为2添加onclick”，然后单击“ [链接2]”，则事件触发良好，但“测试链接2”始终报告为false。有人可以帮忙吗？
13
JavaScript中匿名函数上的removeEventListener
我有一个包含方法的对象。这些方法被放入匿名函数内部的对象中。看起来像这样： var t = {}; window.document.addEventListener("keydown", function(e) { t.scroll = function(x, y) { window.scrollBy(x, y); }; t.scrollTo = function(x, y) { window.scrollTo(x, y); }; }); （还有很多代码，但这足以显示问题） 现在，在某些情况下，我想停止事件监听器。因此，我试图做一个removeEventListener，但我不知道如何去做。我已经读过其他问题，无法在匿名函数上调用removeEventListener，但是在这种情况下也是如此吗？ 我在匿名函数内部创建了一个t方法，因此我认为这是可能的。看起来像这样： t.disable = function() { window.document.removeEventListener("keydown", this, false); } 我为什么不能这样做？ 还有其他（好的）方法吗？ 奖金信息；这仅在Safari中有效，因此缺少IE支持。
13
您如何在ReactJS中悬停？-在快速悬停过程中未注册onMouseLeave
进行内联样式设置时，如何在ReactJS中实现悬停事件或活动事件？ 我发现onMouseEnter，onMouseLeave方法存在问题，因此希望有另一种方法可以做到。 具体来说，如果您将鼠标悬停在组件上的速度非常快，则仅会注册onMouseEnter事件。onMouseLeave从不触发，因此无法更新状态...使该组件看起来好像仍在悬停。如果您尝试模仿“：active” css伪类，我会注意到同样的事情。如果单击得非常快，则只会注册onMouseDown事件。onMouseUp事件将被忽略...使组件保持活动状态。 这是显示问题的JSFiddle：https ://jsfiddle.net/y9swecyu/5/ 有问题的JSFiddle视频：https ://vid.me/ZJEO 编码： var Hover = React.createClass({ getInitialState: function() { return { hover: false }; }, onMouseEnterHandler: function() { this.setState({ hover: true }); console.log('enter'); }, onMouseLeaveHandler: function() { this.setState({ hover: false }); console.log('leave'); }, render: function() { var inner = normal; if(this.state.hover) { inner …
5
React onClick-通过事件传递参数
没有参数 function clickMe(e){ //e is the event } <button onClick={this.clickMe}></button> 带参数 function clickMe(parameter){ //how to get the "e" ? } <button onClick={() => this.clickMe(someparameter)}></button> 我想得到event。我怎么才能得到它？
12
如何记录jQuery中某个元素触发的所有事件？
我想查看用户与之交互时由输入字段触发的所有事件。包括以下内容： 点击它。 单击它。 跳入它。 远离它。 Ctrl+ C和Ctrl+V键盘上的。 右键单击->粘贴。 右键单击->剪切。 右键单击->复制。 从另一个应用程序中拖放文本。 用Javascript修改它。 使用调试工具（如Firebug）对其进行修改。 我想使用显示它console.log。这在Javascript / jQuery中是可能的，如果可以，我该怎么做？
11
如何跨浏览器标准化CSS3 Transition功能？
Webkit的过渡结束事件称为webkitTransitionEnd，Firefox为transitionEnd，歌剧为oTransitionEnd。用纯JS解决所有问题的好方法是什么？我应该浏览器嗅探吗？还是分别实施？我还没有发生过其他事情？ 即： //doing browser sniffing var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd"; element.addEventListener(transitionend, function(){ //do whatever },false); 要么 // Assigning an event listener per browser element.addEventListener("webkitTransitionEnd", fn); element.addEventListener("oTransitionEnd", fn); element.addEventListener("transitionEnd", fn); function fn() { //do whatever }
12
html <input type =“ text” /> onchange事件不起作用
我正在尝试做一些实验。我想发生的是，每当用户在文本框中键入内容时，它将显示在对话框中。我使用onchange事件属性来实现它，但是它不起作用。我仍然需要按“提交”按钮才能使其正常工作。我阅读了有关AJAX的文章，并正在考虑了解这一点。我是否仍需要AJAX使其起作用，或者简单的JavaScript够用吗？请帮忙。 index.php &lt;script type="text/javascript" src="javascript.js"&gt; &lt;/script&gt; &lt;form action="index.php" method="get"&gt; Integer 1: &lt;input type="text" id="num1" name="num1" onchange="checkInput('num1');" /&gt; &lt;br /&gt; Integer 2: &lt;input type="text" id="num2" name="num2" onchange="checkInput('num2');" /&gt; &lt;br /&gt; &lt;input type="submit" value="Compute" /&gt; &lt;/form&gt; javascript.js function checkInput(textbox) { var textInput = document.getElementById(textbox).value; alert(textInput); }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.