JavaScript基础 -- DOM

  • DOM
    • 1.什么是DOM？
    • 2.事件
    • 3.文档的加载
    • 3.DOM查询
    • 4.DOM查询的其他方法
    • 5.DOM增删改
    • 6.使用DOM操作CSS
    • 7.读取元素的样式
    • 8.其他样式操作的属性
    • 9.事件对象
    • 10.练习-使div可以跟随鼠标移动
    • 11.事件的冒泡
    • 12.事件的委派
    • 13.事件的绑定
    • 14.事件的传播
    • 15.setCapture
    • 16.拖曳事件
    • 17.滚轮事件
    • 18.键盘事件

DOM

1.什么是DOM？

2.事件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行这种写法我们称为结构和行为耦合，不方便维护，不推荐使用   --><!--<button id="btn" οnmοusemοve="alert('讨厌，你点我干嘛！');">我是一个按钮</button>--><button id="btn">我是一个按钮</button><script type="text/javascript">/** 事件，就是用户和浏览器之间的交互行为，*    比如：点击按钮，鼠标移动、关闭窗口。。。*///获取按钮对象var btn = document.getElementById("btn");/** 可以为按钮的对应事件绑定处理函数的形式来响应事件*   这样当事件被触发时，其对应的函数将会被调用*///绑定一个单击事件//像这种为单击事件绑定的函数，我们称为单击响应函数btn.onclick = function(){alert("你还点~~~");};</script></body>
</html>

3.文档的加载

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">/** 浏览器在加载一个页面时，是按照自上向下的顺序加载的，*     读取到一行就运行一行,如果将script标签写到页面的上边，*  在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载*  会导致无法获取到DOM对象*//** onload事件会在整个页面加载完成之后才触发* 为window绑定一个onload事件*        该事件对应的响应函数将会在页面加载完成之后执行，*        这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了*/window.onload = function(){//获取id为btn的按钮var btn = document.getElementById("btn");//为按钮绑定一个单击响应函数btn.onclick = function(){alert("hello");};};</script></head><body><button id="btn">点我一下</button><!--<script type="text/javascript">/** 将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码*///获取id为btn的按钮var btn = document.getElementById("btn");//为按钮绑定一个单击响应函数btn.onclick = function(){alert("hello");};</script>--></body>
</html>

