前端--JS.2

目录

一、获取元素

二、事件基础

三、操作元素

四、节点操作

五、注册事件(绑定事件)

六、删除事件(解绑事件)

七、DOM事件流

八、事件对象

九、阻止事件冒泡

十、事件委托(代理、委派)

十一、常用的鼠标事件（了解）

十二、跟随鼠标的天使案例

十三、常用的键盘事件

---

一、获取元素

getElementByld() 方法获取带有ID的元素对象：返回的是一个元素对象

• 因为我们的文档页面从上往下加载，先得有标签，故script写到标签下面
• 方法名遵循：驼峰命名法
• 参数 id 是大小写敏感的字符串要加 ''
• console.dir() 方法打印我们返回的元素对象 更好的查看里面的属性和方法

let ol = document.getElementById('ol'); 

getElementsByTagName() 方法可以返回带有指定标签名的对象集合：返回的是获取过来元素对象的集合，以伪数组的形式储存的

• 想要依次打印元素对象可以才有 for 循环遍历
• 若页面中只有一个要获取的标签 返回的还是伪数组，若页面中没有要找的标签则返回长度为0的伪数组

// 若题目有ul,ol,li  我们想要获取ol中的li可以通过以下方式
let ol = document.getElementsByTagName('ol');
console.log(ol[0].getElementsByTagName('li'));

HTML5 新增的方法获取：
 

document.getElementsByClassName('类名');  // 根据类名返回元素对象集合</li>
document.querySelector('选择器');  // 根据指定选择器返回第一个元素对象</li>
document.querySelectorAll('选择器');  // 根据指定选择器返回所有元素对象
// 选择器需要加符号：.box(类选择器)   #nav(ID选择器)

获取 body 元素：document.body;

获取 html 元素：document.documentElement;

二、事件基础

事件是由以下三部分组成  事件三要素

• 事件源：事件被触发的对象  谁  按钮
• 事件类型：如何触发 什么事件  比如鼠标点击（onclick） 鼠标经过  键盘按下
• 事件处理程序：通过一个函数赋值的方式完成

let btn = document.getElementById('btn');
btn.onclick = function() {alert('xxx');}

三、操作元素

修改元素内容：

element.innerText ： 从起始位置到终止位置的内容，但他不识别 html 标签，同时空格和换行也会去掉

element.innerHTML ： 起始位置到终止位置的全部内容，识别 html 标签，同时保留空格和换行

元素可以不添加事件

// 现有一个p标签  
let p = document.querySelector('p');  
p.innerText = 'xxx';

修改元素属性：

假设要修改 img 中的 src 属性：

var tupian = document.getElementsByTagName('div');  // 获取元素 
var img = document.getElementsByTagName('img');
tupian.onclick = function() {img.src = '修改的src路径'}  // 注册事件 处理程序

修改表单属性：如 type , value , checked , selected , disabled

• 想要修改表单里的文字内容，是通过修改 value 属性来修改的，并不是 innerHTML
• 若想要某个表单被禁用，不能在点击 则用 disabled

我们想要按钮 button 被禁用可以使用：

btn.onclick = function() {
    btn.disabled = true;
    // 或者 this.disabled = true;  (this指向的是事件函数的调用者 btn)
}

修改样式属性：如元素的大小颜色位置等样式

行内样式操作:  element.style

JS里面的样式采取驼峰命名法，修改 style 样式操作，产生的是行内样式，css 权重比较高

function() {
    this.style.backgroundColor = 'red';
    this.style.width = '250px';
}

类名样式操作：element.className

使用 element.style 获得修改元素样式，样式比较多或者功能复杂地情况下使用，把要修改的样式单独放到一个新的类里面

funtion() {
    this.className = '新类名';  //覆盖掉原类名
    this.className = '原类名 新类名';  //保留了原类名还加了新类名
}

排他思想（算法）：

例题：现有五个按钮，需要实现的是点击哪个按钮哪个背景颜色就改变

• 所有元素全部清除样式
• 给当前元素设置样式
• 注意不能颠倒顺序

自定义属性的操作：

获取属性值：现有div盒子，有内置属性 id="demo" ，有自定义属性 index="1"

element.属性 ： 获取内置属性值（元素本身自带的属性），能获取 id 属性而不能获取 index属性

element.getAttribute('属性') ： 主要获取自定义属性 ，两个属性都能获取

设置属性值：现有div盒子，有内置属性 id="demo" ，有自定义属性 index="1"

element.属性 = "值"  ： 重新赋值

element.getAttribute('属性','值')  ： 主要针对自定义属性

移除属性：element.removeAttribute(属性)

H5自定义属性：

设置H5自定义属性：

规定自定义属性 data- 开头做为属性名并且赋值如 data-index="1"  

或者使用JS设置 element.setAttribute('data-index',2)

获取H5自定义属性：

element.getAttribute('data-index');  ：兼容性获取

element.dataset.index 或 element.dataset['index']  ： H5新增

若属性为 data-list-name 可以用 getAttribute('data-list-name') 或者 dataset.listName

四、节点操作

文本节点如回车、空格

子节点和父节点：子节点  children 获取所有的子元素节点，经常使用的，而下面这种方式比较繁琐，不经常使用。父节点  parentNode 得到最近的父级节点，找不到返回null

