WebAPI---DOM

最新推荐文章于 2023-03-14 11:36:10 发布

valentinelzt

最新推荐文章于 2023-03-14 11:36:10 发布

阅读量138

点赞数

分类专栏： Notes

本文链接：https://blog.csdn.net/valentinelzt/article/details/105353319

版权

Notes 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

获取元素的方法

根据ID获取

语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象或 null

<body>
    <div id="time">2019-9-9</div>
    <script>
        // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>

根据标签名获取

语法：document.getElementsByTagName(‘标签名’) 或者 element.getElementsByTagName(‘标签名’)
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）操作里面的元素需要遍历

<body>
    <ul>
        <li>知否知否，应是等你好久11</li>
        <li>知否知否，应是等你好久22</li>
        <li>知否知否，应是等你好久33</li>
        <li>知否知否，应是等你好久44</li>
        <li>知否知否，应是等你好久55</li>
    </ul>
    <ul id="nav">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ul>
    <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3. element.getElementsByTagName()  可以得到这个元素里面的某些标签
        var nav = document.getElementById('nav'); // 这个获得nav 元素
        var navLis = nav.getElementsByTagName('li');
        console.log(navLis);
    </script>
</body>

h5新增获取元素的方式

document.getElementByClassName('类名');  //根据类名返回元素对象集合
document.querySelector('选择器');  // 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器');  // 根据指定选择器返回

querySelector和querySelectorAll里面的选择器需要加符号

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>
</body>

获取body和html元素

document.body; 	//返回body元素对象
document.documentElement;   //返回html元素对象

事件

事件三要素

事件源（谁）：触发事件的元素
事件类型（什么事件）：例如 click 点击事件
事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

<body>
    <button id="btn">唐伯虎</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
        //(1) 事件源 事件被触发的对象   谁  按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        //(3) 事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function() {
            alert('点秋香');
        }
    </script>
</body>

执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采用函数赋值的形式）

<body>
    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div 控制台输出 我被选中了
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2.绑定事件 注册事件
        // div.onclick 
        // 3.添加事件处理程序 
        div.onclick = function() {
            console.log('我被选中了');
        }
    </script>
</body>

鼠标事件

事件类型	触发条件
`onclick`	鼠标点击左键触发
`onmouseover`	鼠标经过触发
`onmouseout`	鼠标离开触发
`onfocus`	获取鼠标焦点触发
`onblur`	失去鼠标焦点触发
`onmousemove`	鼠标移动触发
`onmouseup`	鼠标弹起触发
`onmousedown`	鼠标按下触发

改变元素内容（innerText&innerHTML）

element.innerText	//从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会被去掉
element.innerHTML	//起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

innerText和innerHTML的区别

获取内容时的区别：
innerText会去除空格和换行，而innerHTML会保留空格和换行
设置内容时的区别：
innerText不会识别html，而innerHTML会识别

排他思想

所有元素全部清除样式
给当前元素设置样式

// 1. 获取所有按钮元素
var btns = document.getElementsByTagName('button');
// btns得到的是伪数组  里面的每一个元素 btns[i]
for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
        for (var i = 0; i < btns.length; i++) {
            btns[i].style.backgroundColor = '';
        }
        // (2) 然后才让当前的元素背景颜色为pink 留下我自己
        this.style.backgroundColor = 'pink';

    }
}

自定义属性操作

获取属性值

element.属性 获取属性值
element.getAttribute(‘属性’);

区别：
element.属性 获取的是元素本身自带的属性
element.getAttribute(‘属性’); 主要是获取自定义的属性

设置属性值

element.属性='值'
element.setAttribute('属性', '值')

区别：
element.属性='值'设置内置属性值
element.setAttribute('属性', '值') 主要设置自定义的属性值

移除属性

// class 不是className
// 3 移除属性 removeAttribute(属性)    
div.removeAttribute('index');

h5自定义属性

设置h5自定义属性

h5规定自定义属性以data-开头作为属性名并且赋值

<div data-index="1"></div>
或者使用js设置
element.setAttribute('data-index', 2)

获取h5自定义属性

兼容性获取
element.getAttribute('data-index');
//h5新增
element.dataset.index  或者  element.sataset['index']   //ie11才开始支持