3.DOM查询

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">/** 定义一个函数，专门用来为指定元素绑定单击响应函数*   参数：*         idStr 要绑定单击响应函数的对象的id属性值*       fun 事件的回调函数，当单击元素时，该函数将会被触发*/function myClick(idStr , fun){var btn = document.getElementById(idStr);btn.onclick = fun;}window.onload = function(){//为id为btn01的按钮绑定一个单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function(){//查找#bj节点var bj = document.getElementById("bj");//打印bj//innerHTML 通过这个属性可以获取到元素内部的html代码alert(bj.innerHTML);};//为id为btn02的按钮绑定一个单击响应函数var btn02 = document.getElementById("btn02");btn02.onclick = function(){//查找所有li节点//getElementsByTagName()可以根据标签名来获取一组元素节点对象//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中//即使查询到的元素只有一个，也会封装到数组中返回var lis = document.getElementsByTagName("li");//打印lis//alert(lis.length);//变量lisfor(var i=0 ; i<lis.length ; i++){alert(lis[i].innerHTML);}};//为id为btn03的按钮绑定一个单击响应函数var btn03 = document.getElementById("btn03");btn03.onclick = function(){//查找name=gender的所有节点var inputs = document.getElementsByName("gender");//alert(inputs.length);for(var i=0 ; i<inputs.length ; i++){/** innerHTML用于获取元素内部的HTML代码的*     对于自结束标签，这个属性没有意义*///alert(inputs[i].innerHTML);/** 如果需要读取元素节点属性，*     直接使用 元素.属性名*        例子：元素.id 元素.name 元素.value*       注意：class属性不能采用这种方式，*          读取class属性时需要使用 元素.className*/alert(inputs[i].className);}};//为id为btn04的按钮绑定一个单击响应函数var btn04 = document.getElementById("btn04");btn04.onclick = function(){//获取id为city的元素var city = document.getElementById("city");//查找#city下所有li节点var lis = city.getElementsByTagName("li");for(var i=0 ; i<lis.length ; i++){alert(lis[i].innerHTML);}};//为id为btn05的按钮绑定一个单击响应函数var btn05 = document.getElementById("btn05");btn05.onclick = function(){//获取id为city的节点var city = document.getElementById("city");//返回#city的所有子节点/** childNodes属性会获取包括文本节点在呢的所有节点* 根据DOM标签标签间空白也会当成文本节点* 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，*   所以该属性在IE8中会返回4个子元素而其他浏览器是9个*/var cns = city.childNodes;//alert(cns.length);/*for(var i=0 ; i<cns.length ; i++){alert(cns[i]);}*//** children属性可以获取当前元素的所有子元素*/var cns2 = city.children;alert(cns2.length);};//为id为btn06的按钮绑定一个单击响应函数var btn06 = document.getElementById("btn06");btn06.onclick = function(){//获取id为phone的元素var phone = document.getElementById("phone");//返回#phone的第一个子节点//phone.childNodes[0];//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）var fir = phone.firstChild;//firstElementChild获取当前元素的第一个子元素/** firstElementChild不支持IE8及以下的浏览器，*   如果需要兼容他们尽量不要使用*///fir = phone.firstElementChild;alert(fir);};//为id为btn07的按钮绑定一个单击响应函数myClick("btn07",function(){//获取id为bj的节点var bj = document.getElementById("bj");//返回#bj的父节点var pn = bj.parentNode;alert(pn.innerHTML);/** innerText*  - 该属性可以获取到元素内部的文本内容*    - 它和innerHTML类似，不同的是它会自动将html去除*///alert(pn.innerText);  });//为id为btn08的按钮绑定一个单击响应函数myClick("btn08",function(){//获取id为android的元素var and = document.getElementById("android");//返回#android的前一个兄弟节点（也可能获取到空白的文本）var ps = and.previousSibling;//previousElementSibling获取前一个兄弟元素，IE8及以下不支持//var pe = and.previousElementSibling;alert(ps);});//读取#username的value属性值myClick("btn09",function(){//获取id为username的元素var um = document.getElementById("username");//读取um的value属性值//文本框的value属性值，就是文本框中填写的内容alert(um.value);});//设置#username的value属性值myClick("btn10",function(){//获取id为username的元素var um = document.getElementById("username");um.value = "今天天气真不错~~~";});//返回#bj的文本值myClick("btn11",function(){//获取id为bj的元素var bj = document.getElementById("bj");//alert(bj.innerHTML);//alert(bj.innerText);//获取bj中的文本节点/*var fc = bj.firstChild;alert(fc.nodeValue);*/alert(bj.firstChild.nodeValue);}); };</script></head><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><p>你手机的操作系统是?</p><ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul></div><div class="inner">gender:<input class="hello" type="radio" name="gender" value="male"/>Male<input class="hello" type="radio" name="gender" value="female"/>Female<br><br>name:<input type="text" name="name" id="username" value="abcde"/></div></div><div id="btnList"><div><button id="btn01">查找#bj节点</button></div><div><button id="btn02">查找所有li节点</button></div><div><button id="btn03">查找name=gender的所有节点</button></div><div><button id="btn04">查找#city下所有li节点</button></div><div><button id="btn05">返回#city的所有子节点</button></div><div><button id="btn06">返回#phone的第一个子节点</button></div><div><button id="btn07">返回#bj的父节点</button></div><div><button id="btn08">返回#android的前一个兄弟节点</button></div><div><button id="btn09">返回#username的value属性值</button></div><div><button id="btn10">设置#username的value属性值</button></div><div><button id="btn11">返回#bj的文本值</button></div></div></body>
</html>

