JavaScript高级程序设计--读书笔记3

卑微不讨喜

于 2020-03-11 21:20:33 发布

阅读量183

点赞数

本文链接：https://blog.csdn.net/BIGBIGBIGCAT/article/details/104793572

版权

由于 contentDocument 属性是 Document 类型的实例，因此可以像使用其他 HTML 文档一样使用它，包括所有属性和方法。Opera、Firefox、Safari 和 Chrome 支持这个属性。访问框架或内嵌框架的文档对象要受到跨域安全策略的限制。如果某个框架中的页面来自其他域或不同子域，或者使用了不同的协议，那么要访问这个框架的文档对象就会导致错误。
节点操作元素样式

    <style>
        #root{height: 800px;background: pink;border: 1px solid green;}
    </style>
    <div id="root"></div>
    <script>
       let root = document.querySelector('#root')
       root.style.cssText="height:400px;background:red;" //新增样式到了节点上，覆盖了原样式
       root.style.removeProperty("background") //删除的是节点上的样式，背景还是pink
       root.style.setProperty("border","1px solid yellow") //和cssText原理一样
    </script>

偏移量。要想知道某个元素在页面上的偏移量，将这个元素的 offsetLeft 和 offsetTop 与其 offsetParent 的相同属性相加，如此循环直至根元素，就可以得到一个基本准确的值。以下两个函数就可以用于分别取得元素的左和上偏移量。

    <style>
        *{margin: 0;padding: 0;}
        #root{height: 200px;background: pink;border: 5px solid green;}
        #child{
            height: 50px;width: 50px;background: yellow;
            border: 5px solid green;padding: 20px;margin: 0 60px;
        }
    </style>
    <div id="root">
        <div id="child">child</div>
    </div>
    <script>
       function getElementLeft(element){
            var actualLeft = element.offsetLeft;
            var current = element.offsetParent;
            while (current !== null){
                actualLeft += current.offsetLeft;
                current = current.offsetParent;
            }
            return actualLeft;
        } 
        function getElementTop(element){
            var actualTop = element.offsetTop;
            var current = element.offsetParent;
            while (current !== null){
                actualTop += current. offsetTop;
                current = current.offsetParent;
            }
            return actualTop;
        } 
        let child=document.querySelector('#child')
        console.log(getElementLeft(child)); //65
        console.log(getElementTop(child)); //5
        console.log(child.clientHeight); //90
        console.log(child.clientWidth); //90
    </script>

元素的客户区大小，指的是元素内容及其内边距所占据的空间大小，滚动条占用的空间不计算在内。clientWidth 属性是元素内容区宽度加上左右内边距宽度；clientHeight 属性是元素内容区高度加上上下内边距高度。

滚动大小，指的是包含滚动内容的元素的大小。scrollHeight：在没有滚动条的情况下，元素内容的总高度。 scrollWidth：在没有滚动条的情况下，元素内容的总宽度。scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。 scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

    <style>
        *{margin: 0;padding: 0;}
        #root{height: 200px;background: pink;}
        #child{height: 100px;width: 100px;background: yellow; 
        margin: 0 60px;padding:15px;overflow-y: auto;}
    </style>
    <div id="root">
        <div id="child">
            文本文本文本文本文本文本文本文本文本文本文本文本文本文本
            文本文本文本文本文本文本文本文本文本文本文本文本文本文本
            文本文本文本文本文本文本文本文本文本文本文本文本文本文本
        </div>
        <button onclick="scrollToTop()">去顶部</button>
    </div>
    <script>
        let child=document.querySelector('#child')
        console.log(child.clientHeight); //130
        console.log(child.clientWidth); //130
        console.log(child.scrollHeight);//330
        console.log(child.scrollWidth);//130
        function scrollToTop(){
            if (child.scrollTop != 0){
                child.scrollTop = 0;
            }
        } 
    </script>

“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener() 和 removeEventListener()。所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。
stopImmediatePropagation()取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3级事件中新增）。stopPropagation()取消事件的进一步捕获或冒泡，如果bubbles 为true，则可以使用这个方法。preventDefault()取消事件的默认行为，如果cancelable是 true，则可以使用这个方法。

    <div id="root">
        <div id="level-1" onclick="levelOne()">1
            <div id="level-2">2</div>
        </div>
    </div>
    <script>
        function levelOne(){
            alert(1)
        }
        document.querySelector('#level-2').onclick=(event)=>{
            alert(2)
            event.stopPropagation() 
            // e.stopImmediatePropagation()
        }
    </script>

虽然 scroll 事件是在 window 对象上发生的，但它实际表示的则是页面中相应元素的变化。在混杂模式下，可以通过<body>元素的 scrollLeft 和 scrollTop 来监控到这一变化；而在标准模式下，除 Safari 之外的所有浏览器都会通过<html>元素来反映这一变化（Safari 仍然基于跟踪<body>滚动位置）

<body>
    <style>
        body{
            height: 2000px;background: plum;
        }
    </style>
    <script>
        let body=document.querySelector('body')
        let html=document.querySelector('html')
        body.onload=()=>{
            console.log('页面加载完毕')
        }
        body.onresize=()=>{
            console.log('当前页面宽度是：'+ body.clientWidth);
        }
        window.onscroll=()=>{
            console.log('当前页面滚动的距离是：'+html.scrollTop);
        }
         body.onbeforeunload=(event)=>{
            var message = "确认离开页面？";
            event.returnValue = message;
            return message; 
        }
    </script>
