当前位置：网站首页>JS what is an event? Event three elements and operation elements

JS what is an event? Event three elements and operation elements

2022-04-23 09:27:00 【Small white egg tart】

Events can be js Detected behavior Trigger -- Response mechanism

1. Every element in the page can generate a trigger js Events , For example, we can generate an event when the user clicks , And then do something . The drop-down list , The mouse shows ; Password hiding and displaying , By clicking on an element .

Three elements of the event （ Click a button , Pop up a dialog box ）

1. Event source The event is triggered by who Button

2. Event type How did it happen For example, click to trigger after Press the keyboard ... Mouse click

3. Event handler By function assignment , What to do Pop-up dialog box

The process of executing an event

1. Get the event source

2. The binding event （ Registration events ）

3. Add event handler （ Take the method of function assignment ）

// Get the event source 
        var div = document.getElementById('dd');
        // Registration events   The handler 
        div.onclick = function() {
            console.log(' I was chosen ');
        }

Operational elements - Modify element content

element.innerText=' What to modify ', perhaps element.innerHTML=' What to modify '

Content from start to end

1.innerText Don't recognize html label , The label inside will directly show , Nonstandard , At the same time, line breaks and spaces will be removed

2.innerHTML Most used distinguish html label W3C standard , Use more , Keep spaces and wrap 

div.innerText = '<strong> It's today </strong>2022';
       
        div.innerHTML = '<strong> It's today </strong>2022';

 

  Operational elements - Modify the attributes of an element 

<body>
    <!-- src href id alt title 
     Click different buttons to modify different pictures -->
    <button id="ldh"> Lau Andy </button>
    <button id="zxy"> Jacky Cheung </button>
    <img src="ldh.jpg" alt="" title=" Lau Andy ">
    <script>
        // Modify element properties  src
        //1. Get elements   Three elements 
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        //2. Registration events   The handler 
        zxy.onclick = function() {
            img.src = 'zy.jpg';
            img.title = ' Jacky Cheung '
        }
        ldh.onclick = function() {
            img.src = 'ldh.jpg';
            img.title = ' Lau Andy ';
        }
    </script>
</body>

Operational elements - Modify form properties

A special , Out-of-service innerHTML and innerText

<body>
    <button> Button </button>
    <input type="text" value=" Input content ">
    <!-- type value checked seleccted disabled -->
    <script>
        // Get elements 
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        //2. Registration events   The handler 
        btn.onclick = function() {
                // input.innerHTML = ' Click. ';
                //  Don't change  inner HTML It's just an ordinary box   The value in the form is through value To modify the 
                input.value = ' By clicking the ';
                // btn.disabled = true;
                this.disabled = true;
                // It points to the caller of the event function  btn
            }
            // disabled Disabled    If you want a form to be disabled   No more clicks 
    </script>
</body>

Operational elements - Modify style properties 

<script>
        var div = document.querySelector('div');
        div.onclick = function() {
            //div.style The attributes inside take the hump naming method 
            //js The modified style will be added to the inline style , So the weight is high ,
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>

Use className Modify style properties 

  var div = document.querySelector('div');
        div.onclick = function() {
            // this.style.color = '#666';
            // this.style.backgroundColor = 'pink';
            // this.style.width = '300px';
            // There are too many styles to change. It's troublesome to write   It can be used className
            div.className = 'first change';
            //  If you want to keep the previous style   Plus   Because this directly overwrites the previous class name 
        }

版权声明
本文为[Small white egg tart]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204230624114143.html

边栏推荐

猜你喜欢

随机推荐