现有父盒子div，子盒子span ，先获取span盒子，再 .parentNode 得到父盒子 div

第一个元素和最后一个元素：以下都是取 ol 里的 li

实例：ol.fristChild  、ol.lastChild

firstChild 第一个子节点，不管是文本节点还是元素节点

lastChild 最后一个子节点，不管是文本节点还是元素节点

实例：ol.fristElementChild  、ol.lastElementChild

fristElementChild 第一个子元素节点，lastElementChild 最后一个主元素节点

实例：ol.children[0] 、 ol.children[ol.children.length-1]

实际开发中常用，且没有兼容性问题

兄弟节点：

nextSibling / previousSibling  ：下 / 上一个兄弟节点，包含元素节点或者文本节点

nextElementSibling / previousElementSibling  ：下 /上一个兄弟元素节点，没有兄弟返回null

创建节点：

let li = document.('li'); // 创建元素节点
// 添加节点：父级.appendChild(子级);  后面追加元素 类似于数组中的push
let ul = document.querySelector('ul'); 
ul.appendChild(li);
// 添加节点： 父级.insertBefore(子级，指定元素);  在指定元素前面追加元素
let lili = document.createElement('li'); 
ul.insertBefore(lili，ul.children[0]);

删除节点：父级.removeChild(子级)

复制节点：

node.cloneNode();  ：括号参数为空或为false，为浅拷贝，只复制标签不复制内容

node.clobeNode(true);  ：括号参数为true,深拷贝，复制标签复制内容

let li = ul.children[0].cloneNode(true); 
ul.appendChild(li);

五、注册事件(绑定事件)

addEventListener  ：事件监听方式，eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。

语法：eventTarget.addEventListener(type, listener[, useCapture])        

• type ：事件类型字符串，比如 click、mouseover ，注意这里不要带on
• listener ：事件处理函数，事件发生时，会调用该监听函数
• useCapture ：可选参数，是一个布尔值，默认是 false。

attachEvent（了解）：事件监听方式，eventTarget.attachEvent()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，指定的回调函数就会被执行。

语法：eventTarget.attachEvent(eventNameWithon，callback)

• eventNameWithOn ：事件类型字符串，比如onclick、onmouseover，这里要带on
• callback ：事件处理函数，当目标触发事件时回调函数被调用

六、删除事件(解绑事件)

七、DOM事件流

• 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM 事件流
• JS代码中只能执行捕获或者冒泡其中的一个阶段
• onclick 和 attachEvent 只能得到冒泡阶段
• addEventListener(type，listener[，useCapture]) 第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序;如果是 false(不写默认就是alse )，表示在事件冒泡阶段调用事件处理程序。
• 实际开发中我们很少使用事件捕获，我们更关注事件冒泡
• 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave5.

八、事件对象

eventTarget.onclick = function (event) {}
eventTarget .addEventListener('click', function(event) ())  // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt</li>

官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法

event 是个形参：系统帮我们设定为事件对象，不需要传递实参，注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）

事件对象也有兼容性问题 IE678 通过 window.event 兼容性的写法 e = e || window.event;

• 谁绑定了这个事件
• 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置
• 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键

target 与 this 区别

• e.target ：返回的是触发事件的对象(元素)，点击了哪个元素，就返回哪个元素
• this ：返回的是绑定事件的对象(元素)，哪个元素绑定了这个点击事件，就返回谁

九、阻止事件冒泡

要阻止哪个事件冒泡就在哪个事件添加

标准写法：e.stopPropagation()

非标准：e.cancelBubble = true;

十、事件委托(代理、委派)

原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

实例：给ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 ，因为点击事件会冒泡到上ul 有注册事件，就会触发事件监听器。

事件委托的作用：我们只操作了一次DOM，提高了程序的性能

十一、常用的鼠标事件（了解）

禁止鼠标右健菜单：contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document .addEventListener('contextmenu', function(e) {e.preventDefault ();})

禁止鼠标选中：selectstart 开始选中 

document.addEventlistener('selectstart', function(e) {e.preventDefault ();})

十二、跟随鼠标的天使案例

原理：      

• 鼠标不断的移动，使用鼠标移动事件：mousemove
• 在页面中移动，给 document 注册事件
• 图片要移动距离，而且不占位置，我们使用绝对定位即可
• 核心:每次鼠标移动，我们都会获得最新的鼠标坐标，把这个 x 和 y 坐标做为图片的 top 和 left 值就可以移动图片
• .mousemove 只要我们鼠标移动1px 就会触发这个事件

let pic = document .querySelector( 'img');
document.addEventListener( 'mousemove', 
    function(e) {
        var x = e .pageX;
        var y = e.pageY;
        pic.style.left = x + 'px';
        pic.style.top = y + 'px';
    })

十三、常用的键盘事件

• 键盘事件对象中的 keyCode属性可以得到相应键的 ASCII 码值
• keyup 和 keydown 事件不区分字母大小写，a 和 A 都是65
• keypress 事件区分字母大小写，a 为97，A 为65

document.addEventListener( 'keypress', function(e){console.log(e.keyCode);})