一、添加事件监听
- addEventListener('放入事件名称（不用加on）’，fn，true/false)
- 能做到事件叠加，不会覆盖之前的事件
- 一般情况下不要加第三个参数，有兼容问题
- true代表是事件捕获情况下执行，false代表是事件冒泡情况下执行
<body>
<input type="button" name="" id="ipt" value="add">
</body>
<script type="text/javascript">
ipt.addEventListener('click',function(){
alert(1);
})
ipt.addEventListener('click',function(){
alert(2);
})
</script>
二、移除事件监听
- removeEventListener('放入事件名称（不用加on）’，函数名称)
- 精准解除
function a(){
alert(1);
ipt.removeEventListener('click',a);
}
function b(){
alert(2);
}
ipt.addEventListener('click',a);
ipt.addEventListener('click',b);
三、键盘事件
- onkeydown/onkeyup
//input中只能输入数字
ipt.onkeydown=function(){
if (event.keyCode>=48&&event.keyCode<=57) {
}
else{
return false;
}
}
var l=0;
var timer=null;
document.onkeydown=function(){
if(event.key=='d'){
clearInterval(timer);
timer=setInterval(function(){
l++;
div.style.left=l+'px';
},30)
}
}
document.onkeyup=function(){
clearInterval(timer);
}
四、事件委托/代理/委派
- 事件委托/事件代理就是给予父级元素事件，父级元素可以找到子级元素事件源，通过判断事件源的classname、nodename、id找到咱们需要的事件源，给予js脚本
- 最大的好处：可以控制未来（动态生成）的元素
- event.target是发生事件的元素或触发事件的元素
<script type="text/javascript">
document.documentElement.onclick=function(){
// event.target是发生事件的元素或触发事件的元素
// console.log(event.target);
// console.log(event.target.nodeName);
if(event.target.className=='div'){
event.target.style.background='red';
}else if(event.target.className=='div1'){
event.target.style.background='green';
}
}
for (var i = 0;i<10; i++) {
var oDiv=document.createElement('div');
if (i<5) {
oDiv.className='div';
}else{
oDiv.className='div1';
}
document.body.appendChild(oDiv);
}
/* .div{
width: 200px;
height: 200px;
background: black;
float: left;
margin: 100px;
}
.div1{
width: 250px;
height: 250px;
background: black;
float: left;
margin: 100px;
} */
- 兼容问题： event.target在谷歌和火狐中是没有问题的
建议：
var iTarget=event.target||event.srcElement;
扫一扫
226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