<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
    var div = document.querySelector('div');
    // console.log(div.getTime);
    console.log(div.getAttribute('getTime'));
    div.setAttribute('data-time', 20);
    console.log(div.getAttribute('data-index'));
    console.log(div.getAttribute('data-list-name'));
    // h5新增的获取自定义属性的方法 它只能获取data-开头的
    // dataset 是一个集合里面存放了所有以data开头的自定义属性
    console.log(div.dataset);
    console.log(div.dataset.index);
    console.log(div.dataset['index']);
    // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
    console.log(div.dataset.listName);
    console.log(div.dataset['listName']);
</script>

节点操作

网页中所有内容都是节点(标签、属性、文本、注释等)，在DOM中，节点使用node来表示
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
一般地，节点至少拥有nodeType（节点类型）、**nodeName（节点名称）和nodeValue（节点值）**这三个基本属性。

元素节点nodeType 为 1
属性节点nodeType 为 2
文本节点nodeType 为 3
在实际开发中，节点操作主要操作的是元素节点

父级节点`node.parentNode`

parentNode属性可返回某节点的父节点（最近的一个父节点）
如果指定的节点没有父节点则返回null

<div class="demo">
   <div class="box">
       <span class="erweima">×</span>
   </div>
</div>
<script>
   // 1. 父节点 parentNode
   var erweima = document.querySelector('.erweima');
   // var box = document.querySelector('.box');
   // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
   console.log(erweima.parentNode);
</script>

子节点

所有子节点

parentNode.childNodes(标准)

parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合

返回值里面包含了所有的子节点，包括元素节点、文本节点
如果向获取里面的元素节点，则需要专门处理，所以一般不推荐使用childNodes

子元素节点（重点）

parentNode.children(非标准)

parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不反回

<ul>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
</ul>
<script>
    // DOM 提供的方法（API）获取
    var ul = document.querySelector('ul');
    var lis = ul.querySelectorAll('li');
    // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
    console.log(ul.childNodes);
    console.log(ul.childNodes[0].nodeType);
    console.log(ul.childNodes[1].nodeType);
    // 2. children 获取所有的子元素节点 也是我们实际开发常用的
    console.log(ul.children);
</script>

第一个子节点`parent.firstChild`

parent.firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点

最后一个子节点`parent.lastChild`

parent.lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点

第一个子元素节点`parent.firsteElementChild`

parent.firsteElementChild返回第一个子元素节点，找不到则返回null

ie9以上版本支持

最后一个子元素节点`parent.lastElementChild`

parent.lastElementChild返回最后一个子元素节点，找不到则返回null

ie9以上版本支持

获取第一个子节点与最后一个子节点的最佳办法

// 获取第一个子元素节点
parentNode.children[0]
// 获取最后一个子元素节点
parentNode.children[parentNode.children.length - 1]

<ol>
    <li>我是li1</li>
    <li>我是li2</li>
    <li>我是li3</li>
    <li>我是li4</li>
    <li>我是li5</li>
</ol>
<script>
    var ol = document.querySelector('ol');
    // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
    console.log(ol.firstChild);
    console.log(ol.lastChild);
    // 2. firstElementChild 返回第一个子元素节点 ie9才支持
    console.log(ol.firstElementChild);
    console.log(ol.lastElementChild);
    // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
    console.log(ol.children[0]);
    console.log(ol.children[ol.children.length - 1]);
</script>

创建节点

// document.createElement()方法创建由tagName指定的html元素。因为这些元素事先不存在，是根据需求动态生成，多以也成为动态创建元素节点
document.createElement('tagName')

添加节点

//该方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素
node.appendChild(child)

//该方法将一个节点添加到父节点的指定子节点前面，类似于css里面的before伪元素
node.insertBefore(child, 指定元素)

<ul>
    <li>123</li>
</ul>
<script>
    // 1. 创建节点元素节点
    var li = document.createElement('li');
    // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素
    var ul = document.querySelector('ul');
    ul.appendChild(li);
    // 3. 添加节点 node.insertBefore(child, 指定元素);
    var lili = document.createElement('li');
    ul.insertBefore(lili, ul.children[0]);
    // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
</script>

删除节点

// 方法从nide系欸但中删除一个子节点，返回删除的节点
node.removeChild()

<button>删除</button>
<ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>光头强</li>
</ul>
<script>
    // 1.获取元素
    var ul = document.querySelector('ul');
    var btn = document.querySelector('button');
    // 2. 删除元素  node.removeChild(child)
    // ul.removeChild(ul.children[0]);
    // 3. 点击按钮依次删除里面的孩子
    btn.onclick = function() {
        if (ul.children.length == 0) {
            this.disabled = true;
        } else {
            ul.removeChild(ul.children[0]);
        }
    }
