事件三要素~JS

1、事件源:哪一个标签需要发生动态改变(制作时需要获取元素改变元素和被改变元素);

2、事件类型:指对标签执行的一系列静态页面的操作行为:如:点击、悬浮、触发未弹回、触发弹回等......

3、事件处理程序:利用函数的方法去传参改变相应数值;

1、innertext改变页面内容案例(通过注册事件去改变)

 <button id="bt">现在当前的时间</button>
    <div>点击查询</div>
    <script>
        var but = document.getElementById('bt');
        var div = document.querySelector('div')
        but.onclick = function() {
            div.innerText = timeYear();
        }

        var timeYear = function getTime() {
            //系统内定的时间不需要进行传参操作
            // 实例化一个日期对象
            var time = new Date();
            var year = time.getFullYear();
            var month = time.getMonth() + 1;
            var date = time.getDate();
            //利用三目运算符进行补零操作
            var hours = time.getHours();
            var hours = hours < 10 ? '0' + hours : hours;
            var m = time.getMinutes();
            var m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            var s = s < 10 ? '0' + s : s;
            return '现在是' + year + '年' + month + '月' + date + '日   ' + hours + ':' + m + ':' + s;
        }
    </script>

同时我们也可以不用点击直接实现注册事件

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

        p.innerText = timeYear();

页面加载出来即更新…… 

JavaScript的 DOM操作元素可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性
1改变元素内容
element.innerText
从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉
elenent. innerHTML
起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行
 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值