dom元素

最新推荐文章于 2024-08-02 08:30:00 发布

三岁

最新推荐文章于 2024-08-02 08:30:00 发布

阅读量120

点赞数

本文链接：https://blog.csdn.net/weixin_44859744/article/details/90442649

版权

一.dom元素的事件

1. 键盘事件

onkeydown键盘按下
onkeyup键盘抬起
onkeypress按键事件

2. 标单事件

onfocus获得焦点
onblur失去焦点

3. 鼠标事件

onclick单击 ondbclick 双击
onmouseleave水平离开onmouseout离开
onmousemove 鼠标移动
onmouseenter 鼠标进入
onmouseover 鼠标悬停）
onmousewheel 鼠标滚轮事件

4. 浏览器事件（ window事件）

onload 加载完成事件
onresize 窗口变化事件
onerror 报错事件
onscroll 滑动事件

5.触屏事件

touch 触屏
touchstart 开始触屏
touchmove 触屏移动
touchend 触屏结束

二. js里dom元素的操作

1. getElementsByClassName 返回集合

var btn=document.getElementsByClassName("btnlist");
console.log(btn[0]);

2.getElementsByName 返回的是nodelist 类型用法和数组一致

var btn1=document.getElementsByName("btninfo");
console.log(btn1[0]);

3.getElementById　返回的是单个对象直接使用

var btn2=document.getElementById("btn");
console.log(btn2);

4. getElementsByTagName 返回的是htmlcollection 集合用法和数组一致

var btn3=document.getElementsByTagName("button");
console.log(btn3[0]

5.querySelector和 querySelectorAll选取

var btn4=document.querySelector(".btnlist");可以选中btnlist的一个dom元素
console.log(btn4); 
var btn5=document.querySelectorAll(".btnlist");可以选取页面上所有的。btnlist的dom元素
console.log(btn5);

三. 如何给dom元素添加事件

1.常规添加，之间在标签上添加

 <body>
       <button onclick="btndou(1)">按钮</button>
 </body>

2.动态给dom添加事件

var btn = document.getElementById("btn");
btn.onclick = function () {
    console.log(1);
}
btn.onclick = showinfo;不能添加小括号
function showinfo() {
    console.log(1);
}

3.事件的监听

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

btn2.addEventListener("click",function (){
 console.log(2);
 });
 
btn2.addEventListener("click", showbtn);
function showbtn() {
    console.log(2);
}

三岁

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
dom元素

一.dom元素的事件1. 键盘事件onkeydown键盘按下onkeyup键盘抬起onkeypress按键事件2. 标单事件onfocus获得焦点onblur失去焦点3. 鼠标事件onclick单击 ondbclick 双击onmouseleave水平离开onmouseout离开onmousemove 鼠标移动onmouseenter 鼠标...
复制链接

扫一扫