</script>

克隆节点

// 该方法返回调用该方法节点的一个副本，也成为克隆节点/拷贝节点
node.cloneNode()

注意：
如果括号参数为空或者false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
如果括号参数为false，则是深拷贝，会复制节点本身以及里面所有的子节点

<ul>
    <li>1111</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
    // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
    var lili = ul.children[0].cloneNode(true);
    ul.appendChild(lili);
</script>

创建元素三种方式

document.write()
element.innerHTML
document.createElement()

document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
createElement()创建多个元素效率稍微低一点，但是结构更清晰

innerHTML创建多个元素效率更高（不用拼接字符串，采用数组形式拼接），结构稍微复杂

注意：
不同浏览器下，innerHTML效率要比createElement高

// 三种创建元素方式区别 
// 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
 var btn = document.querySelector('button');
 btn.onclick = function() {
     document.write('<div>123</div>');
 }

// 2. innerHTML 创建元素
var inner = document.querySelector('.inner');
 for (var i = 0; i <= 100; i++) {
     inner.innerHTML += '<a href="#">百度</a>'
 }
------------效率高--------------
var arr = [];
for (var i = 0; i <= 100; i++) {
    arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');
---------------------------
// 3. document.createElement() 创建元素
var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++) {
    var a = document.createElement('a');
    create.appendChild(a);
}

总结

针对DOM元素的增、删、改、查操作
增加
- appendChild
- insertBefore
删除
- removeChild
修改
- 修改元素属性：src、href、title
- 修改普通元素内容：innerHTML、innerText
- 修改表单元素：value、type、disabled
- 修改元素样式：style、className
查
- DOM提供API方法：getElementById、getElementByTagName（不推荐)
- H5提供的新方法：querySelector、getSelectorAll（提倡）
- 利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling)（提倡）
属性操作
- setAttribute：设置DOM的属性值
- getAttribute：得到DOM的属性值
- removeAttribute：移除属性

注册事件（重要）

传统注册

利用on开头的事件onclick
注册事件唯一性质
同一元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

监听注册（推荐）

使用addEventListener()注册事件
IE9以上支持，IE9以下版本可使用attachEvent()代替
同一元素同一事件可以注册多个监听器，并按注册顺序依次执行

事件监听`addEventListener()`

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
写法：
eventTarget.addEventListener(type, listen[, useCapture])
该方法接收三个参数：
type：事件类型字符串，比如click、mouseover、注意这里不要带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默忍是false
attacheEvent()事件监听（IE678支持）

<button>传统注册事件</button>
<button>方法监听注册事件</button>
<button>ie9 attachEvent</button>
<script>
    var btns = document.querySelectorAll('button');
    // 1. 传统方式注册事件
    btns[0].onclick = function() {
        alert('hi');
    }
    btns[0].onclick = function() {
            alert('hao a u');
        }
   // 2. 事件侦听注册事件 addEventListener 
   // (1) 里面的事件类型是字符串 必定加引号 而且不带on
   // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
    btns[1].addEventListener('click', function() {
        alert(22);
    })
    btns[1].addEventListener('click', function() {
            alert(33);
    })
    // 3. attachEvent ie9以前的版本支持
    btns[2].attachEvent('onclick', function() {
        alert(11);
    })
</script>

事件监听兼容性解决方案

function addEventListener(element, eventName, fn) {
  // 判断当前浏览器是否支持addEventListener方法
  if (element.addEventListener) {
    element.addEventListener(eventName, fn); // 第三个参数默认是false
  } else if (element.attachEvent) {
    element.attachEvent("on" + eventName, fn);
  } else {
    element["on" + eventName] = fn;
  }
}

删除事件

// 传统删除
eventTarget.onclick = null;

// 方法监听注册方式
eventTarget.removeEventListener(type, listener[,useCapture])
eventTarget.detachEvent(eventNameWithOn, callback)

<div>1</div>
<div>2</div>
<div>3</div>
<script>
    var divs = document.querySelectorAll('div');
    divs[0].onclick = function() {
        alert(11);
        // 1. 传统方式删除事件
        divs[0].onclick = null;
    }
    // 2. removeEventListener 删除事件
    divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
    function fn() {
        alert(22);
        divs[1].removeEventListener('click', fn);
    }
    // 3. detachEvent
    divs[2].attachEvent('onclick', fn1);

    function fn1() {
        alert(33);
        divs[2].detachEvent('onclick', fn1);
    }