4.DOM查询的其他方法

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){//获取body标签//var body = document.getElementsByTagName("body")[0];/** 在document中有一个属性body，它保存的是body的引用*/var body = document.body;/** document.documentElement保存的是html根标签*/var html = document.documentElement;//console.log(html);/** document.all代表页面中所有的元素*/var all = document.all;//console.log(all.length);/*for(var i=0 ; i<all.length ; i++){console.log(all[i]);}*///all = document.getElementsByTagName("*");//console.log(all.length);/** 根据元素的class属性值查询一组元素节点对象* getElementsByClassName()可以根据class属性值获取一组元素节点对象，*   但是该方法不支持IE8及以下的浏览器*///var box1 = document.getElementsByClassName("box1");//console.log(box1.length);//获取页面中的所有的div//var divs = document.getElementsByTagName("div");//获取class为box1中的所有的div//.box1 div/** document.querySelector()*    - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象*   - 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替*  - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个*/var div = document.querySelector(".box1 div");var box1 = document.querySelector(".box1")//console.log(div.innerHTML);//console.log(box1.innerHTML);/** document.querySelectorAll()*     - 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回*  - 即使符合条件的元素只有一个，它也会返回数组*/box1 = document.querySelectorAll(".box1");box1 = document.querySelectorAll("#box2");console.log(box1);        };</script></head><body><div id="box2"></div>  <div class="box1">我是第一个box1     <div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div></div></body>
</html>

5.DOM增删改

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">window.onload = function() {//创建一个"广州"节点,添加到#city下myClick("btn01",function(){//创建广州节点 <li>广州</li>//创建li元素节点/** document.createElement()*  可以用于创建一个元素节点对象，*     它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，*   并将创建好的对象作为返回值返回*/var li = document.createElement("li");//创建广州文本节点/** document.createTextNode()*  可以用来创建一个文本节点对象*  需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回*/var gzText = document.createTextNode("广州");//将gzText设置li的子节点/** appendChild()*    - 向一个父节点中添加一个新的子节点*     - 用法：父节点.appendChild(子节点);*/li.appendChild(gzText);//获取id为city的节点var city = document.getElementById("city");//将广州添加到city下city.appendChild(li);   });//将"广州"节点插入到#bj前面myClick("btn02",function(){//创建一个广州var li = document.createElement("li");var gzText = document.createTextNode("广州");li.appendChild(gzText);//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");/** insertBefore()*    - 可以在指定的子节点前插入新的子节点*  - 语法：*         父节点.insertBefore(新节点,旧节点);*/city.insertBefore(li , bj);});//使用"广州"节点替换#bj节点myClick("btn03",function(){//创建一个广州var li = document.createElement("li");var gzText = document.createTextNode("广州");li.appendChild(gzText);//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");/** replaceChild()*     - 可以使用指定的子节点替换已有的子节点*   - 语法：父节点.replaceChild(新节点,旧节点);*/city.replaceChild(li , bj);});//删除#bj节点myClick("btn04",function(){//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");/** removeChild()*  - 可以删除一个子节点*    - 语法：父节点.removeChild(子节点);*      *       子节点.parentNode.removeChild(子节点);*///city.removeChild(bj);bj.parentNode.removeChild(bj);});//读取#city内的HTML代码myClick("btn05",function(){//获取cityvar city = document.getElementById("city");alert(city.innerHTML);});//设置#bj内的HTML代码myClick("btn06" , function(){//获取bjvar bj = document.getElementById("bj");bj.innerHTML = "昌平";});myClick("btn07",function(){//向city中添加广州var city = document.getElementById("city");/** 使用innerHTML也可以完成DOM的增删改的相关操作* 一般我们会两种方式结合使用*///city.innerHTML += "<li>广州</li>";//创建一个livar li = document.createElement("li");//向li中设置文本li.innerHTML = "广州";//将li添加到city中city.appendChild(li);});};function myClick(idStr, fun) {var btn = document.getElementById(idStr);btn.onclick = fun;}</script></head><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul></div></div><div id="btnList"><div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div><div><button id="btn02">将"广州"节点插入到#bj前面</button></div><div><button id="btn03">使用"广州"节点替换#bj节点</button></div><div><button id="btn04">删除#bj节点</button></div><div><button id="btn05">读取#city内的HTML代码</button></div><div><button id="btn06">设置#bj内的HTML代码</button></div><div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div></div></body>
</html>

