Summary of basic knowledge points of DOM-DOM events

Every element in a web page can generate certain events that can trigger JavaScript. For example, we can generate an event when a button is clicked, and then perform certain operations.

2. Composition

The event is composed of three parts: the event source, the event type, and the event handler, which we also call the three elements of the event.

(1) Event source: the object whose event is triggered button

(2) Event type: how to trigger what time such as mouse click (onclick) or keyboard press

(3) The event handler is completed by a function assignment

Code display: Click the button Tang Bohu pops up a warning box click Qiuxiang

<!-- (1)事件源：事件被触发的对象 谁  按钮 -->
   <button id="btn">唐伯虎</button>
   <script>
        // (2)事件类型：如何触发 什么时间 比如鼠标点击(onclick) 还是键盘按下
       var btn = document.getElementById('btn')
       //(3)事件处理程序 通过一个函数赋值的方式 完成
       btn.onclick = function(){
           alert('点秋香')
       }

The result display:

2. The execution process of the event

1. Get the event source

2. Registration event (binding event)

3. Add an event handler (in the form of function assignment)

Code display: click div console output I was selected

<div>123</div>
    <script>
        // 执行事件步骤
        //1、获取事件源
        var div = document.querySelector('div')
        // 2、绑定事件 注册时间
        div.onclick
        // 3、添加时间处理程序
        div.onclick = function() {
            console.log('我被选中了');
        }
    </script>
<div class="lyr">

The result display:

3. Operating elements

The DOM operation of JavaScript can change the content, structure and style of the web page. We can use the DOM operation element to change the content and attributes of the element page. Note that the following are attributes

1. Change the content of the element

（1） element.innerText

The content from the start position to the end position, but it removes the html tag, and the red line and line break are also removed

(2) element.innerHTML

All content from the start position to the end position, including html tags, while preserving spaces and newlines

2. The difference between innerText and innerHTML

(1) innerText does not recognize html tags (non-standard) to remove spaces and newlines

(2) innerHTML recognizes html tags (W3C standard) and retains spaces and newlines

Fourth, modify the attributes of the element - src, title

Code display:

<body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button>
    <img src="../img/刘德华.jpg" alt="" title="刘德华">
    <script>
        // 1、获取元素
        var ldh = document.getElementById('ldh')
        var zxy = document.getElementById('zxy')
        var img = document.querySelector('img')
        //2.点击事件 处理程序
        zxy.onclick = function(){
            img.src = '../img/张学友.jpg';
            img.title = '张学友好帅'
        }
        ldh.onclick = function(){
            img.src = '../img/刘德华.jpg';
            img.title = '刘德华'
        }
    </script>
</body>

The result display:

5. Attribute operation of form elements —— value

Code display:

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        //1.获取元素
        var btn = document.querySelector('button')
        var input = document.querySelector('input')
        //2.注册时间    处理程序
        btn.onclick = function(){
            // 表单里面的值，是根据value来修改的
            input.value = '你点我干什么!!!'
            //如果想要某个表单被禁用 不再被点击 disabled 我们想要这个按钮被禁用 button
            // btn.disabled = true
            this.disabled = true 
            //this指的是事件函数的调用者
        }
    </script>
</body>

The result display:

6. Style attribute operation

1. Through style - inline style operation

Code display:

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: pink;
    }

</style>
<body>
    <div ></div>
    <script>
        //1、获取事件
        var div = document.querySelector('div')
        //2、注册事件   处理程序
        div.onclick = function (){
            //div 里面的属性采取驼峰命名法
            this.style.backgroundColor = 'purple';
            this.style.width = '400px'
        }
    </script>
    </body>

The result display:

2. Through element.className - class name operation style

 <style>
    div{
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .change{
        background-color: purple;
        color: #fff;
        font-size: 25px;
        margin-top: 100px;
    }
</style>       
var test = document.querySelector('div');
    test.onclick = function() {
    //让我们当前的类名改成了 change
    // this.className = 'change';
    //如果想要保留原先的类名 我们可以这么做 (多类名选择器)
    this.className = 'first change';
}

The result display:

Notice:

1. If there are many style modifications , you can use the class name operation method to change the element style

2. Because class is a reserved word, use className to operate the element class name attribute

3. className will directly change the class name of the element and overwrite the original class name

Today's content is shared here, thank you for watching, if you have any comments, you can comment, and you will reply one by one.

——Young Ling Yunzhi, who was once the best in the world