JavaScript-事件冒泡&Event和this的区别

    在事件冒泡中 ,this永远指的是当前事件的对象 window.event.srcElement当用在冒泡事件的时候,它永远指的是最初触发此事件的对象
onload = function () {
          
   
            document.getElementById("bodyid").onclick = function () {
          
   
                alert(window.event.srcElement.id);
            };
            document.getElementById("divid").onclick = function () {
          
   
                alert(window.event.srcElement.id);
            };
            document.getElementById("pid").onclick = function () {
          
   
                alert(window.event.srcElement.id);
            };
            document.getElementById("spanid").onclick = function () {
          
   
                //如何阻止冒泡事件的进行
                window.event.cancelBubble = true;//不再进行触发其父级事件        
            };
//---------------------------JQuery实现阻止事件冒泡和键盘事件----------------------------------------
 //判断用户点击的键盘键
            $(#txtmsg).keydown(function (evt) {
          
   
                alert(evt.which);
                if (evt.shiftKey) {
          
   
                    alert("被触发!");
                }
            });

            //------------------------------------阻滞事件冒泡
            $(#spid).click(function (evt) {
          
   
                alert("成功span");
                //阻止事件冒泡(调用事件对象的stopPropagation函数)
                //evt.stopPropagation();
                //在DOM中
                //window.event.cancelBubble = true;
              
                //获取原生Event事件对象
                //evt.originalEvent;(JQ中evt只是对事件对象进行常用的事件方法的封装
                //,其中没有的就需要获取原生事件对象相当于window.event)等价于window.Event对象
            });
            $(#pid).click(function () {
          
   
                alert("成功p");
               
            });
            $(#div2).click(function (evt) {
          
   
                alert("成功div");
                //evt.originalEvent获取原生事件对象相当于window.event     --.srcElement
                alert(evt.originalEvent.srcElement.id);//最初触发事件的对象deID
                //window.event.srcElemen.id 
            });



//----------补充扩展:
 document.getElementById("divid").onmousedown = function () {
          
   
                alert(window.event.button);//输出用户鼠标的点击  0左 1中 2右
                //获取用户点击的鼠标
            };
经验分享 程序员 微信小程序 职场和发展