6.使用DOM操作CSS

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;}</style><script type="text/javascript">window.onload = function(){/** 点击按钮以后，修改box1的大小*///获取box1var box1 = document.getElementById("box1");//为按钮绑定单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function(){//修改box1的宽度/** 通过JS修改元素的样式：*     语法：元素.style.样式名 = 样式值* * 注意：如果CSS的样式名中含有-，*       这种名称在JS中是不合法的比如background-color*        需要将这种样式名修改为驼峰命名法，*       去掉-，然后将-后的字母大写* * 我们通过style属性设置的样式都是内联样式，*    而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示* * 但是如果在样式中写了!important，则此时样式会有最高的优先级，*    即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效*   所以尽量不要为样式添加!important*/box1.style.width = "300px";box1.style.height = "300px";box1.style.backgroundColor = "yellow";};//点击按钮2以后，读取元素的样式var btn02 = document.getElementById("btn02");btn02.onclick = function(){//读取box1的样式/**   语法：元素.style.样式名* * 通过style属性设置和读取的都是内联样式*    无法读取样式表中的样式*///alert(box1.style.height);alert(box1.style.width);};};</script></head><body><button id="btn01">点我一下</button><button id="btn02">点我一下2</button><br /><br /> <div id="box1"></div></body>
</html>

7.读取元素的样式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: yellow;}</style><script type="text/javascript">window.onload = function(){//点击按钮以后读取box1的样式var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");btn01.onclick = function(){//读取box1的宽度//alert(box1.style.width);/** 获取元素的当前显示的样式*    语法：元素.currentStyle.样式名* 它可以用来读取当前元素正在显示的样式*  如果当前元素没有设置该样式，则获取它的默认值* * currentStyle只有IE浏览器支持，其他的浏览器都不支持*///alert(box1.currentStyle.width);//box1.currentStyle.width = "200px";//alert(box1.currentStyle.backgroundColor);/** 在其他浏览器中可以使用*       getComputedStyle()这个方法来获取元素当前的样式*       这个方法是window的方法，可以直接使用* 需要两个参数*       第一个：要获取样式的元素*        第二个：可以传递一个伪元素，一般都传null* * 该方法会返回一个对象，对象中封装了当前元素对应的样式*  可以通过对象.样式名来读取样式*    如果获取的样式没有设置，则会获取到真实的值，而不是默认值*     比如：没有设置width，它不会获取到auto，而是一个长度* * 但是该方法不支持IE8及以下的浏览器* * 通过currentStyle和getComputedStyle()读取到的样式都是只读的，*  不能修改，如果要修改必须通过style属性*///var obj = getComputedStyle(box1,null);/*alert(getComputedStyle(box1,null).width);*///正常浏览器的方式//alert(getComputedStyle(box1,null).backgroundColor);//IE8的方式//alert(box1.currentStyle.backgroundColor);//alert(getStyle(box1,"width"));var w = getStyle(box1,"width");alert(w);};};/** 定义一个函数，用来获取指定元素的当前的样式* 参数：*        obj 要获取样式的元素*       name 要获取的样式名*/function getStyle(obj , name){// 第一种实现方式if(window.getComputedStyle){  /* if(getComputedStyle)可能会出错，因为当前作用域中没有getComputedStyle，就会在全局作用域找，全局作用域并没有这个变量，因此会报错，但是使用window.getComputedStyle时,即使没有getComputedStyle这个变量也只会返回undefined不会报错*///正常浏览器的方式，具有getComputedStyle()方法return getComputedStyle(obj , null)[name];}else{//IE8的方式，没有getComputedStyle()方法return obj.currentStyle[name];}// 第二种实现方式//return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];}</script></head><body><button id="btn01">点我一下</button><br /><br /><div id="box1" ></div></body>
</html>

8.其他样式操作的属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;padding: 10px;border: 10px solid yellow;}#box2{padding: 100px;background-color: #bfa;}#box4{width: 200px;height: 300px;background-color: #bfa;overflow: auto;}#box5{width: 450px;height: 600px;background-color: yellow;}</style><script type="text/javascript">window.onload = function(){var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");var box4 = document.getElementById("box4");btn01.onclick = function(){/** clientWidth* clientHeight*  - 这两个属性可以获取元素的可见宽度和高度*  - 这些属性都是不带px的，返回都是一个数字，可以直接进行计算*  - 会获取元素宽度和高度，包括内容区和内边距，不包括border*  - 这些属性都是只读的，不能修改*///alert(box1.clientWidth);//alert(box1.clientHeight);//box1.clientHeight = 300;/** offsetWidth* offsetHeight*    - 获取元素的整个的宽度和高度，包括内容区、内边距和边框*///alert(box1.offsetWidth);/** offsetParent*    - 可以用来获取当前元素的定位父元素*  - 会获取到离当前元素最近的开启了定位的祖先元素*      如果所有的祖先元素都没有开启定位，则返回body*/var op = box1.offsetParent;//alert(op.id);/** offsetLeft*     - 当前元素相对于其定位父元素的水平偏移量* offsetTop*   - 当前元素相对于其定位父元素的垂直偏移量*///alert(box1.offsetLeft);/** scrollWidth* scrollHeight*  - 可以获取元素整个滚动区域的宽度和高度*///alert(box4.clientHeight);//alert(box4.scrollWidth);/** scrollLeft*  - 可以获取水平滚动条滚动的距离* scrollTop*    - 可以获取垂直滚动条滚动的距离*///alert(box4.scrollLeft);//alert(box4.scrollTop);//alert(box4.clientHeight); // 283//当满足scrollHeight - scrollTop == clientHeight//说明垂直滚动条滚动到底了//当满足scrollWidth - scrollLeft == clientWidth//说明水平滚动条滚动到底//alert(box4.scrollHeight - box4.scrollTop); // 600};};</script></head><body id="body"><button id="btn01">点我一下</button><br /><br /><div id="box4"><div id="box5"></div></div><div id="box3"><div id="box2" style="position: relative;"><div id="box1"></div></div></div></body>
</html>

