Bind an event to a set of buttons--[js practice]

Source: Internet
Author: User
Tags event listener

Topic Requirements

The code provided is an editor component, but the functionality is not complete, and you need to bind related events to the Editor's toolbar buttons (you can use JQuery), specifically as follows:

1. Binding the Click event for the #js-add-fontsize element

Changes the text font in the editor to 20px after the event is triggered.

2. Binding the Click event for the #js-CHANGE-BG element

When the event is triggered, the editor's background color value is "#6b6b6b" and the text color is "#fff".

3. Binding the Click event for the #js-toggle-opacity button element

When the event is triggered, if #editor element transparency (opacity) is greater than 0, set #editor element transparency to 0, otherwise set #editor element transparency to 1.

The HTML structure is as follows:

<!DOCTYPE HTML><HTML><Head>    <MetaCharSet= "UTF-8">    <title>Write a JQuery event listener</title>    <style>#editor{width:90%;Display:Block;Height:300px;margin:20px Auto;padding:10px;font-size:14px;Line-height:1.5;Background-color:' #fff ';Color:' #000 ';      }#operation{text-align:Center}Button{background:#fff;Color:#000;Border:2px solid #000;padding:10px;Border-radius:4px;      }    </style></Head><Body>    <!--please complete the exercise in the Index.js file -    <textareaID= "Editor">After the study, I believe you have a certain understanding of the next degree. The so-called beginning of a single step, now we start the first project to work it:) project description Before starting a professional study, we want to listen to your voice, so I hope you write a simple feeling according to the following two points: share what you want to be a front-end engineer's original intention is what; write down your The planning of your future career, including your phased goals, the goals you ultimately want to achieve, and suggesting that you write down your true ideas will help us get to know you better.      Your homework will be reviewed by our Imweb technical experts, who will combine their experience to give you some valuable advice.    After the project review rules receive your project assignments, we will give you a review of the results within 7 days, please return to this page for review. </textarea>    <DivID= "Operation">      <ButtonID= "Js-add-fontsize">Editor text becomes larger</Button>      <ButtonID= "JS-CHANGE-BG">Editor Color dimmed</Button>      <ButtonID= "Js-toggle-opacity">Show/Hide Editor</Button>    </Div>    <!--Introducing jquery -    <Scriptsrc= "Https://7.url.cn/edu/jslib/jquery/1.9.1/jquery.min.js"></Script></Body></HTML>

The requirements for writing index.js are as follows

var$editor = $ (' #editor ');//have given$(' #js-add-fontsize '). On (' click ',function(event) {$editor. css (' Font-size ', ' 20px ');}); $(' #js-change-bg '). On (' click ',function(event) {$editor. css (' Background ', ' #6b6b6b '); $editor. CSS (' Color ', ' #fff ');}); $(' #js-toggle-opacity '). On (' click ',function(event) {if ($editor. CSS (' opacity ') >0  { $editor. css ( ' opacity ', 0); }   Else{ $editor. css ( ' opacity ', 1); }});

Note: The first reason is not right--#editor element Transparency (opacity) and the writing of later value

At first, the CSS was omitted, and the numbers were enclosed in quotation marks, as well as a comma-==/=.

Official answer:

There are two ways to implement the function of the editor button:

1. Add an event listener on each button element

Ideas:

    • Get editor element and Button element
    • Write event bindings once for each button
//Get editor Elementvar$editor = $ (' #editor ');/** 1, for #js-add-fontsize element Binding Click event * Change the text font in the Editor 2 px after event trigger, if the original font size is 14px, click #button1*/$(' #js-add-fontsize '). Click (function() {v $editor. CSS (' Font-size ', ' 20px ');});/** 2, for #js-CHANGE-BG element Binding Click event * Change the background color of the editor to "#6b6b6b" after the event is triggered, the text color is "#fff"*/$(' #js-change-bg '). Click (function() {$editor. css ({' Background-color ': ' #6b6b6b ',    ' Color ': ' #fff '  });});/** 3, for #js-toggle-visibility button Element binding Click event * When the event is triggered, if #editor element transparency (opactity) is greater than 0, set #editor element transparency to 1, otherwise set #edit or element transparency is 0*/$(' #js-toggle-opacity '). Click (function() {  if($editor. CSS (' opacity ') > 0{ $editor. css ( ' opacity ', 0); } Else{ $editor. css ( ' opacity ', 1); }});
2. Using the event Agent (delegate)

Ideas:

    • Get editor element and button parent element#operation
    • Delegate the button's event to the button parent element to distribute the request through the button parent element

It is necessary to understand that event delegation is an application of event bubbling, the listener and execution of the event is fully delegated to its parent node, it can reduce the number of child element binding events, and do not have to worry that the child node may need to be re-bound after being replaced. If a page contains a large number of elements that require binding events, doing so reduces the number of event bindings while improving page performance.

On event binding, JQuery provides a more general function:

On (EVENTS,[SELECTOR],[DATA],FN)

Parameters:

    • Events: One or more space-delimited event types and optional namespaces, such as "click" or "Keydown.myplugin".
    • selector[Optional]: A selector string is used for the descendant of the selector element of the filter's triggering event. If you select < null or omit, the event is always triggered when it reaches the selected element.
    • data[Optional]: Pass Event.data to the event handler when an event is triggered.
    • fn: The function that is executed when the event is triggered. A false value can also be a shorthand for a function that returns FALSE.
      Use the above function instead of the on function to implement

As shown below:

var$editor = $ (' #editor ');$(' #operation '). On (' Click ', ' button ',function() {    //gets the ID of the button    varBtnid = $ ( This). attr (' id '); Switch(Btnid) { Case' Js-add-fontsize ': $editor. CSS (' Font-size ', ' 20px ');  Break;  Case' JS-CHANGE-BG ': $editor. css ({' Background-color ': ' #6b6b6b ',          ' Color ': ' #fff '        });  Break;  Case' Js-toggle-opacity ':        if($editor. CSS (' opacity ') > 0{$editor. css (' Opacity ', 0); } Else{$editor. css (' Opacity ', 1); }    }});

Bind an event to a set of buttons--[js practice]

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.