</script>

删除事件兼容性处理

function removeEventListener(element, eventName, fn) {
  // 判断当前浏览器是否支持addEventListener方法
  if (element.removeEventListener) {
    element.removeEventListener(eventName, fn); // 第三个参数默认是false
  } else if (element.detachEvent) {
    element.detachEvent("on" + eventName, fn);
  } else {
    element["on" + eventName] = fn;
  }
}

DOM事件流

事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

DOM 事件流会经历3个阶段：

捕获阶段
当前目标阶段
冒泡阶段

事件冒泡

<div class="father">
    <div class="son">son盒子</div>
</div>
<script>
    // onclick 和 attachEvent（ie） 在冒泡阶段触发
    // 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 
    // son -> father ->body -> html -> document
    var son = document.querySelector('.son');
// 给son注册单击事件
    son.addEventListener('click', function() {
        alert('son');
    }, false);
// 给father注册单击事件
    var father = document.querySelector('.father');
    father.addEventListener('click', function() {
        alert('father');
    }, false);
// 给document注册单击事件，省略第3个参数
    document.addEventListener('click', function() {
        alert('document');
    })
</script>

事件捕获

<div class="father">
     <div class="son">son盒子</div>
 </div>
 <script>
     // 如果addEventListener() 第三个参数是 true 那么在捕获阶段触发
     // document -> html -> body -> father -> son
      var son = document.querySelector('.son');
// 给son注册单击事件，第3个参数为true
      son.addEventListener('click', function() {
          alert('son');
      }, true);
      var father = document.querySelector('.father');
// 给father注册单击事件，第3个参数为true
      father.addEventListener('click', function() {
          alert('father');
      }, true);
// 给document注册单击事件，第3个参数为true
     document.addEventListener('click', function() {
         alert('document');
     }, true)
 </script>

事件对象

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。

事件对象的使用

事件触发时就会产生事件对象，并且系统会以实参的形式传给事件处理函数

eventTarget.onclick = function(event){
	//这个event就是事件对象，通常会写成e或者evt
}
eventTarget.addEventListener('click', function(event){
	//这个event就是事件对象，通常会写成e或者evt
})
eventTarget.addEventListener('click', fn)
function(event){
	// 这个event就是事件对象，通常写成e或者evt
}

事件对象兼容性处理

事件对象本身的获取存在兼容问题：

标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event中获取查找。

e = e || window.event;

只要“||”前面为false, 不管“||”后面是true 还是 false，都返回 “||” 后面的值。
只要“||”前面为true, 不管“||”后面是true 还是 false，都返回 “||” 前面的值。

事件对象的属性和方法

事件对象属性方法	说明
`e.target`	返回触发事件的对象标准
`e.srcElement`	返回触发事件的对象，非标准ie6-8使用
`e.type`	返回事件的类型（click、mouseover等）
`e.cancelBubble`	该属性组织冒泡，ie6-8使用
`e.returnValue`	该属性阻止默认事件（默认行为）非标准ie6-8使用比如不让连接跳转
`e.preventDefault()`	该方法组织默认事件（默认行为）标准比如不让连接跳转
`e.stopPropagation`	组织冒泡标准

事件冒泡下的e.target和this

<ul>
    <li>abc</li>
    <li>abc</li>
    <li>abc</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) {
          // 我们给ul 绑定了事件  那么this 就指向ul  
          console.log(this); // ul

          // e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li
          console.log(e.target); // li
    });
</script>

阻止事件默认行为

<a href="http://www.baidu.com">百度</a>
<script>
    // 2. 阻止默认行为 让链接不跳转 
    var a = document.querySelector('a');
    a.addEventListener('click', function(e) {
         e.preventDefault(); //  dom 标准写法
    });
    // 3. 传统的注册方式
    a.onclick = function(e) {
        // 普通浏览器 e.preventDefault();  方法
        e.preventDefault();
        // 低版本浏览器 ie678  returnValue  属性
        e.returnValue = false;
        // 我们可以利用return false 也能阻止默认行为 没有兼容性问题
        return false;
    }
</script>

阻止事件冒泡