9.事件对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">#areaDiv {border: 1px solid black;width: 300px;height: 50px;margin-bottom: 10px;}#showMsg {border: 1px solid black;width: 300px;height: 20px;}
</style>
<script type="text/javascript">window.onload = function(){/** 当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标*///获取两个divvar areaDiv = document.getElementById("areaDiv");var showMsg = document.getElementById("showMsg");/** onmousemove*     - 该事件将会在鼠标在元素中移动时被触发* * 事件对象*   - 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,*       在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标  键盘哪个按键被按下  鼠标滚轮滚动的方向。。。*/areaDiv.onmousemove = function(event){/** 在IE8中，响应函数被触发时，浏览器不会传递事件对象，*  在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的*//*if(!event){event = window.event;}*///解决事件对象的兼容性问题event = event || window.event;/** clientX可以获取鼠标指针的水平坐标* cilentY可以获取鼠标指针的垂直坐标*/var x = event.clientX;var y = event.clientY;//在showMsg中显示鼠标的坐标showMsg.innerHTML = "x = "+x + " , y = "+y;};};
</script>
</head>
<body><div id="areaDiv"></div><div id="showMsg"></div>
</body>
</html>

10.练习-使div可以跟随鼠标移动

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;/** 开启box1的绝对定位*/position: absolute;}</style><script type="text/javascript">window.onload = function(){/** 使div可以跟随鼠标移动*///获取box1var box1 = document.getElementById("box1");//绑定鼠标移动事件document.onmousemove = function(event){//解决兼容问题event = event || window.event;//获取滚动条滚动的距离/** chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取* 火狐等浏览器认为浏览器的滚动条是html的，*/var st = document.body.scrollTop || document.documentElement.scrollTop;var sl = document.body.scrollLeft || document.documentElement.scrollLeft;//var st = document.documentElement.scrollTop;//获取到鼠标的坐标/** clientX和clientY*     用于获取鼠标在当前的可见窗口的坐标* div的偏移量，是相对于整个页面的* * pageX和pageY可以获取鼠标相对于当前页面的坐标*     但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用*/var left = event.clientX;var　top = event.clientY;//设置div的偏移量  设置偏移量只对开启定位的元素起作用box1.style.left = left + sl + "px";box1.style.top = top + st + "px";};     };</script></head><body style="height: 1000px;width: 2000px;"><div id="box1"></div></body>
</html>

11.事件的冒泡

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 200px;height: 200px;background-color: yellowgreen;}#s1{background-color: yellow;}</style><script type="text/javascript">window.onload = function(){/** 事件的冒泡（Bubble）*  - 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发*     - 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡* *///为s1绑定一个单击响应函数var s1 = document.getElementById("s1");s1.onclick = function(event){event = event || window.event;alert("我是span的单击响应函数");//取消冒泡//可以将事件对象的cancelBubble设置为true，即可取消冒泡event.cancelBubble = true;};//为box1绑定一个单击响应函数var box1 = document.getElementById("box1");box1.onclick = function(event){event = event || window.event;alert("我是div的单击响应函数");event.cancelBubble = true;};//为body绑定一个单击响应函数document.body.onclick = function(){alert("我是body的单击响应函数");};};</script></head><body><div id="box1">我是box1<span id="s1">我是span</span></div></body>
</html>

12.事件的委派

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript">window.onload = function(){var u1 = document.getElementById("u1");//点击按钮以后添加超链接var btn01 = document.getElementById("btn01");btn01.onclick = function(){//创建一个livar li = document.createElement("li");li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";//将li添加到ul中u1.appendChild(li);};/** 为每一个超链接都绑定一个单击响应函数* 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，*   而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定*///获取所有的avar allA = document.getElementsByTagName("a");//遍历/*for(var i=0 ; i<allA.length ; i++){allA[i].onclick = function(){alert("我是a的单击响应函数！！！");};}*//** 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的* 我们可以尝试将其绑定给元素的共同的祖先元素* * 事件的委派*    - 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素*      从而通过祖先元素的响应函数来处理事件。*  - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能*///为ul绑定一个单击响应函数u1.onclick = function(event){event = event || window.event;/** target*   - event中的target表示的触发事件的对象*///alert(event.target);//如果触发事件的对象是我们期望的元素，则执行否则不执行if(event.target.className == "link"){alert("我是ul的单击响应函数");}   };};</script></head><body><button id="btn01">添加超链接</button><ul id="u1" style="background-color: #bfa;"><li><p>我是p元素</p></li><li><a href="javascript:;" class="link">超链接一</a></li><li><a href="javascript:;" class="link">超链接二</a></li><li><a href="javascript:;" class="link">超链接三</a></li></ul></body>
</html>

