标签:-- callback 代码 允许 布尔值 需要 att rem move
?直接添加到HTML结构中
function show() {
alert(‘hello‘);
}
<body>
<button id="btn" onclick="show()">按钮</button>
</body>
?把一个函数赋值给一个事件处理程序
? ? a. 移除事件:event.onclick = null
? ? b. dom 0级事件只允许绑定一个事件处理函数
<button id="btn">按钮</button>
var btn = document.getElementById(‘btn‘);
btn.onclick = function() {
alert(‘hello‘);
}
btn.onclick = function() {
alert(‘ok‘); //覆盖上面的函数,只会显示"ok"
}
?dom2级事件允许给元素绑定多个事件处理函数
a. 添加事件
addEventListener("事件名",事件处理函数,"布尔值");
?true:事件捕获
?false:事件冒泡
b. 移除事件
removeEventListener("事件名",事件处理函数)
案例1:DOM2级事件
btn.addEventListener(‘click‘, function() {
alert(‘show‘);
// arguments.callee 指向当前函数
btn.removeEventListener(‘click‘, arguments.callee);
});
案例2: 给同一个事件绑定多个处理函数
<button id="btn">按钮</button>
var btn = document.getElementById(‘btn‘);
//function()是匿名函数形式
btn.addEventListener(‘click‘, function() {
alert(‘ok‘);
});
function show() {
alert(‘show‘);
}
//结果"ok","show"--两个事件都会处理,show引用函数名
btn.addEventListener(‘click‘, show);
案例3:一次性事件
<button id="btn">按钮</button>
<script>
var btn = document.querySelector(‘#btn‘);
function show() {
alert(‘show‘);
//当执行一次事件后,移除事件
btn.removeEventListener(‘click‘, show);
}
btn.addEventListener("click",show);
</script>
一次性事件用this和callee方法
<button id="btn">按钮</button>
<script>
var btn = document.querySelector(‘#btn‘);
btn.addEventListener("click",
function() {
alert(‘show‘);
//当执行一次事件后,移除事件
this.removeEventListener(‘click‘, arguments.callee);
}
);
</script>
a. attachEvent("事件名",事件处理函数)
b. detachEvent("事件名",事件处理函数)
事件处理函数兼容处理写法
function addEvent(elm, type, callback) {
if (elm.addEventListener) {
elm.addEventListener(type, callback); //DOM事件
} else if (elm.attachEvent) {
elm.attachEvent(‘on‘ + type, callback);//ie事件,事件需要带on
} else {
elm[on + "type"] = callback; //HTML事件
}
}
window.onload = function() {
var btn = document.getElementById(‘btn‘);
addEvent(btn, ‘click‘, function() {
alert(123);
});
}
html代码:
<body>
<button id="btn">按钮</button>
</body>
标签:-- callback 代码 允许 布尔值 需要 att rem move
原文地址:https://www.cnblogs.com/hjson/p/10291507.html