honestly i'm really confused about the "data-" attribute thing, i'm sure we'll review more in class but if you can clarify this a bit more--i think it just went over my head / I'm still a little confused about data attributes. / Can you explain why the attribute name needs to start with data-? / I am still a bit confused about the meaning of the use of data attributes, can we have more elaborations on that please?

The HTML language is constantly evolving. Or, at least, the W3C reserves the right to add new TAGS and ATTRIBUTES to the language.

How can we be sure that if we use an attribute named trigger (or any other word) that they won't create an attribute called trigger (or our word) with a different meaning and break our code?

The answer is that the W3C promises to never add any attributes to the language that start with data-.

So, as long as we use data-trigger or data-word, our code is safe.

Do custom attributes that do not start with data exist? What’s their functionality and why are they not preferred exactly?

Nothing prevents us from naming an attribute anything we want. We could call it trigger

But we run a very small risk if we don't name it data-something

It's easy enough to reduce the risk to zero.

The first question was really hard for me to understand, what is the difference btn 'data-x' and .attr(). how is 'data-x' defines as an attribute?

If I have some HTML code, I can add attributes:


<section
               data-role="trigger"
               data-image-url="imgs/otter2.jpg"
               data-image-title="How Deep Is Your Love"
>
stuff in the section
</section>

stuff in the section

Then, from JS, I can get or set these attributes using the jQuery .attr() method:


$("section[data-role=trigger]").attr('data-image-url'); // get value
$("section[data-role=trigger]").attr('data-image-url', 'imgs/fluffy-bunny.jpg'); // set value

What other elements have default actions and what are they?

Buttons to submit forms have a default behavior.

In what cases does prevent default not work?

I think it always works.

What would be the difference between using .click() and ….(“click”,)

I don't understand this question. The jQuery .click() method is used like


$(thingToAddFunctionTo).click(functionToAdd);

We don't yet know any alternative.

In this snippet of code:

function masHandler(evt) {
    console.log(evt);
    evt.preventDefault();
    alert(""MAS is very cool"");
}

what does console.log(evt) do?

console.log is JavaScript's print function. It prints its arguments to the JavaScript console in the browser.

Here, we are printing the event object, which the browser created and handed to our function as its argument.

Let's try it: second event handler

Difference between preventDefault() vs event.preventDefault()?

preventDefault() is a method of an event object. So, it needs to be called on one of those.

Could you clarify/provide an example of thumbLinks in the reading? Thank you so much!

Sure, we'll talk a lot about that today.

A bit unclear on what one() and attr() are doing. Particularly this part: "The one() method checks that the wrapped set is exactly one element (assuming you've loaded my bounds plugin). The attr() method reads an attribute off the element."

Let's contrast the following on the interactive ottergram


    $("h1").attr('class');
    $("h1").one().attr('class');
    $("h2").attr('class');
    $("h2").one().attr('class');

So, the .one() gives us an error message.

Why would we want an error message? Because error messages make debugging easier, as opposed to code that just doesn't work for some unknown reason.