原生js js動態新增dom,如何繫結事件

2022-04-19 10:26:13 字數 1475 閱讀 9911

首先要明白瀏覽器在載入頁面的時候是按順序來載入的,這樣以來就很清楚了,js動態新增dom以後,這些dom並沒有繫結事件,這個時候最簡單的乙個辦法就是:將繫結事件的方法封裝到乙個函式a中,在動態新增完dom以後立即執行一次函式a即可。

需要注意的是,在你可能同時需要新增許多的dom,不要新增乙個就執行一次函式a,這樣會增加瀏覽器的負載,你需要在所有dom新增完以後在執行函式a,例如你用乙個for迴圈遍歷dom組合並拼接成乙個字串,然後新增到某個父級dom裡面,這個時候你需要在迴圈外新增一次就可以了。

**如下:

1

doctype html

>

2<

html

lang

="en"

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

title

>新增div並繫結點選事件

title

>

6<

style

>

7div.btn

15div.innerdiv

22style

>

23head

>

24<

body

>

25<

div

class

="aa"

>

26<

div

class

="btn"

>新增div並繫結點選事件

div>

27<

div

class

="outerdiv"

>

div>

28div

>

29<

script

>

30function

getclass(classname)

33getclass(

'btn')[

0].onclick

=function

() 36

//將點選事件封裝為函式

37function

funa() 42}

43}44//

將新增dom封裝為函式

45function

adddom()

50getclass(

'outerdiv')[

0].innerhtml

=oldhtml;

51funa();52}

53//

如果將函式a放在這裡就不會起作用的

54//

funa();

55script

>

56body

>

57html

>

個人部落格:[**午後南雜**](

原生js動態新增樣式表

原生js給html動態新增樣式表 1.建立標籤新增一張內建樣式表 var style1 document.createelement style style1.innerhtml body top hover 2.另一種是新增外部樣式表,即在文件中新增乙個link節點,然後將href屬性指向外部樣式...

原生dom如何對元素的class進行操作

今天看書時突然發現了classlist屬性,是domtokenlist的例項,以陣列的形式儲存元素的class屬性。classlist可以用來很方便的操作元素的class,對其增刪該查操作。說來慚愧,一直以來都是用jquery對元素的class進行操作,以為原生js的class操作必須要通過clas...

ANGULARJS 動態編譯新增到dom中

在使用angularjs 時,希望通過動態構建angular模版,再通過angular進行展示。使用 方法如下 通過 compile動態編譯html varhtml vartemplate angular.element html varmobiledialogelement compile tem...