13.事件的绑定

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){/** 点击按钮以后弹出一个内容*///获取按钮对象var btn01 = document.getElementById("btn01");/** 使用 对象.事件 = 函数 的形式绑定响应函数，*   它只能同时为一个元素的一个事件绑定一个响应函数，*    不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的*///为btn01绑定一个单击响应函数/*btn01.onclick = function(){alert(1);};*///为btn01绑定第二个响应函数/*btn01.onclick = function(){alert(2);};*//** addEventListener()*   - 通过这个方法也可以为元素绑定响应函数*  - 参数：*        1.事件的字符串，不要on，例如onclick只要传入click即可*       2.回调函数，当事件触发时该函数会被调用*        3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false，表示不在捕获阶段触发* * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，*    这样当事件被触发时，响应函数将会按照函数的绑定顺序执行* * 这个方法不支持IE8及以下的浏览器*//*btn01.addEventListener("click",function(){alert(1);},false);btn01.addEventListener("click",function(){alert(2);},false);btn01.addEventListener("click",function(){alert(3);},false);*//** attachEvent()*   - 在IE8中可以使用attachEvent()来绑定事件*  - 参数：*       1.事件的字符串，要on*        2.回调函数* *  - 这个方法也可以同时为一个事件绑定多个处理函数，*        不同的是它是后绑定先执行，执行顺序和addEventListener()相反*//*btn01.attachEvent("onclick",function(){alert(1);});btn01.attachEvent("onclick",function(){alert(2);});btn01.attachEvent("onclick",function(){alert(3);});*//*btn01.addEventListener("click",function(){alert(this);},false);*//*btn01.attachEvent("onclick",function(){alert(this);});*/bind(btn01 , "click" , function(){alert(this);});          };//定义一个函数，用来为指定元素绑定响应函数/** addEventListener()中的this，是绑定事件的对象* attachEvent()中的this，是window*  需要统一两个方法this*//** 参数：*     obj 要绑定事件的对象*   eventStr 事件的字符串(不要on)*  callback 回调函数*/function bind(obj , eventStr , callback){if(obj.addEventListener){//大部分浏览器兼容的方式obj.addEventListener(eventStr , callback , false);}else{/** this是谁由调用方式决定* callback.call(obj)*///IE8及以下obj.attachEvent("on"+eventStr , function(){//在匿名函数中调用回调函数，改变this的指向，使其指向为绑定的事件对象callback.call(obj);});}}</script></head><body><button id="btn01">点我一下</button></body>
</html>

14.事件的传播

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 300px;height: 300px;background-color: yellowgreen;}#box2{width: 200px;height: 200px;background-color: yellow;}#box3{width: 150px;height: 150px;background-color: skyblue;}</style><script type="text/javascript">window.onload = function(){/** 分别为三个div绑定单击响应函数*/var box1 = document.getElementById("box1");var box2 = document.getElementById("box2");var box3 = document.getElementById("box3");/** 事件的传播*   - 关于事件的传播网景公司和微软公司有不同的理解*   - 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，*      然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。*  - 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，*      然后在向内传播给后代元素*   - W3C综合了两个公司的方案，将事件传播分成了三个阶段(针对IE9以上浏览器及其他浏览器)*      1.捕获阶段*             - 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件*      2.目标阶段*             - 事件捕获到目标元素，捕获结束开始在目标元素上触发事件*        3.冒泡阶段*             - 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件* *       - 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true*             一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false* *  - IE8及以下的浏览器中没有捕获阶段*/bind(box1,"click",function(){alert("我是box1的响应函数")});bind(box2,"click",function(){alert("我是box2的响应函数")});bind(box3,"click",function(){alert("我是box3的响应函数")});};function bind(obj , eventStr , callback){if(obj.addEventListener){//大部分浏览器兼容的方式obj.addEventListener(eventStr , callback , true);}else{/** this是谁由调用方式决定* callback.call(obj)*///IE8及以下obj.attachEvent("on"+eventStr , function(){//在匿名函数中调用回调函数callback.call(obj);});}}    </script></head><body>    <div id="box1"><div id="box2"><div id="box3"></div></div></div></body>
</html>

