JavaScript笔记（5）

Acrgi

于 2023-03-09 21:41:22 发布

阅读量83

点赞数

文章标签： javascript 开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/Acrgi/article/details/129418269

版权

offsetWidth/offsetHeight width/height + border + padding (眼睛能看到的实际的宽/高)

offsetTop/offsetLeft 记录眼睛能看到的实际的第一个有定位的父节点距离

三种数组遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str= [10,20,30,40,50,60];
        for(var i = 0; i < str.length; i++){
            document.write("for," + i + "," + str[i] + "<br/>");
        }

        for(var i in str){
            document.write("forin," + i + "," + str[i] + "<br/>");
        }

        str.forEach(function(item, index, str){
            document.write("forEach," + i + "," + str[i] + "<br/>");
        })
    </script>
</head>
<body>
</body>
</html>

效果

对象遍历只有一种 for in

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str= {
            name : "ws",
            age : "18",
            sex : "男"
        };
        for(var i in str){
            document.write( i + "," + str[i] + "<br/>");
        }
    </script>
</head>
<body>
</body>
</html>

效果

事件

事件类型的种类：

一.鼠标事件（可以绑定在任意的元素节点上）

click 单击

dblclick 双击

mouseover 鼠标移入（经过子节点会重复触发）

mouseout 鼠标移出（经过子节点会重复触发）

mousemove 鼠标移动（会不断触发）

mousedown 鼠析按下

mouseup 鼠标抬起

mouseenter 鼠标移入（经过子节点不会重复触发）

mouseleave 鼠标移出（经过子节点不会重复触发）

二.键盘事件（表单事件，要用全局window）

keydown 键盘按下（如果不松手会一直按）

keyup 键盘抬起

keypress 键盘按下，但是只支持字符键

三.HTML事件

window事件

load 当页面加载完以后触发

unload 当页面解构的时候触发 ie兼容

scroll 页面滚动

resize 窗口大小发生变化触发

表单事件

blur 失去焦点

foucs 获取焦点

select 在输入框中选中文本时触发

change 在输入框的文本发生修改且失去焦点的时候触发

【注意】必须添加到form元素上

submit 点击submit上的按钮才能触发

reset 点击reset上的按钮才能触发

事件绑定

元素节点.on + 事件类型 = 匿名函数

事件对象：button

button的属性

0 左键

1 滚轮

2 右键

获取当前鼠标位置：（原点位置不一样）

clientX clientY 原点位置：可视窗囗的左上为原点

pagex pageY 原点位置：整个页面的左上角（包含滚出去的滚动距离）

screenX screenY 原点位置：电脑屏幕的左上角

事件类型

mouseover 提示框显示

mouseout 提示框隐藏

mousemove 提示框跟随鼠标移动

keyCode 键码

which

返回值：键码返回的是大写字母的ASCII码值。不区分大小写。

格式：var which = e．which || e.keyCode；

【注意】只在keydown下支持。

charCode 字符码

which

返回值：字符码区分大小写，返回当前按下键对应的字符的 ASCII值

格式：var which = e.which || e.charCode

【注意】只在keypress下支持，只支持字符键

e.cancelBubble = true 取消冒泡

Acrgi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript笔记（5）

offsetWidth/offsetHeight width/height + border + padding (眼睛能看到的实际的宽/高)offsetTop/offsetLeft 记录眼睛能看到的实际的第一个有定位的父节点距离三种数组遍历效果对象遍历只有一种 for in效果。
复制链接

扫一扫