js 横屏 竖屏 相关代码 与知识点

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <script>
        // console.dir(window)
        // if ('orientationChange' in window){
        //     console.log('存在');
        // }else{
        //     console.log('不存在');
        // }
        // console.log(document.addEventListener)
        // console.log(typeof(document.addEventListener))
        // console.log('')
        // console.log(9? '9':'false')
        // console.log(-90? '-90':false)
        // console.log(0? true:'0')
        // console.log('')
        // console.dir(window.orientation)
        // console.log(window.orientation)
        // console.log(typeof(window.orientation))
        // console.log('')
        // console.dir(window.onorientationchange)
        // console.log(window.onorientationchange)
        // console.log(typeof(window.onorientationchange))
        // console.log('')
        // console.log(document.body.parentNode,orientation)

var fn1=(function(){
    var supportOrientation = (typeof window.orientation === 'number' &&    typeof window.onorientationchange === 'object');

    var init = function(){

        var htmlNode = document.body.parentNode,orientation;//这里什么意思? 为什么中间是 ,逗号
                                                            //还有parentNode 是获取什么的?
                                                            //它和parentELment 有什么不同之处

        var updateOrientation = function(){
                if(supportOrientation){//假如是移动端情况下,supportOrientation 是为 true 否则是为false的

                    orientation = window.orientation;
                    switch(orientation)
                    {
                         case 90:
                         case -90: orientation = 'landscape';  break;
                         default: orientation = 'portrait';      break;
                    }

                }else{//不是移动端 只能通过window.innerWidth 和 window.innerEight 来判断
                    //移动端  一般高度都是大于 宽度的 ,
                    //而pc端  一般是 宽度 大于 高度的
                    //这里高度和宽度 指的是屏幕
                    //但是有些触屏笔记本 如何 确定?

                    orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';

                }

                htmlNode.setAttribute('class',orientation);//设置 全局 class
            };

        if(supportOrientation){//true 是移动端

            window.addEventListener('orientationchange',updateOrientation,false);//这里为什么指定的是冒泡事件?-------------------

        }else{
            //监听resize事件
            window.addEventListener('resize',updateOrientation,false);
        }

        updateOrientation();//这里为什么和下面不同  这里为什么执行了(加括号)?-----------------------------------------
    };

    window.addEventListener('DOMContentLoaded',init,false);//牛 通过函数init  把 移动端判读相关 都一次性囊括了

});

var fun=(function(doc, win) {
            //onorientationchage屏幕发生反转时触发   onresize 事件会在窗口或框架被调整大小时触发。
            var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {//此函数的作用是根据屏幕大小动态设置字体大小//------------------------------上面这句 逗号是什么鬼
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//根据屏幕宽度动态设置字体大小
            };

            console.log(typeof(resizeEvt));

            if (!doc.addEventListener) return;//这里为什么需要加上这句话啊?----------------------------

            win.addEventListener(resizeEvt, recalc, false);//这里是为了 当屏幕状态发生改变时,字体大小也随之改变
            doc.addEventListener('DOMContentLoaded', recalc, false);//这里是为了保证初始字体的设置
});

// fun(document,window);

如题;DOMContentLoaded和load都是页面加载的时候触发的事件。区别在于触发的时机不一样。

浏览器渲染页面DOM文档加载的步骤:
1.解析HTM L结构。

2.加载外部脚本和css文件。

3.解析并执行脚本代码。

4.DOM树构建完成。(此时会触发DOMContentLoaded事件)

5.加载外部图片等文件。

6.页面加载完毕。(此时会触发load事件)

从以上DOM文档加载步骤上可以看出;当浏览器把DOM树构建完成后就开始触发了DOMContentLoaded事件,而load事件则要等包括图片这些加载完毕才会触发。

我们监听事件的时候把优先级高的可以先监听DOMContentLoaded再监听load