15.setCapture

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){//分别为两个按钮绑定单击响应函数var btn01 = document.getElementById("btn01");var btn02 = document.getElementById("btn02");btn01.onclick = function(){alert(1);};btn02.onclick = function(){alert(2);};//设置btn01对鼠标按下相关的事件进行捕获//当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上// setCapture方法只能在ie中使用，在chrome中使用会报错btn01.setCapture();};</script></head><body><button id="btn01">按钮01</button><button id="btn02">按钮02</button></body>
</html>

16.拖曳事件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;position: absolute;}#box2{width: 100px;height: 100px;background-color: yellow;position: absolute;left: 200px;top: 200px;}</style><script type="text/javascript">window.onload = function(){/** 拖拽box1元素*  - 拖拽的流程*         1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown*       2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove*        3.当鼠标松开时，被拖拽元素固定在当前位置    onmouseup*///获取box1var box1 = document.getElementById("box1");var box2 = document.getElementById("box2");var img1 = document.getElementById("img1");//开启box1的拖拽drag(box1);//开启box2的drag(box2);drag(img1);};/** 提取一个专门用来设置拖拽的函数* 参数：开启拖拽的元素*/function drag(obj){//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedownobj.onmousedown = function(event){//设置box1捕获所有鼠标按下的事件/** setCapture()*  - 只有IE支持，但是在火狐中调用时不会报错，*      而如果使用chrome调用，会报错*//*if(box1.setCapture){box1.setCapture();}*/obj.setCapture && obj.setCapture();event = event || window.event;//div的偏移量 鼠标.clentX - 元素.offsetLeft//div的偏移量 鼠标.clentY - 元素.offsetTopvar ol = event.clientX - obj.offsetLeft;var ot = event.clientY - obj.offsetTop;//为document绑定一个onmousemove事件document.onmousemove = function(event){event = event || window.event;//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove//获取鼠标的坐标var left = event.clientX - ol;var top = event.clientY - ot;//修改box1的位置obj.style.left = left+"px";obj.style.top = top+"px";};//为document绑定一个鼠标松开事件document.onmouseup = function(){//当鼠标松开时，被拖拽元素固定在当前位置    onmouseup//取消document的onmousemove事件document.onmousemove = null;//取消document的onmouseup事件document.onmouseup = null;//当鼠标松开时，取消对事件的捕获obj.releaseCapture && obj.releaseCapture();};/** 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，*     此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，*  如果不希望发生这个行为，则可以通过return false来取消默认行为* * 但是这招对IE8不起作用*/return false;};}</script></head><body>我是一段文字<div id="box1"></div><div id="box2"></div><img src="img/an.jpg" id="img1" style="position: absolute;"/></body>
</html>

