DOM Event—监听事件

218 阅读2分钟

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)