JavaScript相关文章网页前端后台技巧(CSS+HTML)

原生js获得八种方式,事件操作

2019-12-29  本文已影响0人  大前端世界

关于js

一.原生js获得八种方式

二.事件句柄

属性 当以下情况发生时,出现此事件
onabort 图像加载被中断
onblur 元素失去焦点
onchange 用户改变域的内容
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onerror 当加载文档或图像时发生某个错误
onfocus 元素获得焦点
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onload 某个页面或图像被完成加载
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被调整尺寸
onselect 文本被选定
onsubmit 提交按钮被点击
onunload 用户退出页面

三.使用方法

1.获取单个元素

2.单个元素发送的事件

3.发生的内容相关替换

let inp = document.querySelector('input');

inp.onkeydown = function () {
    console.log('按下')
};

四.提取元素里面的内容

五.补充知识点

获取操作父标签修改子标签

比如说我们点击a类修改下面的b类

let xx = document.querySelector('.a');
xx.onclick = function () {
    this.querySelector('.b').innerHTML='点击a了;
};
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

querySelectorAll获取一组元素后我们怎么把其中的内容取出来

let xx = document.querySelectorAll('.a');
for (let i = 0; i < xx.length; i++){
    console.log(xx[i]);
}
上一篇 下一篇

猜你喜欢

热点阅读