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 (optional, defaults to "click")

register handler for this type of event

-CSSclass (optional, defaults to "acs-listen")

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 (optional, boolean, defaults to "false")

indicating whether event will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree.

-preventdefault (optional, boolean, defaults to "true")

this option can the used prevent default click handling

-script (required)

Author:

Gustaf Neumann

Partial Call Graph (max 5 caller/called nodes):

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