onclick
dom 绑定事件
- 绑定事件
<button onclick ='go(1)'>click</button>
- 声明事件
function go(v){}
selector.onclick
向指定元素添加一次事件句柄
//html
<button id = 'btn'></button>
//绑定事件
window.onclick = function{}
document.onclick = function{}
document.body.onclick = function{}
document.getElementByld('btn').onclick = function{}
documentquerySelector('#btn').onclick = function{}
//移除事件
document.getElementByld('btn').onclick = null
多次事件句柄—ie9+
selector.addEventListener()
向指定元素添加多次事件句柄
window.addEventListener(event,function,useCapture)
document.addEventListener(event,function,useCapture)
document.body.addEventListener(event,function,useCapture)
document.getElementByld().addEventListener(event,function,useCapture)
document.querySelector().addEventListener(event,function,useCapture)
参数
event :必需。字符串,指定事件名。事件句柄没有 on
funcction :必需。指定是要事件触发时执行的函数
useCapture :可选。布尔值,指定事件是否在捕获或冒泡阶段执行
true:事件句柄在捕获阶段执行
false:事件句柄在冒泡阶段执行,默认
示例
const fn = function(){}
document.body.addEventListener('click',fn,false)
document.body.addEventListener('click',e=>{},false)
selector.removeEventListener()
移除由addEventListener()方法添加的事件句柄
window.removeEventListener(event,function,useCapture)
document.removeEventListener(event,function,useCapture)
document.body.removeEventListener(event,function,useCapture)
document.getElementByld().removeEventListener(event,function,useCapture)
document.querySelector().removeEventListener(event,function,useCapture)
参数
event :必需。字符串,指定事件名。事件句柄没有 on
funcction :必需。指定是要事件触发时执行的函数
useCapture :可选。布尔值,指定事件是否在捕获或冒泡阶段执行
true:事件句柄在捕获阶段执行
false:事件句柄在冒泡阶段执行,默认
注:如果添加两次事件句柄,一次在捕获阶段,一次在冒泡阶段,你必须单独移除该事件
示例
const fn = function(){}
document.body.addEventListener('click',fn,false)
document.body.removeEventListener('click',fn,false)
多次事件句柄—ie8-
selector..attachEvent()
向指定元素添加多次事件句柄
window.attachEvent(event,function)
document.attachEvent(event,function)
document.body.attachEvent(event,function)
document.getElementByld().attachEvent(event,function)
document.querySelector().attachEvent(event,function)
参数
event:必需。字符串,指定事件名
function:必需。指定要事件处罚是执行的函数
示例
const fn =function()
document.body.attachEvent('onclick',fn)
document.body.attachEvent('onclick',e=>{})
selector.detachEvent()
移除由attachEvent()方法添加的事件句柄
window.detachEvent(event,function)
document.detachEvent(event,function)document.body.detachEvent(event,function)document.getElementByld().detachEvent(event,function)document.querySelector().detachEvent(event,function)
示例
const fn =function()
document.body.attachEvent('onclick',fn)
document.body.detachEvent('onclick',fn)