In lightning component, are only html items responsive at all?

Question

I have just gone through the trailhead and documents about lightning component. One interesting part is that it seems to me that only lightning component specified tags - like <ui:button>, <ui:outputText>, etc. are responsive. Normal tags - like <div>, <p>, are not.

Is there anyway we can handle click or other events for normal html tags in lightning component?

Answer 1

You can use normal HTML tags just the same as ui elements. You just need to use the normal HTML events. Here's a very brief example:

--- demo.app ---

<aura:application>
    <div onclick="{!c.handleClick}">
        Click Me
     </div>
 </aura:application>

--- demoController.js ---

({
    handleClick: function(component, event, helper) {
        alert("You clicked me!");
    }
 })

You can also do other things, like setting styles/classes/values, etc.

This behavior is consistent between aura:application and aura:component.

I also wrote a very simplistic drag-and-drop application to figure out how HTML5 drag and drop works in Lightning... and it works very well. Here's the code I wrote as a demonstration:

--- DragDropDemo.app ---

<aura:application >
    <aura:attribute name="values"
                    type="String[]"
                    access="private" />
    <aura:attribute name="dragid"
                    type="Integer"
                    access="private" />
    <aura:handler name="init"
                  value="{!this}"
                  action="{!c.doInit}" />
    <div class="droparea" 
         ondragover="{!c.cancel}" 
         ondragenter="{!c.cancel}"
         ondrop="{!c.drop}">
        <aura:iteration items="{!v.values}"
                        indexVar="index"
                        var="value">
            <div class="row" 
                 draggable="true"
                 ondragstart="{!c.dragstart}"
                 data-drag-id="{!index}">
                {!value}
            </div>
        </aura:iteration>
    </div>
</aura:application>

--- DragDropDemo.css ---

.THIS.droparea{
    border: 1px solid black;
    position: relative;
    margin: 3px;
}
.THIS.droparea .row {
    position: relative;
    border: 1px solid red;
    padding: 3px;
    margin: 3px;
}

--- DragDropDemoController.js ---

({
    doInit: function(component, event, helper) {
        var values = "a b c d e".split(' ');
        component.set("v.values", values);
    },
    dragstart: function(component, event, helper) {
        component.set("v.dragid", event.target.dataset.dragId);
    },
    drop: function(component, event, helper) {
        var dragId = component.get("v.dragid"),
            values = component.get("v.values"),
            temp;
        temp = values[dragId];
        values[dragId] = values[event.target.dataset.dragId];
        values[event.target.dataset.dragId] = temp;
        component.set("v.values", values);
        event.preventDefault();
    },
    cancel: function(component, event, helper) {
        event.preventDefault();
    }
})

Answer 2

The normal events of the div or the HTML tag like <a> or <p> or <button> if it is created inside the components should work same

Here is a simple component code that uses all various combinations

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >
  <ui:inputText aura:id="name" label="Enter Name:" placeholder="Your Name" />
  <ui:button aura:id="button" buttonTitle="Click to see what you put into the field" class="button" label="Ui Button" press="{!c.getInput}"/>
  <button type="button" onclick="{!c.getInput}">HTML Button</button>
   <lightning:button variant="brand" label="Lightning Button" onclick="{!c.getInput }" />
  <ui:outputText aura:id="outName" value="" class="text"/>
  <div onclick="{!c.getInput }">Div Button</div>

And the controller code

({
   getInput : function(cmp, evt) {
     console.log(evt.target);
     var myName = cmp.find("name").get("v.value");
     var myText = cmp.find("outName");
     var greet = "Hi, " + myName;
     myText.set("v.value", greet);
  }
})

And the log captured in console

You will notice that all of them were able to call the controller action and normal html tag also displayed targets as expected while lightning ui element launches an event named ui:press .

Conclusion is normal HTML elements should support events supported by HTML elements