<div id='box1' onclick='alert('Hello,小潘')'></div>
<div id='box1' onclick='Hello()'></div>
<script>
function Hello () {
alert('Hello,小潘');
}
</script>
这种方式也是早期的写法,但好处是可以讲js和html完全分离,前提是需要给html元素提供一个额外的id属性(或其它能获取该元素对象的方式)
<div id='box1' ></div>
<script>
var box1 = document.getElementById('box1');
box1.onclick = function () {
alert('Hello,小潘')
}
</script>
box1.onclick = function () {
alert('Hello,小潘!')
}
则前面的事件会被后一个事件覆盖
如果想要清除该事件,则加以下代码即可
box1.onclick = null;
这是目前最流行的事件处理程序,各大主流浏览器全部支持
<div id='box1' ></div>
<script>
//添加事件监听器
//元素节点.addEventListener('事件名', 响应事件的函数, 布尔值)
//事件名 click mouseover mouseout
//函数名或者匿名函数
//事件流 false
var box1 = document.getElementById('box1');
box1.addEventListener('click', function() {
alert('Hello,小潘');
}, false)
</script>
即使后面再加同样的事件监听器也不会将前面的覆盖
清除事件
<div id='box1' ></div>
<script>
//添加事件监听器
//元素节点.addEventListener('事件名', 响应事件的函数, 布尔值)
//事件名 click mouseover mouseout
//函数名或者匿名函数
//事件流 false
var box1 = document.getElementById('box1');
function Hello () {
alert('Hello,小潘');
}
box1.addEventListener('click',Hello, false);
//移除事件
//注意:
//1. 参数与添加事件时相同
//2. 添加事件时第二个参数不能是匿名函数
box1.removeEventListener('click',Hello, false)
</script>
联系客服