orientationchange 是一个屏幕 状态事件(当屏幕从竖屏切换到横屏 或者 横屏到竖屏的时候 会被触发)
此时的event对象不包含任何有价值的信息,因为唯一相关信息可以通过window.orientation 访问到
orientation属性
它有三个值:0,90,-90
0为竖屏模式(portrait),-90意味着该设备横向旋转到右侧的横屏模式(landscape),而90表示该设备是横向旋转到左边的横屏模式(landscape)。
还有一个是180,表示竖屏但是是翻转过来的竖屏模式。但这种模式至今尚未得到支持。

语法
element.addEventListener(event,function,useCapture)
    event:     事件的类型 如:click mousedown        (注意:指定事件时 不要加上 on前缀)
    function:  事件被触发后需要调用的函数,(被绑定的函数)  可以是匿名函数也可以是直接写入一个函数名
    useCapture:   值为布尔型,描述该事件 是冒泡还是捕获,该参数是可选的.

window.addEventListener("orientationchange", function() {

    var  orientation =window.orientation;
    // orientaion方向
    switch(orientation){
        case 90:
        case -90:orientation='landscape';break;//横屏模式
        default :orientation='portrait';break;//竖屏模式
    };//这里可以根据屏幕的不同状态,来确定加载的什么样的样式class

    console.log('')
    if (orientation=='landscape'){
        console.log('加载横屏class:landscape')
        console.log(window.orientation);
    }else{
        console.log('加载竖屏class:portrait')
        console.log(window.orientation);
    }

},false);

事件冒泡或事件捕获?
事件传递有两种方式:冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?

在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。

在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:

addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。

Problem 1:这两种方式区别在哪里?
document.getElementById('id').addEventListener('click',function(){console.log('比较两则之间的区别')},false)
document.getElementById('id').onclick=function(){console.log('两则之间的区别在哪里?');}

removeEventListener()方法
    removeEventListener()方法移除由addEventListener()方法添加的事件句柄:
    element.removeEventListener("mousemove",function);

浏览器兼容处理
    let btnObj= document.getElementById('id');

    if(btnObj.addEventListener){            //所有主流浏览器,除了ie 8 及更早版本
        btnObj.addEventListener('click',function);
    }else if(btnObj.attachEvent){            //IE 8 以及更早版本
        btnObj.attachEvent('onclick',function);
    }

IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

// console.log(document.docuemntElement)
// console.log(typeof(document.documentElement))
// console.dir(document.documentElement)
// console.dir(document.documentElement.clientWidth)
// console.dir(document.documentElement.clientHeight)
// console.log(window.orientation)

// fun(document,window);

// (document, window)
/**
*document.documentElement:返回html dom中的root 节点 即<html>
*document.documentElement.clientWidth:获取浏览器窗口文档显示区域的宽度,不包括滚动条。
*document.documentElement.clientHeight:获取浏览器窗口文档显示区域的高度,不包括滚动条
*/

<div id="test" style=" background: #ccc"></div>
<script type="text/javascript">
autodivheight();
function autodivheight(){ //函数:获取尺寸
//获取浏览器窗口高度
var winHeight=0;
if (window.innerHeight){
winHeight = window.innerHeight;
}
else if ((document.body) && (document.body.clientHeight)){
winHeight = document.body.clientHeight;
}
//通过深入Document内部对body进行检测,获取浏览器窗口高度
if (document.documentElement && document.documentElement.clientHeight){
winHeight = document.documentElement.clientHeight;
}
//DIV高度为浏览器窗口的高度
//document.getElementById("test").style.height= winHeight +"px";
//DIV高度为浏览器窗口高度的一半
document.getElementById("test").style.height= winHeight/2 +"px";
}
window.onresize=autodivheight; //浏览器窗口发生变化时同时变化DIV高度

// onresize 事件会在窗口或框架被调整大小时发生。

// innerheight    返回窗口的文档显示区的高度。
// innerwidth    返回窗口的文档显示区的宽度。

//document.body.clientHeight是指页面body元素的的高度,
//但是body里面包含img元素时,实际高度 可能会偏小,
//因为图片下载需要时间,假如图片加载没有完成,偏小的那部分就是图片那部分
</script>

    </script>
</body>
</html>

横屏 竖屏 相关代码 与知识点

上一篇:phpcms 内容——>评论管理 中添加 打开文章链接的 功能


下一篇:Android横屏竖屏切换的问题