事件冒泡和捕获

attention：：：所有的标签没有<偶
!DOCTYPE html>
html lang=“en”>
head>
meta charset=“UTF-8”>
meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
title>面向对象 事件冒泡和捕获/title>
/head>
style type=“text/css”>
html,body,ul,li,div,input{
padding: 0;
margin: 0;
}
html,body{
height: 100vh;
}
div{
height: 100px;
width: 100%;
background: aqua;
}
ul{
width: 100%;
height: 30px;
}
li{
width: 100%;
height: 20px;
line-height: 20px;
list-style: none;
text-align: left;
font-size: 18px;
color: rebeccapurple;
background: #999999;
}
img{
vertical-align:top;
padding: 0;
margin: 0;
}
/style>
body>
div>
ul>
li id=“weixin”>点击li删除
/ul>
点击div添加
/div>
/body>
/html>
script type=“text/javascript”>
function DrawRight(){
this.deleteImage=function(name){ //构造函数式函数写法
document.getElementById(“weixin”).removeChild(name);
}
}
DrawRight.prototype={ //继承式函数写法
drawImage:function(){
let img=document.createElement(‘img’);
img.src = “1.png”;
img.style.height=20+“px”; //样式修改
img.style.width=20+“px”;
img.setAttribute(“id”,“hahaha”) //图片增加属性
document.getElementById(“weixin”).appendChild(img);
}
}
var doWhat=new DrawRight(); //new一个对象，对象实例化
window.οnlοad=function(){
document.getElementsByTagName(“div”)[0].οnclick= function() {
doWhat.drawImage(); //调用函数
};
document.getElementById(“weixin”).οnclick=function(e) {
if (e && e.stopPropagation) {
e.stopPropagation(); //非IE浏览器子元素阻止事件冒泡
}
else {
window.event.cancelBubble = true; //IE浏览器下子元素阻止事件冒泡
}
doWhat.deleteImage(this.childNodes[1]); //this指向事件调用者
};
}
/*事件绑定执行顺序
* 无论父元素还是子元素 都要具备自己的事件绑定顺序
* 绑定顺序(在不阻止事件冒泡的基础上)
* 1.执行捕获 window->document->html->body->div->ul->li true为捕获
* 2.执行自身 li
* 3.执行冒泡 li->ul->div->body->html-window false为冒泡
* */

    /*事件执行
    * document.getElementsByTagName("div")[0].addEventListener('click', function() {
        doWhat.drawImage();
        console.log("父元素捕获阶段触发该事件")
    },true);
    * document.getElementById("weixin").addEventListener('click', function() {
        doWhat.deleteImage(this.childNodes[1]);
        console.log("子元素冒泡阶段触发该事件")
    }, useCapture);
    * */

    /*阻止子元素事件冒泡
    * 目的：父元素与子元素分别绑定了各自的事件，子元素会捕获父元素的事件，
    * 但是为了让子元素明确的执行自身的事件，而不是不确定
    * 到底是执行从父元素捕获来的事件还是执行自身的事件，从而设置子元素阻止事件的冒泡，
    * 达到执行自身绑定的明确的事件。
    *
    *讲白了子元素组织事件冒泡，就为了阻止了继承父元素的事件
    * */

    /*this的指向问题
    * 1.没有明确的事件执行者，或者是
    *
    *
    *
    * */

/script>