</body>

鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的 clientX 和 clientY 属性中。所有浏览器都支持这两个属性，它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。而页面坐标通过事件对象的 pageX 和 pageY 属性，能告诉你事件是在页面中的什么位置发生的。在页面没有滚动的情况下，pageX 和 pageY 的值与 clientX 和 clientY 的值相等。通过 screenX 和 screenY 属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息。
虽然鼠标事件主要是使用鼠标来触发的，但在按下鼠标时键盘上的某些键的状态也可以影响到所要采取的操作。这些修改键就是 Shift、Ctrl、Alt 和 Meta（在 Windows 键盘中是 Windows 键，在苹果机中是 Cmd 键），它们经常被用来修改鼠标事件的行为。DOM 为此规定了 4 个属性，表示这些修改键的状态：shiftKey、ctrlKey、altKey 和 metaKey。这些属性中包含的都是布尔值，如果相应的键被按下了，则值为 true，否则值为 false。当某个鼠标事件发生时，通过检测这几个属性就可以确定用户是否同时按下了其中的键。

        var div = document.getElementById("myDiv");
        div.onclick=(event)=>{
            var keys = new Array();
            if (event.shiftKey){ keys.push("shift"); }
            if (event.ctrlKey){ keys.push("ctrl"); }
            if (event.altKey){ keys.push("alt"); }
            if (event.metaKey){ keys.push("meta"); }
            alert("Keys: " + keys.join(","));
        };

事件委托

    <ul id="ulEle">
        <li id="liEle-1">第一个</li>
        <li id="liEle-2">第二个</li>
    </ul>
    <script>
        document.querySelector('#ulEle').onclick=(event)=>{
            console.log(event.target.id);
            switch(event.target.id){
                case 'liEle-1': alert('点击了第一个');break;
                case 'liEle-2': alert('点击了第二个');break;
                default: break;
            }
        }
    </script>

每当将事件处理程序指定给元素时，运行中的浏览器代码与支持页面交互的 JavaScript 代码之间就会建立一个连接。这种连接越多，页面执行起来就越慢。
第一种情况就是从文档中移除带有事件处理程序的元素时。这可能是通过纯粹的 DOM 操作，例如使用 removeChild()和 replaceChild()方法，但更多地是发生在使用 innerHTML 替换页面中某一部分的时候。如果带有事件处理程序的元素被 innerHTML 删除了，那么原来添加到元素中的事件处理程序极有可能无法被当作垃圾回收。
导致“空事件处理程序”的另一种情况，就是卸载页面的时候。。如果在页面被卸载之前没有清理干净事件处理程序，那它们就会滞留在内存中。每次加载完页面再卸载页面时（可能是在两个页面间来回切换，也可以是单击了“刷新”按钮），内存中滞留的对象数目就会增加，因为事件处理程序占用的内存并没有被释放。一般来说，最好的做法是在页面卸载之前，先通过 onunload 事件处理程序移除所有事件处理程序。在此，事件委托技术再次表现出它的优势——需要跟踪的事件处理程序越少，移除它们就越容易。

    <div id="myDiv">
        <input type="button" value="Click Me" id="myBtn">
    </div>
    <script>
        var btn = document.getElementById("myBtn");
        btn.onclick = function(){
            btn.onclick = null; //移除按钮的事件处理程序
            document.getElementById("myDiv").innerHTML = "Processing..."; //移除按钮
        }; 
    </script>

富文本编辑。contenteditable 属性有三个可能的值："true"表示打开、"false"表示关闭，"inherit"表示从父元素那里继承（因为可以在 contenteditable 元素中创建或删除元素）。

<div class="editable" id="richedit" contenteditable></div>
<script>
    //或者
    var div = document.getElementById("richedit");
    div.contentEditable = "true"; 
</script>

拖动

    <div id="dragFrom" draggable="true">被拖动元素</div> 
    <div id="dragTo">被放置元素</div>
    <script>
        //被拖动元素的三个方法
        let dragFrom=document.querySelector('#dragFrom')
        dragFrom.ondragstart=()=>{
            console.log('按下鼠标开始拖动触发一次',event.target.id)
            event.dataTransfer.setData('id',event.target.id)
        }
        dragFrom.ondrag=()=>{
            console.log('持续拖动触发')
        }
        dragFrom.ondragend=()=>{
            console.log('松开鼠标结束拖动触发一次')
        }
        //把任何元素变成有效的放置目标，方法是重写事件的默认行为。
        let dragTo=document.querySelector('#dragTo')
        dragTo.ondragover=(event)=>{
            event.preventDefault();
        }
        dragTo.ondragenter=(event)=>{
            event.preventDefault();
        }
        dragTo.ondrop=(event)=>{
            event.preventDefault();
            let id='#'+event.dataTransfer.getData('id')
            event.target.appendChild(document.querySelector(id))
        }
    </script>

卑微不讨喜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级程序设计--读书笔记3

由于 contentDocument 属性是 Document 类型的实例，因此可以像使用其他 HTML 文档一样使用它，包括所有属性和方法。Opera、Firefox、Safari 和 Chrome 支持这个属性。访问框架或内嵌框架的文档对象要受到跨域安全策略的限制。如果某个框架中的页面来自其他域或不同子域，或者使用了不同的协议，那么要访问这个框架的文档对象就会导致错误。节点操作元素样...
复制链接

扫一扫