nativeElement.click（）和事件處理程序的點擊之間有什麼區別？

Question

我一直在嘗試爲角度2應用程序執行一個測試，點擊一個提交按鈕調用函數。我通常使用兩種方法來執行相同的操作。

element.nativeElement.click() 

和

element.triggerEventHandler('click',null); 

我認爲這兩種方法都是一樣的，直到我碰到這種情況下觸發事件處理方法不起作用來了。

element = fixture.debugElement.query(By.css('.dropList li')); 
element.triggerEventHandler('click',null); //Click event works here 
fixture.detectChanges(); 
let button = fixture.debugElement.query(By.css('button')); 
//button.triggerEventHandler('click',null); //Does not call function 
button.nativeElement.click(); //Calls function 
fixture.detectChanges(); 

模板供你參考：

<form (ngSubmit)="printSelection()"> 
    <div class="dropList"> 
    <ul> 
     <li *ngFor="let element of data.elements" (click)="selectElement(element)"> </li> 
    </ul> 
    </div> 
    <button type="submit">Submit</button> 
</form> 

那麼，有沒有這兩種方法有什麼區別或者你認爲我可以在我的代碼出了問題的地方？

Answer 1

element.nativeElement.click（）

是native method以模擬元件上的鼠標點擊。它冒泡，它的行爲與我們點擊元素的方式相同。

debugElement.triggerEventHandler（eventName的，是eventObj）

是角內置的方法，只是要求給定eventName的所有偵聽當前調試元件上：

triggerEventHandler(eventName: string, eventObj: any) { 
    this.listeners.forEach((listener) => { 
    if (listener.name == eventName) { 
     listener.callback(eventObj); 
    } 
    }); 
} 

監聽器被添加時DebugRenderer2運行listen方法：

listen(
    target: 'document'|'windows'|'body'|any, eventName: string, 
    callback: (event: any) => boolean):() => void { 
    if (typeof target !== 'string') { 
    const debugEl = getDebugNode(target); 
    if (debugEl) { 
     debugEl.listeners.push(new EventListener(eventName, callback)); 
    } 
    } 

    return this.delegate.listen(target, eventName, callback); 
} 

它發生在我們應用事件結合元素像

• (click)="handler()"
• @HostListener('click')
• host: '{ '(mouseenter): 'handler()' }
• renderer.listen

比方說，我們有以下的模板：

<div (click)="test()"> 
    <div class="innerDiv"> 
    {{title}} 
    </div> 
</div> 

而我們的測試將如下所示：

de = fixture.debugElement.query(By.css('.innerDiv')); 

de.nativeElement.click(); // event will be bubbled and test handler will be called 

de.triggerEventHandler('click', null); // there is not handlers for click event 
             // that angular added to this element 
             // so test method won't be called 

然後讓我們來看看您的模板。 button沒有處理程序，所以triggerEventHandler不會有任何影響。另一方面button.nativeElement.click();將觸發提交，因爲按鈕具有類型提交及其單擊事件時按鈕的標準行爲。