JavaScript-DOM之事件

最新推荐文章于 2022-10-28 08:49:54 发布

Mao.O

最新推荐文章于 2022-10-28 08:49:54 发布

阅读量495

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_60155232/article/details/126933332

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

事件三要素

常见的鼠标点击事件

修改元素内容innerText、innerHTML

JavaScript使我们有能力创建动态页面，而事件是可以被JS侦测到的行为。

例如：我们声明一个按钮，当用户点击时就会产生点击事件，我们通过对事件的处理，就会对页面产生一些效果。

事件三要素

三要素：事件源、事件类型、事件处理程序。


<button>点我</button>
<script>
   var button = document.querySelector('button');
   button.onclick = function(){
      alert("hi")
   }
</script>

事件源：button标签
事件类型：onclick 点击事件
事件处理程序：function(){ 处理程序体 }

常见的鼠标点击事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点
onblur	失去鼠标焦点
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

修改元素内容innerText、innerHTML

element.innerText

编写元素内容时拒用html标签，同时空格也和换行也会去掉，只识别文本。

element.innerHTML

编写元素内容时可以使用html标签，同时保留空格和换行。

两者都是可读写的

两者基本使用

<h1>h1</h1>
<h2>h2</h2>
    <script>
      var t = document.querySelector('h1');
      t.innerText = 'innerText';
      var h = document.querySelector('h2');
      h.innerHTML = 'innerHTML'; 
    </script>

两者不同之处

    <span class="span1"></span><br>
    <span class="span2"></span>
    <script>
      var t = document.querySelector('.span1');
        //innerText:不识别内部标签写法
      t.innerText = '<strong>innerText</strong>  tab';  

      var h = document.querySelector('.span2');
        //innerText:可以识别内部标签写法
      h.innerHTML = '<strong>innerText</strong>'; 
    </script>

效果

修改表单元素属性

DOM可以操作表单属性：type,value,checked,selected,disabled

    <div>点击</div>
    <input type="button" id="button" value="点击">
    <script>
        var div = document.querySelector('div');
        div.onclick = function(){
            div.innerHTML = '被点击了'
        }

        var button = document.querySelector('#button')
        button.onclick = function(){
            // button.innerHTML = '被点击了'; //此方式没有效果
        button.value  = '被点击了'; //表单元素特有的方式

        this.disabled = true;//点击后禁用
        }
    </script>

效果

修改元素样式

通过JS可以修改元素的大小，颜色，位置等样式。

element.style 行内样式操作

    <div>点击</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(){
           div.style.background = 'lightpink';//点击后改变背景颜色
           div.style.width = '70px';//点击后宽度变为70px
        }
    </script>

效果

element.className 类名样式操作

<style> 
.sty{
   background-color: lightpink;
   width: 70px;
 }
</style>    
    <div>点击</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(){
            this.className = 'sty';//将div元素赋予类sty
        }
    </script>

浏览器元素检测，效果与上边一样。

说明：

若想保留之前类名，可以选择多类名书写方式

this.clasaName = ‘name1 name2 ’ ; //赋予元素多个类

事件：得到焦点和失去焦点

    <input type="text">
    <script>
        //得到焦点和失去焦点
        var input = document.querySelector('input');
        input.onfocus = function(){
            console.log('获得了焦点');//点击文本框
        }
        input.onblur = function(){
            console.log('失去了焦点');//点击外面，光标消失
        }
    </script>

显示和隐藏文本框内容

--->

需求：点击后，文本框内容：'手机'隐藏。

    <input type="text" value='手机'>
    <script>
        var text = document.querySelector('input');
        //获得焦点事件：onfocus
        text.onfocus = function(){
            if(this.value === '手机'){
                this.value = '';
            }
            this.style.color = '#333';           
        }
        //失去焦点事件：onblur
        text.onblur = function(){
            if(this.value === ''){
                this.value = '手机';
            }
            this.style.color = '#999';
        }
    </script>

排他思想

需求：点击某个盒子，当前盒子变色，其他为原样式。

--->

    <div class="init"></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        var divs = document.querySelectorAll('div')//返回伪数组
        for(var i = 0 ; i < divs.length; i++){
            divs[i].onclick = function(){
                divs[0].className = "";
                for(var j = 0 ; j < divs.length;j++){
                divs[j].style.background = '';
                }
                this.style.background = 'lightpink';  
            }  
        }
    </script>

事件：鼠标经过和鼠标离开

--->

    <div class="init"></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        var divs = document.querySelectorAll('div')//返回伪数组
        for(var i = 0 ; i < divs.length; i++){
            divs[i].onmousemove = function(){
                divs[0].className = "";
                for(var j = 0 ; j < divs.length;j++){
                divs[j].style.background = '';
                }
                this.style.background = 'lightpink';  
            }  
        }
    </script>