JS操作html元素中的事件
2019-08-01 本文已影响32人
追逐_chase
web.jpeg
事件在日常使用到事件，比如:按钮的点击，鼠标的点击等，那么如何给一个元素绑定事件呢，事件的绑定有几个方式呢?
绑定事件的方式一
-
元素对象.onclick = function(){}，onclick是点击事情，也可以是onchang等事件- 缺点是给一个元素，绑定多个事件时，后一个事件会覆盖掉前一个事件
<style>
div{
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div id="dv"></div>
</body>
<script>
//为元素绑定事件
var dvObjc = document.getElementById("dv");
dvObjc.onclick = function(){
console.log("添加注册事件");
}
dvObjc.onclick = function(){
console.log("111");
}
</script>
绑定事件的方式二
-
对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持` -
对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持 - 支持一个元素 绑定多个事件,事件之间不会冲突
<script>
var dvObjc = document.getElementById("dv");
dvObjc.addEventListener("click",function(){
console.log("添加注册事件1");
},false);
dvObjc.addEventListener("click",function(){
console.log("添加注册事件2");
},false);
dvObjc.addEventListener("click",function(){
console.log("添加注册事件3");
},false);
</script>
上面的事件之间，各自实行，相互之间没有冲突
- 兼容性代码 绑定事件
//为任意的一个元素,绑定任意的一个事件
function addEventListener(element,type,fn) {
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
事件的解绑
-
对象.onclick = null解除绑定的事件 对象.removeEventListener("事件类型",处理事件的函数,false);对象.detachEvent("事件类型",处理事件的函数);
function f1(){
console.log("添加绑定事件1");
}
//解除绑定事件
//如果涉及到事件 解绑，里面的函数是命名函数，这样方便 解绑
//1.
btn.onclick = null;
//2.
btn.removeEventListener("click",f1,false);
//3.
btn.detachEvent("onclick",f1);
- 解除绑定事件
//给任意元素 解绑事件
function removeEvent(element,type,fn){
if(element.removeEventListener){
element.removeEventListener(type,fn,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,fn);
}else{
element["on" + type] = null;
}
}
事件冒泡
- 事件冒泡:多个元素嵌套，有层次关系，这些元素都注册了相同的事件，如果里面的元素的事件触发了，外面的元素的事件自动触发
<body>
<div class="box" id="dv">
<div class="box1" id="dv1">这是一个P标签</div>
</div>
</body>
</html>
<script>
//事件冒泡:多个元素嵌套，有层次关系，这些元素都注册了相同的事件，如果里面的元素的事件触发了，外面的元素的事件自动触发
var pobjc = document.getElementById("dv1");
var dicObjc = document.getElementById("dv");
//点击p事件的时候，div的事件也跟着调用了
pobjc.addEventListener("click",f1,false);
function f1(){
console.log("点击P标签了");
};
dicObjc.addEventListener("click",f2,false);
function f2(){
console.log("点击div了");
}
//阻止事件冒泡
</script>
image.png
注意：每一个事件处理函数中都有一个隐藏的参数
event,这个参数为事件处理参数对象，我们可以通过 这个参数里面的参数来阻止事件冒泡,需要注意的是，window对象中有一个事件参数也可以阻止事件冒泡，但是 火狐不支持
-
window.event.cancelBubble = true;阻止事件冒泡 谷歌 IE支持 火狐不支持 - 通过事件处理函数的参数处理冒泡
e.stopPropagation();谷歌 火狐支持 IE不支持
<script>
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
box1.addEventListener("click",f1,false);
box2.addEventListener("click",f2,false);
box3.addEventListener("click",f3,false);
//每一个事件函数有默认有一个 隐藏的event参数
//事件处理参数对象
//IE8是没有 event参数
function f1(e){
console.log("div111111");
console.log( event);
//阻止事件冒泡 谷歌 IE支持 火狐不支持
window.event.cancelBubble = true;
//谷歌 火狐支持 IE不支持
e.stopPropagation();
}
function f2(e){
console.log("div22222");
//阻止事件冒泡 谷歌 IE支持 火狐不支持
window.event.cancelBubble = true;
//谷歌 火狐支持 IE不支持
e.stopPropagation();
}
function f3(e){
console.log("div33333");
//阻止事件冒泡 谷歌 IE支持 火狐不支持
window.event.cancelBubble = true;
//谷歌 火狐支持 IE不支持
e.stopPropagation();
}
</script>
