JavaScript学习第十八天

最新推荐文章于 2024-07-17 09:44:02 发布

P_Gang

最新推荐文章于 2024-07-17 09:44:02 发布

阅读量405

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/P_Gang/article/details/124598273

版权

事件冒泡


html代码

    <div class="box1">box1
        <div class="box2">box2
            <div class="box3">box3
                <div class="box4">box4</div>
            </div>
        </div>
    </div>
    
css代码
    
    *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 400px;
            height: 400px;
            background: red;
        }
        .box2{
            width: 300px;
            height: 300px;
            background: yellow;
        }
        .box3{
            width: 200px;
            height: 200px;
            background: blue;
        }
        .box4{
            width: 100px;
            height: 100px;
            background: green;
        }
        div{
            color: #fff;
            font-size: 25px;
        }
    
JS代码
    
     获取元素
    var oBox1=document.getElementsByClassName("box1")[0];
    var oBox2=document.getElementsByClassName("box2")[0];
    var oBox3=document.getElementsByClassName("box3")[0];
    var oBox4=document.getElementsByClassName("box4")[0];


    // bubbles  返回布尔值，指示事件是否是冒泡事件类型。 默认true
     //cancelBubble  返回布尔值，指示事件是否取消了冒泡事件。 默认false

     //阻止事件冒泡  


    oBox1.onclick=function(ev){
        ev=ev||window.event;
        alert("box1");
         if(ev.stopPropagation){
             ev.stopPropagation()
         }else{
             // 除IE外的主流浏览器
             ev.cancelBubble=true;
         }
    }
    oBox2.onclick=function(ev){
        ev=ev||window.event;
        alert("box2");
         if(ev.stopPropagation){
             ev.stopPropagation()
         }else{
             // 除IE外的主流浏览器
             ev.cancelBubble=true;
         }
    }
    oBox3.onclick=function(ev){
        ev=ev||window.event;
        alert("box3");
         if(ev.stopPropagation){
             ev.stopPropagation()
         }else{
             // 除IE外的主流浏览器
             ev.cancelBubble=true;
         }
    }
    oBox4.onclick=function(ev){
        ev=ev||window.event;
        // 针对IE浏览器
         if(ev.stopPropagation){
             ev.stopPropagation()
         }else{
             // 除IE外的主流浏览器
             ev.cancelBubble=true;
         }
        alert("box4");
        console.log(ev)
    }

事件监听

**事件绑定只会显示最后一个元素，前面的会被覆盖
  事件监听会显示所有元素**
 html代码
     <div class="box1">box1</div>
    
 css代码
     
     * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 400px;
            height: 400px;
            background: red;
        }

JS代码
    
    // 获取元素
    var oBox1 = document.getElementsByClassName("box1")[0];
    
    // 事件绑定
     oBox1.onclick=function(){
         console.log("点击事件01")
     }
     oBox1.onclick=function(){
         console.log("点击事件02")
     }
     oBox1.onclick=function(){
         console.log("点击事件03")
     }
     oBox1.onclick=function(){
         console.log("点击事件04")
     }

    // 事件监听
    oBox1.addEventListener("click",function(ev){
        // console.log(ev);
        console.log("添加了监听事件01")
    },false)
    oBox1.addEventListener("click",function(ev){
        // console.log(ev);
        console.log("添加了监听事件02")
    },false)
    oBox1.addEventListener("click",function(ev){
        // console.log(ev);
        console.log("添加了监听事件03")
    },false)
    oBox1.addEventListener("click",function(ev){
        // console.log(ev);
        console.log("添加了监听事件04")
    },false)

事件捕获

html代码
    
     <div class="box1">box1
        <div class="box2">box2
            <div class="box3">box3
                <div class="box4">box4</div>
            </div>
        </div>
    </div>
    
css代码
    
    *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 400px;
            height: 400px;
            background: red;
        }
        .box2{
            width: 300px;
            height: 300px;
            background: yellow;
        }
        .box3{
            width: 200px;
            height: 200px;
            background: blue;
        }
        .box4{
            width: 100px;
            height: 100px;
            background: green;
        }
        div{
            color: #fff;
            font-size: 25px;
        }

