事件处理：五星评价的例子

最新推荐文章于 2021-02-27 02:48:16 发布

mr_zhangs

最新推荐文章于 2021-02-27 02:48:16 发布

阅读量603

点赞数

分类专栏： javaweb 前端文章标签： javaweb

本文链接：https://blog.csdn.net/mr_zhangs/article/details/77202214

版权

javaweb 前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

事件处理
事件的分类
1）键盘事件–keydown(用户按下一个键时候),keypress(用户按键的时候),keyup(按键弹起来的时候)
2）鼠标事件–click(单击),dbclick(双击)
,mousedown(鼠标按下),mouseup(鼠标弹起来)
，mouseover(鼠标滑过)
3）加载卸载load , unload
//页面加载完毕才会执行
window.οnlοad=function(){
}
事件的处理
1）事件源：事件的发生的对象
在方法中可以通过event事件对象获取事件源。
alert(“test”);
//event.srcElement只支持IE和Chrome
//var obj = event.srcElement;

                        **火狐不能直接调用event，需要通过函数参数传递事件对象.**
                        var event = arguments[0]||window.event;
                        var obj=event.target;
                        alert(obj.value);

简单例子：淘宝五星好评
素材：一张点亮的星星图片，一张熄灭的星星图片

<script>
        window.onload=function(){
            var imgDoms=document.getElementsByTagName("img");
            for(var i=0;i<=imgDoms.length;i++){
                imgDoms[i].setAttribute("score",i+1);//给予每个星星   对应的分数
                imgDoms[i].onclick=function(){
                    //获取单击的对象
                    var event = arguments[0]||window.event;
                    var obj=event.target;
                    alert(obj.getAttribute("score"));

                    //单击点亮星星
                    for(var j=0;j<obj.getAttribute("score");j++){
                        imgDoms[j].src="image/star_on.jpg";
                    }

                    //单击熄灭星星
                    for(var j=obj.getAttribute("score");j<imgDoms.length;j++){
                        imgDoms[j].src="image/star_off.jpg";
                    }

                    //单击显示分数
                    document.getElementById("score").innerHTML="<font color='red'>"+obj.getAttribute("score")+"</font>";
                }
            }
        }
    </script>


</head>
<body>
    <img src="image/star_off.jpg" />
    <img src="image/star_off.jpg" />
    <img src="image/star_off.jpg" />
    <img src="image/star_off.jpg" />
    <img src="image/star_off.jpg" />
    总分：<span id="score"></span>
</body>