JS学习（三）

Sunshine.唯心

已于 2024-03-15 16:48:10 修改

阅读量768

点赞数 20

分类专栏： Javascript 文章标签： javascript 学习开发语言前端

于 2024-03-12 11:13:53 首次发布

本文链接：https://blog.csdn.net/qq_69240236/article/details/136645778

版权

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript事件DOM定时器

事件

事件是JavaScript浏览器API中非常重要的一个部分。它封装了用户和浏览器的所有交互行为。我们只需给我们感兴趣的事件句柄绑定一个自定义的处理函数，就可以在用户触发指定操作时，执行我们事先绑定好的自定义函数。

绑定事件

示例：

html代码：

<button id="btn">按钮</button>

JavaScript代码：

// 方式一：
// 给按钮绑定点击事件
var btn = document.getElementById("btn");

btn.onclick = function() {

    alert('您点击了按钮');

}

// 给文档对象绑定加载完成事件
document.onload = function() {
    console.log('当前页面已经加载完毕');
}

// 方式二：推荐用法

// 给按钮绑定点击事件

var btn = document.getElementById("btn");

btn.addEventLisener('click', function() {

    alert('您点击了按钮');

});

// 方式三： 不推荐

<button id="btn" onclick="xxxx();"></button>

JavaScript浏览器API中给我们提供的事件句柄非常丰富，下面是一个汇总表：

事件句柄类型

属性	此事件发生在何时...
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmouseup	鼠标按键被松开。
onmousemove	鼠标被移动。
onmouseenter	鼠标移到某元素之上
onmouseleave	鼠标从某元素上移开
onmouseover	鼠标移到某元素之上（或移到其子元素上）。
onmouseout	鼠标从某元素移开（或移到其子元素上）。
oncontextmenu	鼠标右键事件（右键菜单显示前触发）
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

鼠标、键盘事件属性

属性	描述
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。（相对于窗口左上角，不计算滚动条）
clientY	返回当事件被触发时，鼠标指针的垂直坐标。（相对于窗口左上角，不计算滚动条）
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。（相对于屏幕左上角）
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。（相对于屏幕左上角）
pageX	返回当某个事件被触发时，鼠标指针的水平坐标。（相对于文档左上角，计算滚动条）
pageY	返回当某个事件被触发时，鼠标指针的垂直坐标。（相对于文档左上角，计算滚动条）
metaKey	返回当事件被触发时，"meta" 键是否被按下。
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按下。
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下。
altKey	返回当事件被触发时，"ALT" 是否被按下。
key	按键名称，如： k (按下键盘上的K)
code	按键代码，如：KeyD (按下键盘上的K)
keyCode （已废弃）	按键对应的数值码，如：68 (按下键盘上的K)

案例一获取用户按的是哪个键

window.onkeydown = function(e) {

    console.log('code: ' + e.code);  // 获取用户按下键的code值： 如KeyA、keyD

    console.log('key: ' + e.key);  // 获取用户按下键的名称：如a、d、A、D

}

案例二获取用户鼠标点击位置的坐标

window.onmousemove = function(e) {

    console.log('鼠标当前位置: ' + e.screenX+','+e.screenY);  

    // 获取用户鼠标当前在屏幕上的绝对坐标
}

标准 Event 属性

属性	描述
bubbles	返回布尔值，指示事件是否是冒泡事件类型。
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget	返回其事件监听器触发该事件的元素。
eventPhase	返回事件传播的当前阶段。
target	返回触发此事件的元素（事件的目标节点）。
timeStamp	返回事件生成的日期和时间。
type	返回当前 Event 对象表示的事件的名称。

案例发生事件的DOM元素和发生的事件类型

<button id="tt">测试按钮</button>

document.querySelector("#tt").onclick = function(e){

    console.log(this);    //获取事件的元素

    console.log(e.target);   //获取发生事件的元素

    console.log('发生了'+e.type+'事件');    //指明元素发生了什么事件

}

标准 Event 方法

方法	描述
initEvent()	初始化新创建的 Event 对象的属性。
preventDefault()	通知浏览器不要执行与事件关联的默认动作。
stopPropagation()	不再派发事件。

DOM操作

什么是DOM？

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

常用的DOM操作API

document.getElementById(id) 按照标签的id属性值获取dom对象，返回单个
document.getElementsByTagName(name) 按照标签名称获取dom对象，返回dom数组
document.querySelector(cssSelector) 按照css选择器获取dom对象，返回单个
document.querySelectorAll(cssSelector) 按照css选择器获取dom对象，返回dom数组
document.createElement(name) 创建DOM元素
parentNode.appendChild(node) 将元素添加到父元素中
element.innerHTML 设置标签内容
element.style.left 设置样式属性值
element.setAttribute() 设置属性值
element.getAttribute() 获取属性值
element.addEventListener() 绑定事件处理函数
window.scrollTo() 滚动窗口

案例一表单验证

需求：提供一个用户注册表单，有用户名、密码、重复密码、常用住址几项内容，当文本框失去焦点后，用户输入的内容进行校验，校验规则如下：

用户名不能为空，长度不能少于5位
密码不能为空
重复密码必须和密码一致

案例二点亮熄灭灯泡

需求：实现如下效果，点击点亮的时候开灯，点击关闭的时候关灯

分析：可以分别准备开灯和关灯两张图片，当点击点亮时，将img的src指向开灯的图片，关闭时指向关灯的图片。

定时器

JavaScript中的定时器有两个：setInterval()和setTimeout()

setInterval()

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法：

setInterval(code,millisec)

示例：

用定时器实现时钟效果

<html>
    <body>
        <form>
            <input type="text" id="clock" size="35" />
            <button onclick="stop()">停止</button>
        </form>
    </body>
    <script type="text/javascript">
        function clock(){
            var now=new Date();
            document.getElementById("clock").value=now;
        }
        
        // 开启计时器，50毫秒刷新一次时间
        var timerId = self.setInterval("clock()",50); 
        
        // 停止计时器
        function stop() {
            clearInterval(timerId);
        }
    </script>
</html>

setTimeout()

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

语法：

setTimeout(code,millisec);

示例：

function test() {
   alert('5 seconds!'); 
}
var timerId = setTimeout(test,5000);  // 延时5秒弹窗

// 如果想取消定时任务
clearTimeout(timerId);

setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

Sunshine.唯心

关注

20
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
JS学习（三）

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。
复制链接

扫一扫