$(e.target).find 和 template.find('input').value 有什么区别

Question

Its probably something basic but wanted explanation of the use cases. Like sometimes hitting "enter" inputs the data, while sometimes mouseclicks work. I'm concerned about "Gotchas" that I would have overlooked. Like maybe it works in Firefox but not in Chrome for example.

I saw the following 2 ways, both are ways to input data into a form element.

First way

JavaScript

var $body = $(e.target).find('[name=body]');  //defines the content
var comment = { body: $body.val() };    

HTML

<form class="form-send-message" id="addcomment" data-keyboard-attach>
  <textarea id="body" name="body"></textarea>
</form>

Second way

JavaScript

var message = template.find('input').value;

HTML

<form class="message" data-keyboard-attach>
    <input type="text" name="body" id="body">
    <button class="icon" type="submit"></button> 
</form>

Answer 1

Here you can see two ways to find the value of an input/textarea with an explanation:

'submit .new-post': function(event){
    //returns name="postBody" content from the form you're submitting
    var postBody = event.target.postBody.value;  

    //returns the value of an html element that exists in DOM, even if its inside a different template or form.
    var postBody = $('.someClass').val()  
}

Answer 2

Your first code Is jQuery , while your second code is Meteor . They both can accomplish the same thing under the right circumstances. Also, according to this answer , meteor's template.find is an alias for jQuery's $ , meaning they are the exact same.

But, the codes don't do the same thing in this case.

Your first code finds the value an element with a name of "body" inside e.target . I am assuming e is an Event , but there is no way to tell with the current amount of code you gave.

The second code just gets the value of the first INPUT element it finds.