| Warren's

事件

ondblclick 双击事件
onwheel 鼠标滚轮事件
oncontextmenu 鼠标右键点击，一般用作更改右键弹出选项
内联事件 onkeyup="handleEnter(event, type, this, '2333')"> 传递 event, 这里名称必须是event
判断输入回车

inputElement.onkeyup=function() {
    if (event.keyCode == "13") {
　　　　// 判断回车
　　}
}

onbeforeunload 页面刷新和关闭时触发

// 最好body上添加事件 兼容性较好 onbeforeunload:  
window||document.body.onbeforeunload=function(e){  
    // 兼容IE8和Firefox 4之前的版本
    if (e) {
        /* 没有设置 不会有弹窗提示 */
        e.returnValue = '关闭提示';
    }
    /* 没有返回 不会有弹窗提示 */
    // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
    return '关闭提示';
}  
// 顺序 onload  onbeforeunload  onunload

visibilitychange document.visibilityState 发生变化，即会触发

document.visibilityState // visible 页面内容至少是部分可见  hidden 页面不可见  prerender 页面正在渲染中，所以不可见
document.addEventListener('visibilitychange', function () {
    console.log('visibilityState', document.visibilityState)
})

focus blur freeze resume 等网页的生命周期事件监听参考： https://www.ruanyifeng.com/blog/2018/11/page_lifecycle_api.html
onerror 无法监听资源加载的错误，只能声明一次不能重复执行多个回调可以换成 window.addEventListener('error'),能监听网络错误但是不知道状态

可以使用 performance.getEntries() 获取已经加载成功的资源与要加载的资源进行对比得到没有加载成功的资源

vue 中用 errorHandler react 中用 componentDidCatch

// source(文件), lineno(行), colno(列)
window.onerror = function(message, source, lineno, colno, error) {
    console.log(message, source, lineno, colno, error)
    return true  // 返回false(默认) 就在浏览器显示错误； 返回 true 不显示错误了 只打印上面的输出，如果没有写输出  就看不到错误信息
}
a() // a是没有定义的

unhandledrejection

window.addEventListener('unhandledrejection', function(err){
    console.log('promise',err); // 产生了reject  但是没有设置 catch 捕获
})

var a = new Promise((resolve, reject) => {
    reject(23333)
})

自定义事件

/* 方式一 */
const myEvent = new Event("myEvent")
document.addEventListener("myEvent",fn)
document.dispatchEvent(myEvent)
function fn() {
    console.log("Event")
}

/* 方式二 */
const myEvent = new CustomEvent("myEvent", {text: 'CustomEvent'})
document.addEventListener("myEvent",fn)
document.dispatchEvent(myEvent)
function fn(e) {
  console.log(e.text)
}

事件说明

onchange: 值有改变并且元素失去焦点时触发。
onblur: 只要失去焦点就触发。
支持 onload 的标签 < body>, < frame>, < frameset>, < iframe>, < img>, < input type="image">, < link>, < script>, < style>
onscroll 事件对div window都兼容; document，document.body, document.documentElement 存在兼容问题 http://www.w3help.org/zh-cn/causes/SD9013 监听了window后可以获取html的 scrollTop
'<div onclick="fn(\''+ param +'\')"></div>' 内联事件传字符串需加引号并转义
storage 同一个域名不同页面才有效,其中的一个页面改变sessionStorage或localStorage的数据时，其他所有页面的storage事件会被触发，当前页不触发

事件移除

document.getElementById('id').removeEventListener('click',fn,false);  
// 这里必须写成fn的函数调用，因为要与添加事件时的函数为同一个函数。  
document.getElementById('id').onclick=function(){};  
document.getElementById('id').onclick=null;  
$('#').unbind('事件名称'); // 参数可选

JS鼠标事件获取坐标

参考地址open in new window

clientX/Y: 触发点相对浏览器可视区域左上角距离，不随页面滚动而改变;浏览器都支持;
pageX/Y: 触发点相对文档区域左上角距离，不会随着页面滚动而改变,除IE6/7/8不支持外，其余浏览器均支持;
offsetX/Y,layerX/Y 点击位置相对于元素的内边距

内有其它元素,获取的 offsetX 值会被影响，处理方法是设置一个透明遮罩覆盖在顶部
firefox的event不支持 offsetX (新版的是支持的)属性，但是提供了layerX(相对于元素的外边距),如果设置了position为相对/绝对定位就相等。
IE所有版本，chrome，Safari均完美支持，Firefox不支持最新版支持
IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持

screenX/Y 触发点相对显示器屏幕左上角的距离，不随页面滚动而改变所有浏览器均支持;
Event.x/y相对于css中的绝对定位的位置，不会随滚动条的改变而改变。火狐不支持但有等效的pageX。

# 事件

# 自定义事件

# 事件说明

# 事件移除

# JS鼠标事件获取坐标

事件

自定义事件

事件说明

事件移除

JS鼠标事件获取坐标