template::add_event_listener (public)

 template::add_event_listener [ -event event ] [ -CSSclass CSSclass ] \
    [ -id id ] [ -formfield formfield ] [ -selector selector ] \
    [ -usecapture ] [ -preventdefault ] -script script

Defined in packages/acs-templating/tcl/head-procs.tcl

Register an event handler for elements. The affected elements can be specified in different ways, which will be checked in the following order of precedence: id, formfield, selector and CSSclass. Normally one needs to provide only one kind of specification.

Switches:
-event
(defaults to "click") (optional)
register handler for this type of event
-CSSclass
(defaults to "acs-listen") (optional)
register handler for this CSS class
-id
(optional)
register handler for this HTML ID
-formfield
(optional)
register handler for this formfield, specified in a list of two elements in the form { form_id field_name }
-selector
(optional)
register handler for elements identified by this CSS selector. When a CSS selector contains double and single quotes, we won't add any of those around the selector automatically. Instead, the user must specify them explicitly, for instance like this: ... -selector {'[name="o\'hara"]'}. If the selector does not contain any single or double quotes, we can let the user omit them, as for the case of a simple tag name selector: ... -selector "li". Quotes can also be omitted if the selector contains only one kind of them, like ... -selector {[data-property='value']} or ... -selector {[data-property="value"]}
-usecapture
(boolean) (defaults to "false") (optional)
indicating whether event will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree.
-preventdefault
(boolean) (defaults to "true") (optional)
this option can the used prevent default click handling
-script
(required)
Author:
Gustaf Neumann

Partial Call Graph (max 5 caller/called nodes):
%3 test_templates_and_scripts templates_and_scripts (test acs-templating) template::add_event_listener template::add_event_listener test_templates_and_scripts->template::add_event_listener template::add_body_script template::add_body_script (public) template::add_event_listener->template::add_body_script Class ::xo::Table::BootstrapTableRenderer::AnchorField Class ::xo::Table::BootstrapTableRenderer::AnchorField (public) Class ::xo::Table::BootstrapTableRenderer::AnchorField->template::add_event_listener Class ::xowf::test_item::Answer_manager Class ::xowf::test_item::Answer_manager (public) Class ::xowf::test_item::Answer_manager->template::add_event_listener Class ::xowiki::formfield::candidate_box_select Class ::xowiki::formfield::candidate_box_select (public) Class ::xowiki::formfield::candidate_box_select->template::add_event_listener Class ::xowiki::formfield::range Class ::xowiki::formfield::range (public) Class ::xowiki::formfield::range->template::add_event_listener Class ::xowiki::includelet::bookmarklet-button Class ::xowiki::includelet::bookmarklet-button (public) Class ::xowiki::includelet::bookmarklet-button->template::add_event_listener

Testcases:
templates_and_scripts
Source code:
    set prevent [expr {$preventdefault_p ? "event.preventDefault();" : ""}]
    if {!$preventdefault_p && [regexp {^\s*([a-zA-Z0-9_]+)[\(]event[\)];\s*} $script . fn]} {
        #
        # In the most simple case, there is no need for a wrapper function.
        #
        set script [subst {e.addEventListener('$event', $fn$usecapture_p);}]
    } else {
        set script [ns_trim -delimiter | [subst {
           | e.addEventListener('$event', function (event) {$prevent$script}, $usecapture_p);
        }]]
    }
    if {[info exists id]} {
        set script [ns_trim -delimiter | [subst {
            | var e = document.getElementById('$id');
            | if (e !== null) {$script}
            |}]]
    } elseif {[info exists formfield]} {
        lassign $formfield id name
        set script [ns_trim -delimiter | [subst {
            | var e = document.getElementById('$id').elements.namedItem('$name');
            | if (e !== null) {$script}
            |}]]
    } elseif {[info exists selector]} {
        #
        # Find if either single or double quotes are absent from the
        # selector and we can use them around it safely.
        #
        foreach q {' \"} {
            if {[string first $q $selector] < 0} {
                set selector ${q}${selector}${q}
                break
            }
        }
        set script [ns_trim -delimiter | [subst {
            | for (e of document.querySelectorAll($selector)) {
            |   $script
            |}}]]
    } else {
        #
        # In case, no "id" is provided, use the "CSSclass"
        #
        set script [ns_trim -delimiter | [subst {
            | for (e of document.getElementsByClassName('$CSSclass')) {
            |   $script
            |}}]]
    }

    template::add_body_script -script $script
XQL Not present:
Generic, PostgreSQL, Oracle
[ hide source ] | [ make this the default ]
Show another procedure: