`
frankel
  • 浏览: 13652 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

submit eventListener和submit method的区别

阅读更多
这个问题曾经让我头痛了一段时间,今天看到greasemonkey的文档,把这个问题说的很清楚,而且给了解决方法,留在这里做个备份

Example: Do something before a form is submitted
function newsubmit(event) {
    var target = event ? event.target : this;
    // do anything you like here
    alert('Submitting form to ' + target.action);
    // call real submit function
    this._submit();
}
// capture the onsubmit event on all forms
window.addEventListener('submit', newsubmit, true);
// If a script calls someForm.submit(), the onsubmit event does not fire,
// so we need to redefine the submit method of the HTMLFormElement class.
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = newsubmit;
There are two things going on here. First, I am adding an event listener that traps submit events. A submit event
occurs when the user clicks a Submit button on a form. However, if another script manually calls the submit()
method of a form, the submit event does not fire. So, the second thing I do is override the submit method of the
HTMLFormElement class.
But wait, there's more. Both the event listener and the method override point to the same function, newsubmit. If
newsubmit gets called via a submit event, the event argument will be populated with an event object that
contains information about the event (for example, event.target will be the form being submitted). However, if a
script manually calls the submit method, the event argument will be missing, but the global variable this will
point to the form. Therefore, in my newsubmit function, I test whether event is null, and if so, get the target form
from this instead.
Tip:
A submit event fires when a user submits a form in the usual way, i.e. by clicking the form's Submit
button or hittingENTER within a form. However, the submit event does not fire when the form is
submitted via a script calling aForm.submit(). Therefore you need to do two things to capture a
form submission: add an event listener to capture to submit event, and modify the prototype of the
HTMLFormElement class to redirect the submit() method to your custom function.
分享到:
评论

相关推荐

    Event Listener Error(解决方案).md

    Event Listener Error(解决方案).md

    EventListener,eventlistener是一个小型库,用于类之间的通信,如广播信号.zip

    EventListener 提供了一种简单且灵活的方式来订阅和发布事件,使得代码模块之间能够保持松散耦合,增强系统的可维护性和可扩展性。 开源项目的特点使得EventListener具有透明度和社区支持的优势。开源意味着源代码...

    IE8-EventListener:IE8的Polyfill

    IE8-EventListener ...只要使用window['ie8-eventlistener/storage'].setItem而不是window.localStorage.setItem localStorage存储事件将在IE8中正确显示key , newValue和oldValue属性设置。 当前不支持存

    event_listener.7z

    以下是关于事件监听和`event_listener.jsx`脚本的详细解释: 事件监听是编程中的一个重要概念,它允许程序在特定事件发生时执行相应的操作。在Photoshop中,事件可以是用户的行为,如打开、保存或关闭文档,也可以...

    C++ EventListener (C# style)-开源

    这是在 c++ 中实现的 EventListener(就像在 c# 中一样)。我正在使用一些 c++11 特性(比如 final),但是如果你愿意,你可以很容易地删除它们。 检查维基页面以查看使用情况。 需要做的:线程安全; 安全处置调用...

    Spring注解驱动开发第40讲——你晓得@EventListener这个注解的原理吗?

    Spring注解驱动开发第40讲——你晓得@EventListener这个注解的原理吗?

    event_listener.jsx

    event_listener.jsx PS事件监听脚本 1、修改脚本监听数据本地化语言显示 ---0.02-01 2、函数增加注释当前历史记录名称 ---0.02-02 https://blog.csdn.net/greless/article/details/105811358

    js HTML DOM EventListener功能与用法实例分析

    本文主要讲述了JavaScript中的HTML DOM EventListener功能与用法,通过实例分析深入探讨了事件监听的相关概念、用法、注意事项以及事件冒泡和捕获的过程。EventListener是JavaScript中用于处理事件的关键接口,它...

    Event Listener-开源

    这种设计使得EventListener适用于那些对体积和性能有严格要求的项目,特别是在嵌入式系统或者资源受限的环境中。 ### 五、使用指南与示例 使用EventListener时,首先需要创建事件类,然后定义对应的监听器接口。...

    supervisor-event-listener:Supervisor事件通知, 支持邮件, Slack, WebHook

    supervisor-event-listener Supervisor事件通知, 支持邮件, Slack, WebHook 简介 Supervisor是*nix环境下的进程管理工具, 可以把前台进程转换为守护进程, 当进程异常退出时自动重启. supervisor-event-listener监听...

    大图片所引起的内存问题

    在这段代码中,通过`LinkedHashMap`和`ConcurrentHashMap`分别存储强引用和软引用的Bitmap,以平衡内存占用和图片可访问性。 2. **内存中图片处理**:在图片加载到内存之前进行压缩或者调整格式,例如使用`...

    PhotoShop(PS)脚本监听器Script event listener.jsx

    新手第一次了解的事件监听一定是 ScriptingListener.8bi插件,如果你对此插件有了基本运用,那么现在了解一款更方便的时间监听脚本 event_listener.jsx。不再像ScriptingListener.8bi插件记录的脚本那样晦涩难懂,...

    Passive Event Listeners - 被动事件监听器1

    被动事件监听器(Passive Event Listeners)是现代Web开发中的一个重要优化策略,尤其是在构建高性能的Web应用程序时。这个概念的引入主要是为了提高页面的滚动性能和响应速度,特别是对于移动设备上的触摸事件。...

    evt-listener:EventListener 作为对象

    off (其中listener是 EventListener 的一个实例)而不必担心保存和传递事件名称和函数。 请参阅下面的比较。 先决条件 使用 npm 安装它,将其保存为依赖项。 npm i evt-listener --save 两个示例共享相同的事件...

    eventlistener-win:使用UIAutomation.h和Qt库创建的Windows事件侦听器

    // to receive the event identified by the listener QVariantMap eventDetected; /* QList with all events to be identified * To know all suported events, see: * ...

    SpringBoot整合Listener的两种方式.docx

    这两种方式都可以有效地在Spring Boot应用中整合Listener,根据项目需求和团队喜好可以选择合适的方式。第一种方式简单直接,适合于大部分场景;第二种方式提供了更灵活的控制,例如可以配置Listener的属性,或者在...

    event-listener:通知异步任务或线程

    事件监听器通知异步任务或线程。...use event_listener :: Event;let flag = Arc :: new (AtomicBool :: new ( false ));let event = Arc :: new (Event :: new ());// Spawn a thread that will se

    JavaScript HTML DOM EventListener

    JavaScript HTML DOM EventListener addEventListener() 方法 实例 在用户点击按钮时触发监听事件: document.getElementById(myBtn).addEventListener(click, displayDate); addEventListener() 方法用于向...

    addeventlistener监听scroll跟touch(实例讲解)

    但需要注意的是,这样做意味着你无法通过`event.preventDefault()`来阻止页面滚动,因此在需要控制滚动行为的场景下,应谨慎使用。 总结一下,`addEventListener`在监听`scroll`和`touch`事件时,提供了丰富的配置...

Global site tag (gtag.js) - Google Analytics