右键Html元素菜单上的“Force element state”这个操作,就是强制设置该元素的状态。状态分为四种,分别是active/hover/focus/visited。强制设置状态在某些情况下比较的有用,例如你想查看某些hover伪类的样式,又例如元素里有隐藏的元素,需要在鼠标hover的时候才出现,但你的鼠标移开的时候hover状态就消失了,强制显示hover状态比较方便你检查元素hover的情况。
<div onclick="eventHandle(event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//本例子只在外面盒子定义了处理方法,而这个方法一样可以捕获到子元素点击行为并处理它。假设有成千上万子元素要处理,难道我们要为每个元素加“onclick="eventHandle(event)"”?显然没有这种集中处理的方法来的简单,同时它的性能也是更高的。
function eventHandle(e)
{
var e=e||window.event;
var obj=e.target||e.srcElement;
alert(obj.id+' was click')
}
</script>
让不同的对象同时捕获同一事件,并调用自己的专属处理程序做自己的事情
<div onclick="outSideWork()" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="inSideWork()" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
function outSideWork()
{
alert('My name is outSide,I was working...');
}
function inSideWork()
{
alert('My name is inSide,I was working...');
}
//因为下面程序自动激活单击事件,有些浏览器不允许,所以请单击灰色盒子,从这里开始下命令,这样因为冒泡的原因,黑色大盒子也会收到单击事件,并调用了自己的处理程序。如果还有更多盒子嵌套,一样道理。
</script>