当前位置：网站首页>Web API - steps and operation elements for executing events

Web API - steps and operation elements for executing events

2022-07-16 06:07:00 【mintsolace】

Steps to execute the event
1. Get the event source 

    var div = document.querySelector('div');

2. Registration events （ The binding event ）

    div.onclick

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

    div.onclick = function (){
    
        console.log('checked');
    }

Javascript Of DOM The operation can change the content of the web page 、 Structure and pattern , You can use DOM Manipulate elements to change the contents of elements 、 Properties, etc .
1. Change element content
element.innerText： Content from start to end , But it removes html label , At the same time, spaces and line breaks are removed .
element.innerHTML： Everything from the start position to the end position , Include html label , Keep spaces and line breaks at the same time .

innerText and innerHTML difference
innerText Don't recognize html label , Nonstandard , Remove spaces and line breaks
innerHTML distinguish html label , accord with W3C standard , Keep spaces and line breaks 

        var div = document.querySelector('div');
        div.innerText = '<strong> It's today </strong>: 2020';
        div.innerHTML = '<strong> It's today </strong>: 2020';

These two properties are readable and writable , You can get the content of the element

2. Attribute operation of common elements
innerText、innerHTML Change element content
src、href
id、alt、title

       <body>
       		<button id="wyx"> Wei Yuxuan </button>
       		<button id="wxy"> Wang Xinyu </button><br>
       		<img src="images/wyx.jpg" alt="" title = "wyx">
       <script> // Modify element properties src //1. Get elements  var wyx = document.getElementById('wyx'); var wxy = document.getElementById('wxy'); var img = document.querySelector('img'); //2. Registration events   The handler  wxy.onclick = function (){
      img.src = 'images/wxy.jpg'; img.title = 'wxy' } wyx.onclick = function (){
      img.src = 'images/wyx.jpg'; img.title = 'wyx'; } </script>
       </body>

3. Attribute operations of form elements
utilize DOM You can manipulate the attributes of the following form elements ：

type、value、checked、selected、disabled

If you want a form to be disabled , No more clicks , use disabled, Put this button button Ban :

//btn.disabled = true;
this.disabled = true; //this It points to the caller of the event function

JD password box case
（1） The core idea ： Click the eye button , Change the password box type to a text box to see the password inside
（2） One button, two states , Click once , Switch to text box , Continue clicking once to switch to the password box
（3） Algorithm ： Using a flag Variable to judge flag value , If it is 1 Just switch to text box ,flag Set to 0, If it is 0 Just switch to the password box ,

        //1. Get elements 
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('eye');
        //2. Register event handlers 
        var flag = 0;
        eye.onclick = function(){
    
            // After one click ,flag Be sure to change 
            if (flag == 0){
    
                pwd.type='text';
                eye.src = 'images/open.png';
                flag=1;// Assignment operation 
            }else{
    
                pwd.type = 'password';
                eye.src = 'images/close.png';
                flag=0;
            }
        }

4. Style property operation
It can be done by JS Modify element size , Color , Position, etc
element.style: Inline style operation
element.className: Class name style operation
（1）JS The style inside adopts the hump naming method , such as fontSize、backgroundColor
（2）JS modify style Style operation , What's produced is the in line style ,css The weight is relatively high

Close Taobao QR code case 

    <div class="box">
         Taobao QR code 
        <img src = "images/tao.png" alt="">
        <i class="close-btn">x</i>
    </div>
    <script>
        //1. Get elements 
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        //2.  Register event handler 
        btn.onclick = function(){
    
            box.style.display = 'none';
        }
    </script>

The box is just hidden , Not deleted

原网站

版权声明
本文为[mintsolace]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/197/202207131733067421.html

边栏推荐

猜你喜欢

随机推荐