為dom元素繫結js事件的三種方式

2022-07-25 18:00:17 字數 1522 閱讀 4562

1. 在html標籤中直接繫結;

2. 在js中獲取到相應的dom元素後繫結;

3. 在js中使用addeventlistener()實現繫結;

具體**示例如下:

<

input

type

="button"

id="btn0"

onclick

="alert('執行了html繫結的方法')"

value

="html中繫結"

>

input

>

<

input

type

="button"

id="btn1"

value

="js繫結"

>

<

input

type

="button"

id="btn2"

value

="addeventlistener繫結"

>

input

>

<

script

>

//********js繫結事件的js***********

let button1

=document.getelementbyid(

"btn1")

button1.onclick

=function

()

//將覆蓋之前繫結的onclick事件

button1.onclick

=function

()

//*********addeventlistener繫結的js***********

let button2

=document.getelementbyid(

"btn2")

//使用addeventlistener()可為乙個元素繫結多個事件

button2.addeventlistener(

"mouseover

", func1,

false

) button2.addeventlistener(

"click

", func2,

false

) button2.addeventlistener(

"click

", func3,

false

)

function

func1()

function

func2()

function

func3()

//使用removeeventlistener(event,function)移除事件

"mouseover", func1)

script

>

DOM元素繫結js的三種方式

在dom元素裡面繫結 使用on 事件型別 function button value 點我吧 onclick alert 已執行 在js 中獲取元素,使用點語法註冊 box 我是div盒子 div var box document.getelementbyid box box.onclick fun...

DOM繫結事件的三種方式

參考事件繫結原理 1.在dom中繫結。在dom中繫結有兩種方式 function handlename 2.在js中繫結。elementobj.on function elementobj.nclick function 3.利用事件監聽,但是事件監聽要考慮到瀏覽器相容性 chrome firefo...

JS事件繫結三種方式

1.在html標籤中直接繫結 2.在js中獲取到相應的dom元素後繫結 重複繫結會覆蓋之前繫結的onclick事件let button1 document.getelementbyid btn1 button1.onclick function 3.在js中使用addeventlistener 實現...