前端学习第六天-CSDN博客

本文链接：https://blog.csdn.net/weixin_74113429/article/details/141904966

一、CSS操作

HTML元素的style属性

操作CSS样式最简单的方法，就是使用网页元素节点的setAttribute方法直接操作网页元素的style属性；

//传入的参数，第一个是要选择加入的属性，第二个是属性的值
div.setAttribute(
    'style',
    'background-color:red;'+'border:1px solid black;'
);

元素节点的style属性

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

divStyle.backgroundColor = 'red';
divStyle.border = '1px solid black';
divStyle.width = '100px';
divStyle.height = '100px';
divStyle.fontSize = '10em';

cssText属性

div.style.cssText = "width:200px; height:200px;";

二、事件处理程序

事件处理程序分为：

HTML事件处理
DOM0级事件处理
DOM2级事件处理

HTML事件

<body>
    <button onClick="clickHandle()">按钮</button>
    <script>
        function clickHandle(){
            console.log("点击了按钮");
        }
    </script>
</body>

DOM0级事件

<body>
    <button id="btn1">按钮</button>
    <script>
        var btn1=document.getElementById("btn1");
        btn1.onclick=function(){alert("Hello DOM0级事件处理程序1");}
    </script>
</body>

HTML事件：缺点：HTML和JS没有分开

DOM2级事件

<body>
    <button id="btn1">按钮</button>
    <script>
        var btn1=document.getElementById("btn1");
        btn1.addEventListener("click",function(){
            console.log("点击了");
        })
    </script>
</body>

DOM事件：优点：HTML和JS是分离的；缺点：无法同时添加多个事件

DOM2：事件不会被覆盖，但写起来麻烦

三、事件类型之鼠标事件

鼠标具体事件

click：按下鼠标时触发
dbclick：在同一个元素上双击鼠标时触发
mousedown：按下鼠标键时触发
mouseup：释放按下的鼠标键时触发
mousemove：当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连触发。
mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件
mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件
mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件
wheel：滚动鼠标的滚轮时触发

四、Event事件对象

事件发生以后，会产生一个事件对象，作为参数传给监听函数

var btn = document.getElementById("btn");
//Event事件对象 其实就是参数
btn.oonclick = function(event){
    console.log(e);
}

Event.target

返回事件当前所在的节点

点击谁就打印出来谁

var btn = document.getElementById("btn");
//Event事件对象 其实就是参数
btn.oonclick = function(event){
    console.log(event.target);
}

Event.type

返回的是事件类型

Event.preventDefault()

该方法取消浏览器对当前事件的默认行为。比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了

btn.onclick = function(e){
    e.preventDefault();//阻止默认事件
    console.log("点击A标签");
}

Event.stopPropagation()

阻止事件在DOM中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他事件监听函数

btn.onclick = function(e){
    e.stopPropagation();//阻止事件冒泡
    console.log("btn");
}

五、键盘事件

键盘事件主要有keydown、keypress、keyup三个事件

keydown：按下键盘时触发
keypress：按下有值的键时触发，即按下Ctrl、Alt、Shift、Meta这样无值的键，这个事件就不会触发，对于有值的键，按下时先触发keydown事件，再触发这个事件。
keyup：松开键盘时触发该事件

应用时要在前面加上on

event对象

keyCode：唯一标识

var username = document.getElementById("username");
username.onkeydown = function(e){
    if(e.keyCode == 13){
        console.log("回车");
    }
}

六、表单事件

表单事件是在使用表单元素及输入框元素可以监听的一系列事件

input
select
Change
reset
submit

input事件

当<input>、<select>、<textarea>的值发生变化时触发。对于复选框或单选框，用户改变选项时，也会触发这个事件

input事件的一个特点：会连续触发，比如用户每按下一次按键，就会触发一次input事件

var username = document.getElementById("username");
username.oninput = function(e){
    console.log(e.target.value);
}

select事件

当在<input>、<textarea>里面选中文本时触发

//HTML代码如下
// <input id="test" type="text" value="Select me!">

var elem = document.getElementById('test');
elem.addEventListener('select',function(e){
    console.log(e.type);
},false);

Change事件

当<input>、<select>、<textarea>的值发生变化时触发。它与input事件最大不同，就是不会连续触发，只有当全部修改完成时才会触发，点击回车才会触发

var email = document.getElementById("email");
email.onchange = function(e){
    console.log(e.target.value);
}

reset事件，submit事件

这两个事件发生在表单对象<form>上，而不是发生在表单成员上。

reset事件当表单重置（所有表单成员变回默认值）时触发

submit事件当表单数据向服务器提交时触发。注意，submit事件的发生对象是<form>元素，而不是<button>元素，因为提交的是表单，而不是按钮

<form action="服务器地址" id="myForm" onsubmit="submitHandle">
    <button onclick="resetHandle">重置数据</button>
    <button>提交</button>
</form>

var myForm = document.getElementById("myForm");
function resetHandle(){
    myForm.reset();
}
function submitHandle(){
    console.log("提交");
}

七、事件代理

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理

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

ul.addEventListener('click',function(event){
    if(event.target.tagname.toLowerCase() === 'li'){
        //some code
    }
});

八、定时器

setTimeout（）

JavaScript提供定时执行代码的功能，叫做定时器，主要由setTimeout()和setInterval()这两个函数来完成，他们向任务队列添加定时任务。

setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

var timerId = setTimeout(func|code,delay);

setTimeout函数接受两个参数，第一个参数 func|code是将要推迟执行的函数名或者一段代码，第二个参数delay是推迟执行的毫秒数

setTimeout(function(){
    console.log(定时器);
},1000)

定时器可以取消：

var id = setTimeout(f,1000);
clearTimeout(id);

setInterval

与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行

通过setInterval方法实现网页动画