讓元素顯示滾動(dòng)到屏幕可視區(qū):

el.scrollIntoView()  // 元素頂部與可視區(qū)頂部對(duì)齊
el.scrollIntoView(false)  // 元素底部與可視區(qū)底部對(duì)齊

監(jiān)聽右鍵菜單并阻止其顯示，然后可以顯示自定義菜單

window.addEventListener('contextmenu',function(e){e.preventDefault();console.log(789)}).

監(jiān)聽窗口關(guān)閉事件,彈出提示向用戶再次確認(rèn)

window.addEventListener('beforeunload',function(e){e.returnValue = "確定要關(guān)閉嗎"})

監(jiān)聽url的哈希字段的改變

window.addEventListener('hashchange',function(e){console.log(e，location)})

兼容--文本框的選擇文本方法

function selectText(textbox, startIndex, stopIndex) {
            if (textbox.setSelectionRange) {
                textbox.setSelectionRange(startIndex, stopIndex);
            } else if (textbox.createTextRange) {
                var range = textbox.createTextRange();
                range.collapse(true);
                range.moveStart("character", startIndex);
                range.moveEnd("character", stopIndex - startIndex);
                range.select();
            }

            textbox.focus();
        }

監(jiān)聽keypress事件，可以限制用戶的輸入(數(shù)字)

textInput.addEventListener('keypress',(e) => {
            let charCode = e.keyCode
            if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !e.ctrlKey) {
                e.preventDefault();
            }
        })

實(shí)用兼容方法

var EventUtil = {
            //獲得剪切板的記錄
            getClipboardText: function (event) {
                var clipboardData = (event.clipboardData || window.clipboardData);
                return clipboardData.getData("text");
            },
            //設(shè)置剪切板的記錄
            setClipboardText: function (event, value) {
                if (event.clipboardData) {
                    return event.clipboardData.setData("text/plain", value);
                } else if (window.clipboardData) {
                    return window.clipboardData.setData("text", value);
                }
            },
            //省略的代碼
        };

分辨是否是原生JavaScript對(duì)象

一般我們判斷是否是數(shù)組，會(huì)這樣寫：

var isArray = value instanceof Array;

以上代碼要返回true，value 必須是一個(gè)數(shù)組，而且還必須與Array 構(gòu)造函數(shù)在同個(gè)全局作用域中。（別忘了，Array 是window 的屬性。）如果value 是在另個(gè)frame 中定義的數(shù)組，那么以上代碼就會(huì)返回false。
解決上述問題：大家知道，在任何值上調(diào)用Object 原生的toString()方法，都會(huì)返回一個(gè)[object NativeConstructorName]格式的字符串。每個(gè)類在內(nèi)部都有一個(gè)[[Class]]屬性，這個(gè)屬性中就指定了上述字符串中的構(gòu)造函數(shù)名。

所以就有這樣：

function isArray(value){
return Object.prototype.toString.call(value) == "[object Array]";
}

function isFunction(value){
return Object.prototype.toString.call(value) == "[object Function]";
}
function isRegExp(value){
return Object.prototype.toString.call(value) == "[object RegExp]";
}

請(qǐng)注意，Object.prototpye.toString()本身也可能會(huì)被修改。這
技巧假設(shè)Object.prototpye.toString()是未被修改過的原生版本。

base64編碼與解碼

function utf8_to_b64( str ) {
  return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}

dom 變化檢測(cè) MutationObserver， 短時(shí)間內(nèi)的變化會(huì)合成一次去觸發(fā)回調(diào)

var observer = new MutationObserver(function (mutations, observer) {
mutations.forEach(function(mutation) {
console.log(mutation);
});
});

var article = document.querySelector('article');

var options = {
'childList': true,
'attributes':true
} ;

observer.observe(article, options);

childList：子節(jié)點(diǎn)的變動(dòng)（指新增，刪除或者更改）。
attributes：屬性的變動(dòng)。
characterData：節(jié)點(diǎn)內(nèi)容或節(jié)點(diǎn)文本的變動(dòng)

subtree：布爾值，表示是否將該觀察器應(yīng)用于該節(jié)點(diǎn)的所有后代節(jié)點(diǎn)。
attributeOldValue：布爾值，表示觀察attributes變動(dòng)時(shí)，是否需要記錄變動(dòng)前的屬性值。
characterDataOldValue：布爾值，表示觀察characterData變動(dòng)時(shí)，是否需要記錄變動(dòng)前的值。
attributeFilter：數(shù)組，表示需要觀察的特定屬性（比如['class','src']）。

// 保存所有沒有被觀察器處理的變動(dòng)
var changes = mutationObserver.takeRecords();

// 停止觀察
mutationObserver.disconnect();

window.matchMedia 媒體查詢

matchMedia() 返回一個(gè)新的 MediaQueryList 對(duì)象，表示指定的媒體查詢字符串解析后的結(jié)果。

matchMedia() 方法的值可以是任何一個(gè) CSS @media 規(guī)則 的特性, 如 min-height, min-width, orientation 等。

window.matchMedia("(max-width:100px)")

MediaQueryList 對(duì)象有訂閱接口：addListener，這樣就可以根據(jù)媒體的改變?nèi)バ薷臉邮搅恕?/p>

元素左對(duì)齊與右對(duì)齊的設(shè)置

element.dir屬性

'rtl' 右對(duì)齊 right to left

'ltr' 左對(duì)齊 left to right

winsow.ResizeObserver 監(jiān)聽元素的大小變化，及隱藏和顯示

有這個(gè)方法的話，就不需要只能依靠監(jiān)聽window的resize事件去實(shí)現(xiàn)了

其實(shí)隱藏和顯示，style.display = 'none', removeChild移除節(jié)點(diǎn)都能觸發(fā)

用法

// 監(jiān)聽
const el = document.body;
const ob = new ResizeObserver((entry) => {do ....});// 注意加防抖動(dòng)
ob.observe(el); // 綁定元素，可綁定多個(gè)

ob.unobserve(el); //解綁

ob.disconnect(); // 解綁所有

注意事項(xiàng)

1. 調(diào)用observe綁定時(shí)，會(huì)觸發(fā)一次回調(diào);
2. entry有2個(gè)屬性，一個(gè)是rect描述觸發(fā)元素的大小位置，一個(gè)是目標(biāo)元素