事件执行顺序 alpha

最新推荐文章于 2024-03-11 19:12:02 发布

最新推荐文章于 2024-03-11 19:12:02 发布 · 181 阅读

文章标签：

本文通过一个具体的HTML示例，探讨了JavaScript中不同事件处理机制的执行顺序。实验结果显示，内联的onclick属性最先触发，随后是使用Event.observe注册的监听器。文章深入分析了这些事件如何被触发以及它们之间的交互。

<script type="text/javascript" language="javascript" src="prototype.js"></script>
<div id="div1">
<input type="button" id="btn" name="btn" value="click" />
<a href="http://www.baidu.com" target="_blank" onclick="test2(event)">Google</a>
<input type="button" id="btn1" name="btn1" value="click" onclick="test3(event)" />
<input type="button" id="reg" name="reg" value="register" />
<input type="button" id="unreg" name="unreg" value="unregister" />
</div>
<div id="status"></div>
<script language="javascript">
document.write(Prototype.Version);

function test(evt) {
	alert($("btn") === Event.element(evt));	
	alert(Event.isLeftClick(evt));
	alert(Event.pointerX(evt) + ", " +  Event.pointerY(evt));
}

function test2(evt) {
	alert("clicked");
	//Event.stop(evt);
}

function test3(evt) {
	alert($('div1') === Event.findElement(evt, "div"))
}

Event.observe('btn', 'click', function(){
		alert('clicked');
	}, false
)

Event.observe('reg', 'click', function(){
		$('btn').onclick = function() {
			alert("1: onclick");
		}
		Event.observe('btn', 'click', test, false);
		Event.observe('btn', 'click', function() {
			alert("2");
		}, false);
		$("status").innerHTML = "event registered";
	}, false
)

Event.observe('unreg', 'click', function(){
		Event.stopObserving('btn', 'click', test, false);
		$("status").innerHTML = "event unregistered";
	}, false
)
</script>

可以看出onclick是最先执行的，然后执行的是最后的Event.observe。