利用事件冒泡(Event Bubbling )获取鼠标下的元素属性

最新推荐文章于 2021-09-05 21:18:22 发布

最新推荐文章于 2021-09-05 21:18:22 发布 · 140 阅读

文章标签：

#JavaScript #ViewUI

Model 专栏收录该内容

14 篇文章

订阅专栏

本文通过一个HTML页面实例展示了事件冒泡机制的工作原理。页面中包含多种输入元素，利用JavaScript实现了鼠标移动事件监听，当鼠标移动到不同元素上时会显示这些元素的ID、名称及类名，以此来说明事件冒泡如何逐级触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">  
<title>事件冒泡应用实例</title>  
<style type="text/css" >  
    .button {  
        color: blue;  
        width: 120px;  
    }  
</style>  
<script type="text/javascript"  defer="defer">  
    function init(){  
        try {  
            document.onmousemove = update;  
        }  
        catch(e) {  
		alert(e);
        }  
    }  
    function update(e){  
         e = e || window.event;  
         var cameFrom = e.toElement ? e.toElement : e.explicitOriginalTarget; //event source 
	     cameFrom = (cameFrom || (e.srcElement ? e.srcElement : e.fromElement));
        if(typeof cameFrom != 'undefined'  && cameFrom != null) {  
            var theId = cameFrom.getAttribute("id");  
            var theName = cameFrom.getAttribute("name");  
            var theClass = cameFrom.className;  
            document.getElementById("status").innerHTML =   "id=[" +( theId ||  ' ')  +   "] name=[" +( theName ||  ' ')  +  "] class=[" +( theClass ||  ' ') + "]";  
        }else {

	} 
    }  


</script>  
</head>  
<body onload="init();">  
    <input type = "text " size = "20"  name = "test1" /><br/>  
    <input type = "button"  name = "test2" /><br/>  
    <input type = "button" class= "button"  name = "test3" /><br/>  
    <input type = "checkbox" id = "id3" /><br/>  
    <hr color="#fe3300"/>  
    <div id="status" ></div>  
</body>  
</html>