JavaScript 简单事件，innerText、.inner HTML、常用的元素属性操、练习案例和小结

最新推荐文章于 2023-09-15 14:00:00 发布

MDR_0820

最新推荐文章于 2023-09-15 14:00:00 发布

阅读量558

点赞数

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

本文链接：https://blog.csdn.net/MDR_0820/article/details/120869591

版权

本文介绍了JavaScript中的简单事件，如点击和鼠标经过，并展示了如何改变元素内容。重点讲解了innerText和innerHTML的区别，innerText不识别HTML标签并去除空格和换行，而innerHTML则保留HTML标签并尊重空格和换行。还提供了隐藏图片、隐藏文本框文字和密码显示的案例代码，用于实际操作元素。

摘要由CSDN通过智能技术生成

简单事件

JavaScript 使我们有能力创建动态页面而事件是可以被JavaScript侦测到的行为
网页中每个元素都可以产生某些可以触发JavaScript的事件
简单说就是：触发…响应机制

事件是由三部分组成：事件源、事件类型、事件处理程序 ，也称为事件三要素
事件源：事件被触发的对象
事件类型：怎样被触发，鼠标点击？还是鼠标经过？还是键盘按下？
事件处理程序：通过一个函数赋值的方式完成
鼠标事件

<body>
    <button id="but"> 按钮 </button>
    <div> div</div>
    <script>
        var but = document.getElementById('but')
        but.onclick = function() {
   
            alert('消失的按钮');
        }
        var div = document.querySelector('div')//获取当前选中的第一个元素
        div.onclick = function(){
   
            console.log('选中');
        }
    </script>

点击按钮会弹出对话框点击DIV 控制台会显示被选中的元素和次数
在这里插入图片描述

改变元素内容

JavaScript的DOM 操作可以改变网页内容。结果和样式我们可以利用DOM操作元素来改变元素里面的内容、属性等
代码

<body>
    <button>点击显示时间</button>
    <div>某个时间</div>
    <script>
        var but = document.querySelector('button')
        var div = document.querySelector('div')
        but.onclick =function(){
   
            div.innerText = getDate();
        }
        function getDate(){
   
        var date = new Date();
        var year = date.getFullYear();  // 返回的是年份
        var month = date.getMonth()+1;  //

最低0.47元/天解锁文章

MDR_0820

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 简单事件，innerText、.inner HTML、常用的元素属性操、练习案例和小结

简单事件JavaScript 使我们有能力创建动态页面而事件是可以被JavaScript侦测到的行为网页中每个元素都可以产生某些可以触发JavaScript的事件简单说就是：触发…响应机制事件是由三部分组成：事件源、事件类型、事件处理程序，也称为事件三要素事件源：事件被触发的对象事件类型：怎样被触发，鼠标点击？还是鼠标经过？还是键盘按下？事件处理程序：通过一个函数赋值的方式完成鼠标事件<body> <button id="but"> 按钮 &l
复制链接

扫一扫