标准写法：利用事件对象里面的stopPropagation()方法
e.stopPropagation()
非标准写法：IE6-8利用事件对象cancelBubble属性
e.cancelBubble = true

<div class="father">
    <div class="son">son儿子</div>
</div>
<script>
    var son = document.querySelector('.son');
// 给son注册单击事件
    son.addEventListener('click', function(e) {
        alert('son');
        e.stopPropagation(); // stop 停止  Propagation 传播
        window.event.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
    }, false);

    var father = document.querySelector('.father');
// 给father注册单击事件
    father.addEventListener('click', function() {
        alert('father');
    }, false);
// 给document注册单击事件
    document.addEventListener('click', function() {
        alert('document');
    })
</script>

阻止事件冒泡的兼容性处理

if( e && e.stopPropagation){
	e.stopPropagation
}else {
	window.event.cancelBubble = true;
}

事件委托

不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。

<ul>
    <li>知否知否，点我应有弹框在手！</li>
    <li>知否知否，点我应有弹框在手！</li>
    <li>知否知否，点我应有弹框在手！</li>
    <li>知否知否，点我应有弹框在手！</li>
    <li>知否知否，点我应有弹框在手！</li>
</ul>
<script>
    // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) {
        // e.target 这个可以得到我们点击的对象
        e.target.style.backgroundColor = 'pink';
    })
</script>

禁止选中文字和禁止右键菜单

<body>
    我是一段不愿意分享的文字
    <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
        })
        // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })
    </script>
</body>

鼠标事件对象

鼠标事件对象	说明
`e.clientX`	返回鼠标相当于浏览器窗口可视区的X坐标
`e.clientY`	返回鼠标相当于浏览器窗口可视区的X坐标
`e.pageX`	返回鼠标相当于文档页面的X坐标IE9+支持
`e.pageY`	返回鼠标相当于文档页面的Y坐标IE9+支持
`e.screenX`	返回鼠标相当于电脑屏幕的X坐标
`e.screenY`	返回鼠标相当于电脑屏幕的Y坐标

获取鼠标在页面的坐标

// 鼠标事件对象 MouseEvent
document.addEventListener('click', function(e) {
    // 1. client 鼠标在可视区的x和y坐标
    console.log(e.clientX);
    console.log(e.clientY);
    console.log('---------------------');

    // 2. page 鼠标在页面文档的x和y坐标
    console.log(e.pageX);
    console.log(e.pageY);
    console.log('---------------------');

    // 3. screen 鼠标在电脑屏幕的x和y坐标
    console.log(e.screenX);
    console.log(e.screenY);

})

键盘事件

键盘事件	触发条件
`onkeyup`	某个键盘按键被松开时触发
`onkeydown`	某个键盘按键被按下时触发
`onkeypress`	某个键盘按键被按下时触发(不识别功能键比如 ctrl shift箭头等)

注意:
如果使用addEventListener不需要加on
onkeypress和前面两个的区别时,它不识别功能键,比如 ctrl shift箭头等
三个事件的执行顺序是: keydown – keypress – keyup

// 常用的键盘事件
//1. keyup 按键弹起的时候触发 
document.addEventListener('keyup', function() {
    console.log('我弹起了');
})

//3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keypress', function() {
        console.log('我按下了press');
})
//2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keydown', function() {
        console.log('我按下了down');
})
// 4. 三个事件的执行顺序  keydown -- keypress -- keyup

键盘事件对象

keyCode返回该键的ASCII码值

注意:
onkeydown和onkeyup不区分字母大小写, onkeypress区分字母大小写
实际开发中,更多使用的是keydown和keyup,它能识别所有的键(包括功能键)
keypress不识别功能键,但是keyCode属性能区分大小写,返回不同的ASCII码值

使用keyCode属性判断用户按下哪个键

// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
document.addEventListener('keyup', function(e) {
    console.log('up:' + e.keyCode);
    // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
    if (e.keyCode === 65) {
        alert('您按下的a键');
    } else {
        alert('您没有按下a键')
    }
})
document.addEventListener('keypress', function(e) {
    // console.log(e);
    console.log('press:' + e.keyCode);
})

valentinelzt

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WebAPI---DOM

获取元素的方法根据ID获取语法：document.getElementById(id)作用：根据ID获取元素对象参数：id值，区分大小写的字符串返回值：元素对象或 null<body> <div id="time">2019-9-9</div> <script> // 因为我们文档页面从上往下加载，所...
复制链接

扫一扫