Re: Proposal for "Cascading Attribute Sheets" - like CSS, but for attributes!

On Tue, Aug 21, 2012 at 3:15 PM, Brian Kardell <bkardell@gmail.com> wrote:
> On Aug 21, 2012 5:40 PM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
>> On Tue, Aug 21, 2012 at 2:28 PM, Ojan Vafai <ojan@chromium.org> wrote:
>>> On a somewhat unrelated note, could we somehow also incorporate jquery
>>> style
>>> live event handlers here? See previous www-dom discussion about this: .
>>> I
>>> suppose we'd still just want listen/unlisten(selector, handler) methods,
>>> but
>>> they'd get applied at the same time as cascaded attributes. Although, we
>>> might want to apply those on attribute changes as well.
>>
>> Using CAS to apply an "onfoo" attribute is nearly the same (use a
>> string value to pass the function, obviously).  It'll only allow a
>> single listener to be applied, though.
>>
>> If it's considered worthwhile, we can magic up this case a bit.  CAS
>> properties don't accept functions normally (or rather, as I have it
>> defined in the OP, it would just accept a FUNCTION token, which is
>> just the function name and opening paren, but I should tighten up that
>> definition).  We could have a magic function like listen(<string>)
>> that, when used on an onfoo attribute (more generally, on a
>> host-language-defined "event listener" attribute) does an
>> addEventListener() call rather than a setAttribute() call.
>
> Can you give some pseudo code or something that is relatively close to what
> you mean here?  I'm not entirely sure I follow.

Sure!

So, in my current proposal, you can just set an onfoo attribute:

ul.special > li {
  onclick: "alert('You clicked me!'); evt.target.classlist.add('clicked');";
}

Here's a suggestion for a similar API that would invoke
addEventListener instead of setAttribute:

ul.special > li {
  onclick: listen("alert('You clicked me!');
evt.target.classlist.add('clicked');");
}

~TJ

Received on Tuesday, 21 August 2012 22:18:44 UTC