对JavaScript事件的理解

 

要做一个工作，需要页面上的控件事件，由自己做的BHO程序来进行响应。想想这么简单的事情，不需要多说什么。几个新来的员工就是死活理解不了，费了好大的劲才让他们稍有理解，让他们按照要求、规范编写程序就可以了。

 

其实页面上的一个按钮、一个输入框，也就是一个窗口（如果按照C++界面编程来讲），也是会发出消息、会相应消息的。

 

按照Windows的消息机制来讲，页面上的一个按钮，是一个窗口，有自己的消息循环、消息处理，如果自己没有处理，应该会把消息传递给父窗口，直到最顶层的窗口。

 

按照上述的描述，应该这么理解：

 

点击了页面上的一个按钮，这个按钮会发出Click的消息

 

如果是这个窗口自己进行的处理，就是在页面上<input type="button"  ... > 中, 设置了onClick事件处理，这个应该在浏览器加载页面的时候，分析html代码，自动的把onClick代码挂到这个button的窗口消息处理循环上；

 

如果在<input /> 中没有设置，这个click消息应该是向父窗口进行传递，这个使用应该是document（或者是windows）窗口，也可以在这个里面进行处理

 

如果在document中也没有处理，则应该是加载这个页面的浏览器窗口进行处理，在写C++程序自己截获浏览器消息的时候，就可以扩充Browser窗口的消息处理，这个机制应该就和BHO一样的了。

 

-------------------------------------------------------------

 

还有：在页面上的一个按钮，如果类似点击行为发生后，对于这个按钮，或者说对于Windows的窗口来讲，只是发出了一个Message，这个Message进入到Windows的消息循环队列中。

 

至于这个Message是有哪段代码进行处理，这群家伙理解不了，都在想页面里没有写onClick，怎么会处理这个消息，这个按钮的onClick怎么会由BHO程序进行处理。为了解释这一点费了好大的力气。讲了几次算了，不再做过多的解释了，让他们按照要求做就可以了。

 

 

-----------------------------------------------------------------

其他的一些参考资料：

 

Javascript事件处理代码的三种写法

 

 

1.作为HTML属性值的事件处理程序

 

 HTML代码

<input name="btn" type="button" id="btn" value="按钮" onclick="alert('mzwu.com');" />

 

2.作为JavaScript属性的事件处理程序

 

 HTML代码

<input name="btn" type="button" id="btn" value="按钮"  />

<script language="javascript">

document.getElementById("btn").onclick = function(){alert("mzwu.com");}

</script>

 

说明：可能受第一种方法的误导，你会觉得应该写成：document.getElementById("btn").onclick() = "alert('mzwu.com');"，这样写是错误的！其实第一种方法隐式的创建了一个函数，使用下边代码可以说明这一点，因为它检测出HTML属性值其实是一个函数：

 

 HTML代码

<input name="btn" type="button" id="btn" value="按钮" onclick="alert(typeof(this.onclick));" />

 

上边是用直接量来创建函数，改成用function()语句的写法：

 

 HTML代码

<input name="btn" type="button" id="btn" value="按钮"  />

<script language="javascript">

function e()

{

 alert("mzwu.com");

}

document.getElementById("btn").onclick = e;

</script>

 

由此我们可引申出第三种方法。 网页教学网

 

3.第三种方法

 

 HTML代码

<input name="btn" type="button" id="btn" value="按钮"  />

<script language="javascript">

function document.all.btn.onclick()

{

 alert("mzwu.com");

}

</script>

 

说明：诸如此类的方法还有function document.onclick(){}，但这种方法在IE、FF中测试只有IE下可行，再改成function document.getElementById("btn").onclick(){}在IE、FF下都不行了，提示缺少标识符，其实这也不难解释，因为JavaScript标识符中本来就不允许出现点号，用document.getElementById("btn").onclick做标识符显然是错误的，但document.all.btn.onclick却又可以实在有点让人费解。

 

 

------------------------------------------------------------------------------

javascript事件处理机制——容易被我们遗忘的细节问题

 讲述了IE和Netscape之间的一些区别，以及各种事件模型

 

 

JavaScript 事件处理