zoukankan      html  css  js  c++  java
  • 事件对象、事件冒泡、事件捕获

    事件对象:
                        event:描述或者包含事件的更加详细的信息;
                        event:不兼容FF;
                        ev: 兼容IE9+,FF,Chrome,IE8--报undefined;
                        兼容写法:var oEvent=ev||event;
                        clientX:X轴的坐标
                        clientY:Y轴的坐标

    冒泡:
                        子元素的事件可以传递到父元素身上,如果父元素身上有相同事件会触发,否则的话继续冒泡;
                        取消事件冒泡:
                                        oEvent.cancelBubble = true;
                        事件捕获:父元素的事件可以传递到子元素身上(事件下沉);
                                        设置捕获:setCapture();
                                        释放捕获: releaseCapture();
                                
                                window.onload=function(){
                                            var oBox1=document.getElementById("box1");//爷爷
                                            var oBox2=document.getElementById("box2");//父亲
                                            var oBox3=document.getElementById("box3");//儿子
                                            oBox1.onclick=function(){
                                                        alert(1);
                                            }
                                            oBox2.onclick=function(ev){   //冒泡触发的必须是相同事件
                                                        var oEv=ev||event;
                                                        alert(2);
                                                        oEv.cancelBubble=true;
                                            }
                                            oBox3.onclick=function(ev){
                                                        var oEv=ev||event;
                                                        alert(3);
                                                        oEv.cancelBubble=true;
                                            }
                                            
                                        }

    按钮开关及冒泡:
                    window.onload=function(){
                                    var oHd=document.getElementById("hd");//上面的按钮
                                    var oUl=document.getElementById("list");//下面的列表
                                    var aLi=document.getElementsByTagName('li');
                                    var bOK=true; //给一个开关,现在的状态是开启的
                                    oHd.onclick=function(ev){
                                                    var oEv=ev||event;
                                                    oEv.cancelBubble=true;
                                                    if(bOK){oUl.style.display='block';}  //点击第一次显示
                                                    else{oUl.style.display='none';}//再次点击隐藏
                                                    bOK=!bOK;   //点击一次取反            
                                    }
                                    for(var i=0;i<aLi.length;i++){
                                            aLi[i].onclick=function(){
                                                    oHd.innerHTML=this.innerHTML;
                                                    bOK=true;   //让下一次的h3点击,ul显示
                                                    //oUl.style.display='none';//点击冒泡到document上
                                            }
                                    }
                                    document.onclick=function(){
                                                    oHd.innerHTML='请选择';
                                                    oUl.style.display='none';
                                                    bOK=true;//让下一次的h3点击,ul显示
                                    }
                                }

    人生如戏,或实力或演技
  • 相关阅读:
    EditPlus删除空行、空段落的正则表达式
    composer 2 install 或 update时报错解决
    001-接入腾讯云物联网通信
    004-STM32+ESP8266+AIR202基本控制篇-功能测试-Android扫码绑定Air202(GPRS)并通过阿里云物联网平台实现通信控制
    STM32+ESP8266+AIR202基本控制篇-315-功能测试-Air202(GPRS)以SSL单向认证方式连接MQTT服务器(不校验服务器证书)
    003-STM32+ESP8266+AIR202基本控制方案-功能测试-Android使用SmartConfig配网绑定ESP8266并通过阿里云物联网平台和ESP8266实现通信控制
    002-STM32+ESP8266+AIR202基本控制方案-关于阿里云物联网平台上的自定义,物模型,基础通信Topic使用说明
    002-STM32+ESP8266+AIR202基本控制方案-功能测试-Android使用APUConfig配网绑定ESP8266并通过阿里云物联网平台和ESP8266实现通信控制
    4.1-Air302(NB-IOT)-自建MQTT服务器-购买云服务器安装MQTT服务器软件(Linux系统)
    4.1-Air302(NB-IOT)-自建MQTT服务器-购买云服务器安装MQTT服务器软件(Windows系统)
  • 原文地址:https://www.cnblogs.com/yang0902/p/5698651.html
Copyright © 2011-2022 走看看