JS事件触发的两种方式

1.方式一

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div onclick="foo(this)">xxxxx</div>
<div onclick="foo(this)">zzzzz</div>
<div onclick="foo(this)">yyyyy</div>

<script type="text/javascript">

function foo(self){
    console.log(self);
}

</script>

</body>
</html>

2.方式二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div onclick="alert(567)"></div>

<p id="p1">PPP</p>
<p class="item1">PPP</p>
<p class="item2">PPP</p>
<p class="item3">PPP</p>
<p class="item4">PPP</p>
<script>
    var eles_p=document.getElementsByTagName("p");
    for (var i=0;i<eles_p.length;i++){
        eles_p[i].onclick=function () {
            console.log(this);
            this.style.color="red";//注意：循环绑定多个对象，只能使用this来确定当前点击的对象
        }
    }

</script>
</body>
</html>

 

 

posted @ 2017-08-10 10:09  看雪。  阅读(423)  评论(0)    收藏  举报