JS代码
    
    // 获取元素
    var oBox1=document.getElementsByClassName("box1")[0];
    var oBox2=document.getElementsByClassName("box2")[0];
    var oBox3=document.getElementsByClassName("box3")[0];
    var oBox4=document.getElementsByClassName("box4")[0];


    oBox4.addEventListener("click",function(){
        alert("box4")
    },true)
    oBox3.addEventListener("click",function(){
        alert("box3")
    },true)
    oBox2.addEventListener("click",function(){
        alert("box2")
    },true)
    oBox1.addEventListener("click",function(){
        alert("box1")
    },true)

默认事件


html代码

    <h1>默认事件</h1>
		<a href="https://www.baidu.com/">百度一下</a>
		<form action="">
			<button>按钮</button>
			<input type="submit" >
			<input type="image" src="../../CSS/作业/css3二次作业/04.png">
		</form>
    
JS代码

    // 获取元素
    var oAnchor=document.getElementsByTagName("a")[0]
	var oBtn=document.getElementsByTagName("button")[0];
	var oInp=document.getElementsByTagName("input")[0];
	var oImage=document.getElementsByTagName("input")[1];
	var oHeader=document.getElementsByTagName("h1")[0];

    // cancelable  返回布尔值，指示事件是否拥有可取消的默认动作。
    // defaultPrevented  返回布尔值，表明当前事件是否调用了 event.preventDefault()方法。

    // 默认事件：元素本身自带的事件
    oAnchor.onclick=function(ev){
			ev=ev||window.event;
			if(ev.preventDefault){
				ev.preventDefault()
			}else{
				return false
				// ev.returnValue=true;
			}
			console.log(ev)
		}
		
		oBtn.onclick=function(ev){
			ev=ev||window.event;
			if(ev.preventDefault){
				ev.preventDefault()
			}else{
				return false
				// ev.returnValue=true;
			}
			console.log(ev)
		}
		
		oInp.onclick=function(ev){
			ev=ev||window.event;
			if(ev.preventDefault){
				ev.preventDefault()
			}else{
				return false
				// ev.returnValue=true;
			}
			console.log(ev)
		}
		
		oImage.onclick=function(ev){
			ev=ev||window.event;
			if(ev.preventDefault){
				ev.preventDefault()
			}else{
				return false
				// ev.returnValue=true;
			}
			console.log(ev)
		}
		
		oHeader.onclick=function(ev){
			ev=ev||window.event;
			
			console.log(ev)
		}

委托事件


html代码

    <h1>05事件委托</h1>
    <div id="box">
        <button class="btn">按钮1</button>
        <button class="btn">按钮2</button>
        <button class="btn">按钮3</button>
    </div>
    <button id="add">添加</button>

css代码
  
    #box{
            background: yellow;
        }
        
JS代码

    // 05获取元素
    var aBtn=document.getElementsByClassName("btn");
    var oAdd=document.getElementById("add");
    var oBox=document.getElementById("box");

    // target  返回触发此事件的元素(事件的目标节点)

    // for(var i=0;i<aBtn.length;i++){
    //     aBtn[i].onclick=function(ev){
    //         ev=ev||window.event;
    //         console.log(ev)
    //         console.log(this.innerText)
    //     }
    // }

    var index=4;
    // 向box中 添加按钮
    oAdd.onclick=function(){
        var newBtn=document.createElement("BUTTON");
        newBtn.innerText="按钮"+index;
        newBtn.className="btn";
        oBox.appendChild(newBtn);
        index++;
    }

    // oBox.onclick=function(ev){
    //         ev=ev||window.event;
    //         console.log(ev.target)
    //         console.log(this.innerText)
    // }

    oBox.addEventListener("click",function(ev){
        if(ev.target&&ev.target.nodeName=="BUTTON"){
            console.log(ev.target.innerText)
        }
    })

P_Gang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习第十八天

事件冒泡html代码 <div class="box1">box1 <div class="box2">box2 <div class="box3">box3 <div class="box4">box4</div> </div> </div> </div> css代
复制链接

扫一扫