<div class="gmail_quote">On Tue, Jul 27, 2010 at 10:37 AM, Darin Adler <span dir="ltr"><<a href="mailto:darin@apple.com" target="_blank">darin@apple.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div style="word-wrap:break-word"><div><div><blockquote type="cite"><div class="gmail_quote"><blockquote class="gmail_quote" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0.8ex;border-left-width:1px;border-left-color:rgb(204, 204, 204);border-left-style:solid;padding-left:1ex">
<div>This sequence doesn’t sound too terrible to me. But I don’t fully understand the proposal. At the time the focusin event fires we won’t yet know what item is getting focus?</div></blockquote><div><br></div><div>I think we do know this and it wouldn't be too hard to implement. It's just a question of what we think the best behavior is. Specifically, in Document::setFocusedNode, we know both the new focused node and the old focused node when firing these events.</div>
</div></blockquote><div>The “we” I meant is the JavaScript code on the webpage.</div></div></div></div></blockquote><div><br></div><div>I see. I hadn't thought about this part. As per the current state of the DOM 3 spec for the target/relatedTarget event object:</div>
<div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background-color: transparent; font-family: Times; font-size: medium; "><table style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-collapse: collapse; ">
<tbody><tr style="height: 0px; "><td style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: rgb(170, 170, 170); border-right-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); border-left-color: rgb(170, 170, 170); vertical-align: top; padding-top: 7px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; ">
<span style="font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; "></span></td><td style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: rgb(170, 170, 170); border-right-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); border-left-color: rgb(170, 170, 170); vertical-align: top; padding-top: 7px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; ">
<span style="font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; "><span class="Apple-style-span" style="font-size: small;">target</span></span></td>
<td style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: rgb(170, 170, 170); border-right-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); border-left-color: rgb(170, 170, 170); vertical-align: top; padding-top: 7px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; ">
<span style="font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; "><span class="Apple-style-span" style="font-size: small;">relatedTarget</span></span></td>
</tr><tr style="height: 0px; "><td style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: rgb(170, 170, 170); border-right-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); border-left-color: rgb(170, 170, 170); vertical-align: top; padding-top: 7px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; ">
<span style="font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; "><span class="Apple-style-span" style="font-size: small;">blur/DOMFocusOut</span></span></td>
<td style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: rgb(170, 170, 170); border-right-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); border-left-color: rgb(170, 170, 170); vertical-align: top; padding-top: 7px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; ">
<span style="font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; "><span class="Apple-style-span" style="font-size: small;">element losing focus</span></span></td>
<td style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: rgb(170, 170, 170); border-right-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); border-left-color: rgb(170, 170, 170); vertical-align: top; padding-top: 7px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; ">
<span style="font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; "><span class="Apple-style-span" style="font-size: small;">element losing focus</span></span></td>
</tr><tr style="height: 0px; "><td style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: rgb(170, 170, 170); border-right-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); border-left-color: rgb(170, 170, 170); vertical-align: top; padding-top: 7px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; ">
<span style="font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; "><span class="Apple-style-span" style="font-size: small;">focus/DOMFocusIn</span></span></td>
<td style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: rgb(170, 170, 170); border-right-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); border-left-color: rgb(170, 170, 170); vertical-align: top; padding-top: 7px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; ">
<span style="font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; "><span class="Apple-style-span" style="font-size: small;">element receiving focus</span></span></td>
<td style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: rgb(170, 170, 170); border-right-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); border-left-color: rgb(170, 170, 170); vertical-align: top; padding-top: 7px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; ">
<span style="font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; "><span class="Apple-style-span" style="font-size: small;">element receiving focus</span></span></td>
</tr><tr style="height: 0px; "><td style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: rgb(170, 170, 170); border-right-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); border-left-color: rgb(170, 170, 170); vertical-align: top; padding-top: 7px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; ">
<span style="font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; "><span class="Apple-style-span" style="font-size: small;">focusin</span></span></td>
<td style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: rgb(170, 170, 170); border-right-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); border-left-color: rgb(170, 170, 170); vertical-align: top; padding-top: 7px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; ">
<span style="font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; "><span class="Apple-style-span" style="font-size: small;">element receiving focus</span></span></td>
<td style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: rgb(170, 170, 170); border-right-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); border-left-color: rgb(170, 170, 170); vertical-align: top; padding-top: 7px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; ">
<span style="font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; "><span class="Apple-style-span" style="font-size: small;">element losing focus</span></span></td>
</tr><tr style="height: 0px; "><td style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: rgb(170, 170, 170); border-right-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); border-left-color: rgb(170, 170, 170); vertical-align: top; padding-top: 7px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; ">
<span style="font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; "><span class="Apple-style-span" style="font-size: small;">focusout</span></span></td>
<td style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: rgb(170, 170, 170); border-right-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); border-left-color: rgb(170, 170, 170); vertical-align: top; padding-top: 7px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; ">
<span style="font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; "><span class="Apple-style-span" style="font-size: small;">element losing focus</span></span></td>
<td style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: rgb(170, 170, 170); border-right-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); border-left-color: rgb(170, 170, 170); vertical-align: top; padding-top: 7px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; ">
<span style="font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; "><span class="Apple-style-span" style="font-size: small;">element receiving focus</span></span></td>
</tr></tbody></table> </div></div>The spec looks reasonable to me and I think we could implement it without worry about web compatibility since we would only be modifying the focusin/focusout events, which we just added recently. The only thing I'd like to change in the spec is that focusin/focusout are not cancelable, but that's a whole separate issue and something that should be addressed on www-dom first.</div>
<div class="gmail_quote"><br></div><div class="gmail_quote">Anyone object to that? Specifically, the proposal is to change our event order to match the spec: <a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#events-focusevent-event-order">http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#events-focusevent-event-order</a> and to change the focusin/focusout events to have target/relatedTarget values as above.</div>
<div class="gmail_quote"><br></div><div class="gmail_quote">Ojan</div>