17.滚轮事件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;}</style><script type="text/javascript">window.onload = function(){//获取id为box1的divvar box1 = document.getElementById("box1");//为box1绑定一个鼠标滚轮滚动的事件/** onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，*    但是火狐不支持该属性* * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件*  注意该事件需要通过addEventListener()函数来绑定*/box1.onmousewheel = function(event){ event = event || window.event;//event.wheelDelta 可以获取鼠标滚轮滚动的方向//向上滚 120   向下滚 -120//wheelDelta这个值我们不看大小，只看正负//alert(event.wheelDelta);//wheelDelta这个属性火狐中不支持//在火狐中使用event.detail来获取滚动的方向//向上滚 -3  向下滚 3//alert(event.detail);/** 当鼠标滚轮向下滚动时，box1变长*  当滚轮向上滚动时，box1变短*///判断鼠标滚轮滚动的方向if(event.wheelDelta > 0 || event.detail < 0){//向上滚，box1变短box1.style.height = box1.clientHeight - 10 + "px";}else{//向下滚，box1变长box1.style.height = box1.clientHeight + 10 + "px";}/** 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false* 需要使用event来取消默认行为event.preventDefault();* 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错*/event.preventDefault && event.preventDefault();/** 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，* 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为*/return false; };//为火狐绑定滚轮事件bind(box1,"DOMMouseScroll",box1.onmousewheel);};function bind(obj , eventStr , callback){if(obj.addEventListener){//大部分浏览器兼容的方式obj.addEventListener(eventStr , callback , false);}else{/** this是谁由调用方式决定* callback.call(obj)*///IE8及以下obj.attachEvent("on"+eventStr , function(){//在匿名函数中调用回调函数callback.call(obj);});}}</script></head><body style="height: 2000px;">    <div id="box1"></div>        </body>
</html>

18.键盘事件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){/** 键盘事件：*     onkeydown*      - 按键被按下*        - 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发*       - 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快*             这种设计是为了防止误操作的发生。*   onkeyup*        - 按键被松开*  键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document*/document.onkeydown = function(event){event = event || window.event;/** 可以通过keyCode来获取按键的编码*     通过它可以判断哪个按键被按下* 除了keyCode，事件对象中还提供了几个属性*     altKey*     ctrlKey*    shiftKey*       - 这个三个用来判断alt ctrl 和 shift是否被按下*            如果按下则返回true，否则返回false*///console.log(event.keyCode);//判断一个y是否被按下//判断y和ctrl是否同时被按下if(event.keyCode === 89 && event.ctrlKey){console.log("ctrl和y都被按下了");}};/*document.onkeyup = function(){console.log("按键松开了");};*///获取inputvar input = document.getElementsByTagName("input")[0];input.onkeydown = function(event){event = event || window.event;//console.log(event.keyCode);//数字 48 - 57//使文本框中不能输入数字if(event.keyCode >= 48 && event.keyCode <= 57){//在文本框中输入内容，属于onkeydown的默认行为//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中return false;}};};</script></head><body><input type="text" /></body>
</html>

JavaScript基础 -- DOM相关推荐

  1. Javaweb学习笔记——（三）——————JavaScript基础DOM基础

    day03 1.js的String对象 **创建String对象 ***var str = "abc"; **方法和属性(文档) ***属性 lenth:字符串的长度 ***方法 ...

  2. JavaScript基础DOM操作--在线英文发音

    一.案例需求 在线英文发音–点击英语单词完成在线英文发音 二.涉及的知识点 DOM事件,本案例主要用的是点击事件 DOM节点操作运用,节点查找操作,节点属性操作 利用document.getEleme ...

  3. JavaScript基础: DOM中操作属性以及自定义属性

    上一篇聊了一些常用的事件以及演示其如何使用,演示的时候发现一件事情,那就是DOM操作不单是得到元素,还可以修改元素的属性.现在开始如何操作其属性. 普通自带的属性 这些属性是某些标签自带的属性比如sr ...

  4. 网页开发基础，HTML、CSS技术、JavaScript基础

    一.学习目标 1.HTML技术 2.CSS技术 3.JavaScript基础 二.重要知识点 1.HTML技术 超文本标记语言(英语:HyperText Markup Language,简称:HTML ...

  5. ＜ JavaScript基础知识 之 思维导图 ＞

    文章目录 前言 一.Javascript变量 二.Javascript运算符 三.Javascript数组 四.Javascript流程语句 五.Javascript字符串函数 六.Javascrip ...

  6. JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】

    学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...

  7. JavaScript基础12-day14【DOM查询(获取元素节点、获取元素节点的子节点)、全选练习、DOM增删改、DOM添加删除记录、Window对象方法】

    学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...

  8. JavaScript基础11-day13【正则表达式(量词、语法、转义字符、元字符)、DOM(节点、事件)、图片切换】

    学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...

  9. JavaScript 基础知识 - DOM篇(二)

    7. 节点操作 7.1 节点的属性 节点分类: 标签节点 文本节点 属性节点 注释节点 节点常用的属性: nodeType:节点的类型 nodeName:节点名称 nodeValue:节点值 常见的节 ...

最新文章

  1. 北大博士“最高荣誉”，出炉！
  2. maven的setting.xml文件配置信息【仅仅更改了一处】
  3. 常用SQL Server 小语法、函数 等的实例汇总
  4. main() 函数解析（一）——Linux-0.11 剖析笔记（六）
  5. HDOJ 1030 Delta-wave
  6. C++基础01-C++对c的增强
  7. 竞争者都是 飞鸽传书 高手
  8. RxJava应该如何理解
  9. Cocos2d-x-3.0rc0创建新项目
  10. 超慢速移动动画使用CSS3实现流畅效果
  11. python全栈开发网络_Python全栈开发：django网络框架(二)
  12. [容易]合并排序数组
  13. [Selenium]怎样验证页面是否有无变化
  14. 空间曲线曲率算法c语言,第一章第四节空间曲线曲率计算公式及推导
  15. ubuntu装指定分区_Ubuntu安装时怎样分区
  16. 办公室装修设计6大规范示意
  17. java微信签名什么意思,java,_求java实现微信签名，java - phpStudy
  18. 学习记录：二层网络环路相关
  19. java 牛客网之[动态规划 简单]NC3 nico和niconiconi
  20. 年纪轻轻竟脱发？头发到底该如何挽回？

热门文章

  1. oracle增加表字段、修改表字段、删除表字段
  2. javascript排序_使用JavaScript对页面内容进行排序
  3. 第一章-机器学习简介 深度之眼_吴恩达机器学习作业训练营
  4. 性能测试（一）：性能测试关心的结果
  5. Linux之挂载新的硬盘(超详细!)
  6. $.ajaxSetup({}) --- js ajax统一配置
  7. 自古英雄出少年-NBA
  8. Edge浏览器弹出“ 禁用开发人员模式扩展 ”，最新最快的解决方法
  9. 有五个字母A(a), E(e), I(i), O(o),U(u)称为元音，其他所有字母称为辅音，请编写程序判断输入的字母是元音（Vowel）还是辅音（Consonant）。
  10. python cv2模块安装,python cv2模块怎么安装