让元素显示滚动到屏幕可视区:
el.scrollIntoView() // 元素顶部与可视区顶部对齐
el.scrollIntoView(false) // 元素底部与可视区底部对齐
监听右键菜单并阻止其显示，然后可以显示自定义菜单
window.addEventListener('contextmenu',function(e){e.preventDefault();console.log(789)}).
监听窗口关闭事件,弹出提示向用户再次确认
window.addEventListener('beforeunload',function(e){e.returnValue = "确定要关闭吗"})
监听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();
}
监听keypress事件，可以限制用户的输入(数字)
textInput.addEventListener('keypress',(e) => {
let charCode = e.keyCode
if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !e.ctrlKey) {
e.preventDefault();
}
})
实用兼容方法
var EventUtil = {
//获得剪切板的记录
getClipboardText: function (event) {
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
},
//设置剪切板的记录
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对象
一般我们判断是否是数组，会这样写：
var isArray = value instanceof Array;
以上代码要返回true，value 必须是一个数组，而且还必须与Array 构造函数在同个全局作用域中。（别忘了，Array 是window 的属性。）如果value 是在另个frame 中定义的数组，那么以上代码就会返回false。
解决上述问题：大家知道，在任何值上调用Object 原生的toString()方法，都会返回一个[object NativeConstructorName]格式的字符串。每个类在内部都有一个[[Class]]属性，这个属性中就指定了上述字符串中的构造函数名。
所以就有这样：
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]";
}
请注意，Object.prototpye.toString()本身也可能会被修改。这
技巧假设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 变化检测 MutationObserver， 短时间内的变化会合成一次去触发回调
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：子节点的变动（指新增，删除或者更改）。
attributes：属性的变动。
characterData：节点内容或节点文本的变动
subtree：布尔值，表示是否将该观察器应用于该节点的所有后代节点。
attributeOldValue：布尔值，表示观察attributes变动时，是否需要记录变动前的属性值。
characterDataOldValue：布尔值，表示观察characterData变动时，是否需要记录变动前的值。
attributeFilter：数组，表示需要观察的特定属性（比如['class','src']）。
// 保存所有没有被观察器处理的变动
var changes = mutationObserver.takeRecords();
// 停止观察
mutationObserver.disconnect();
window.matchMedia 媒体查询
matchMedia() 返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。
matchMedia() 方法的值可以是任何一个 CSS @media 规则 的特性, 如 min-height, min-width, orientation 等。
window.matchMedia("(max-width:100px)")
MediaQueryList 对象有订阅接口：addListener，这样就可以根据媒体的改变去修改样式了。
元素左对齐与右对齐的设置
element.dir属性
'rtl' 右对齐 right to left
'ltr' 左对齐 left to right
winsow.ResizeObserver 监听元素的大小变化，及隐藏和显示
有这个方法的话，就不需要只能依靠监听window的resize事件去实现了
其实隐藏和显示，style.display = 'none', removeChild移除节点都能触发
用法
// 监听
const el = document.body;
const ob = new ResizeObserver((entry) => {do ....});// 注意加防抖动
ob.observe(el); // 绑定元素，可绑定多个
ob.unobserve(el); //解绑
ob.disconnect(); // 解绑所有
注意事项
- 调用observe绑定时，会触发一次回调;
- entry有2个属性，一个是rect描述触发元素的大小位置，一个是目标元素
