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();将触发提交，因为按钮具有类型提交及其单击事件时按钮的标准行为。