JS 事件绑定

绑定事件

  1. HTML元素事件属性 onclik="func();alert()"
  2. 元素对象的事件属性(匿名函数)
  3. addEventListener attachEvent 方法

第一种事件绑定的方式

<div onclick="alert('gogogogo');alert('你干啥??');alert('没事儿啊!');alert('没事儿你点我干嘛???')"></div>

第二种方式

<div id="second">0</div>
<script type="text/javascript">
var second = document.getElementById('second');
second.onclick = function(){      //onclick  on 有when的意思 当....时候  click单击
    // alert('这是第二种绑定方式');
    second.style.background = 'rgb('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+')';
    //修改文本
    second.innerHTML = Number(second.innerHTML) + 1;
}

//如果使用第二种方式给元素绑定多个同类型事件, 最后的一个将生效!!!
second.onclick = function() {
    alert('这是一个测试...!!');
}

function rand(m,n) {
    return Math.ceil(Math.random()*(n-m+1))+m-1;
}
</script>

第三种方式 event 事件 listen监听

<div id="third"></div>
<script type="text/javascript">
var third = document.getElementById('third');
//add 添加 event事件  listen监听
third.addEventListener('click', function() {
    alert('我是第三种方式哦!!!!');
});//这里不需要加on

//第三种方式是可以给元素绑定多个同类型事件
third.addEventListener('click', function(){
    alert('我也可以绑定单击事件哦!!!!');
});
</script>