dom对象和元素事件

1.js面向对象

1）面向对象编程

面向对象的编程，那么是更符合人类所接触的世界的逻辑思维。

将一个系统划分为各个子系统，子系统又由各个模块构成，将每个模块，系统划分为一个个对象，给这些对象赋予某些角色（属性/功能/方法）。

伪面向对象编程语言 ---> 面向对象编程语言

2）创建对象的方式

[1] 字面量的方式

 1 //字面量的形式
 2 
 3 var student = {
 4 
 5 name:"蔡徐坤",
 6 
 7 type:"练习生",
 8 
 9 like:"唱跳rap篮球",
10 
11 rap:function(){
12 
13 console.log("鸡你太美")
14 
15 }
16 
17 }
18 
19  
20 
21  
22 
23 console.log(student)
24 
25 student.rap()

优点：写起来简单方便

缺点：如果要生成大量的类似的对象，那么将会写一堆重复的代码

[2]工厂模式

优点：可以快速生成批量的对象

缺点：对象的同样的方法（函数），没创建一个对象，都会生成一个一摸一样新的函数，所以会占内存

 1 /工厂模式
 2 
 3 function Student(name,type,like){
 4 
 5 return {
 6 
 7 name:name,
 8 
 9 type:type,
10 
11 like:like,
12 
13 rap:function(){
14 
15 console.log("鸡你太美")
16 
17 }
18 
19 }
20 
21 }
22 
23 
24 var s1 = Student("蔡徐坤1","篮球运动员",'篮球')
25 
26 console.log(s1)

[3]构造函数创建对象

 1 //构造函数
 2 
 3 function Teacher(){
 4 
 5 this.name = "苍老师";
 6 
 7 this.type = "老师";
 8 
 9 /*this.movies = function(){
10 
11 console.log("拍电影")
12 
13 }*/
14 
15 }
16 
17  
18 
19 //设置创建对象的原型函数
20 
21 Teacher.prototype.movies = function(){
22 
23 console.log("拍电影1")
24 
25 }
26 
27  
28 
29 //如果不用new来构建函数，那么就是一个普通的函数调用,并且this的指向是window
30 
31 //如果用了new,就会创建一个新的对象，并且将对象给到t1.
32 
33 var t1 =new Teacher()
34 
35 console.log(t1)

原型链：原型上不断继承原型，从而形成原型链。

[4] ES6的class写法

 1 //语法,ES6新增的语法。2015的新标准。es6 ==> EcmaScript 2015,2015发布的JavaScript的标准。
 2 
 3 class Cat{
 4 
 5 constructor(){
 6 
 7 this.name = "波斯猫"
 8 
 9 }
10 
11 run(){
12 
13 console.log("会跑")
14 
15 }
16 
17 say(){
18 
19 console.log("喵喵喵")
20 
21 }
22 
23 }
24 
25  
26 
27 var c1 = new Cat()
28 
29 console.log(c1)

3)继承extends

 1 class cxk{
 2 
 3 rap(){
 4 
 5 console.log("鸡你太美")
 6 
 7 }
 8 
 9 }
10 
11  
12 
13 // var c1 = new Cat()
14 
15 // console.log(c1)
16 
17 
18 class Cat extends cxk{
19 
20 constructor(){
21 
22 super()//super这个关键词，是调用继承的class的构造函数
23 
24 this.name = "波斯猫"
25 
26 }
27 
28 run(){
29 
30 console.log("会跑")
31 
32 }
33 
34 say(){
35 
36 console.log("喵喵喵")
37 
38 }
39 
40 }
41 
42 
43 var c1 = new Cat()
44 
45 console.log(c1)

2.获取DOM对象

1）DOM对象

DOM对象，就是HTML页面的文档对象。整个网页的显示，都由Document对象文档对象构成。文档对象又有许多的元素对象构成。文档对象就有许多的属性和方法，用来操纵整个页面的显示，以及事件的处理。所有的元素对象最终组成庞大的dom树。

2）查找元素对象

 1 //ES5以前查找元素的方式
 2 
 3 //通过ID查找元素对象
 4 
 5 var d1 = document.getElementById("d1")
 6 
 7 console.log(d1)
 8 
 9 //通过class查找元素对象
10 
11 var abc = document.getElementsByClassName('abc')
12 
13 console.log(abc)
14 
15 //通过标签名称查找元素对象
16 
17 var div = document.getElementsByTagName("div")
18 
19 console.log(div)
20 
21  
22 
23 //ES5以后的查找方式
24 
25 //选择单个元素，document.querySelector,选择器的写法，直接使用css选择器的写法,选择器如果能够匹配过个元素，那么只选择第一个元素,
26 
27 var div1 =  document.querySelector("div")
28 
29 console.log(div1)
30 
31 var id1 = document.querySelector("#d1")
32 
33 console.log(id1)
34 
35 var abc1 = document.querySelector('body .abc')
36 
37 console.log(abc1)
38 
39  
40 
41 //选择多个元素,document.querySelectorAll()
42 
43 var abc2 = document.querySelectorAll("#d1")
44 
45 console.log(abc2)
46 
47  
48 
49 for(var i =0 ;i<abc2.length;i++){
50 
51 abc2[i].innerHTML +=i
52 
53 abc2[i].style.background="green"
54 
55 }

3.设置DOM对象

1）设置DOM对象

设置dom对象里面的HTML

s1.innerHTML = 'h1{color: red;}';

2）设置dom对象的样式

[1]设置样式

//注意：凡是用-拼接的词组，都去掉-,然后首字母改为大写进行拼接成一个单词

//h1.style.background = "skyblue";

//h1.style.background-color = "skyblue"; 错误的

//h1.style.backgroundColor = "skyblue"

[2]第二种方式修改dom的样式

//创建style标签，里面写好相对应的样式

 1 //创建元素
 2 
 3 var s1 = document.createElement("style")
 4 
 5 //设置s1的innerHTML的内容
 6 
 7 s1.innerHTML = 'h1{color: red;}';
 8 
 9 //将style元素插入到HTML页面的body里
10 
11 document.body.appendChild(s1)

[3] 第三种设置dom对象的类名

var h1=document.querySelector(“h1”)

h1.className = "bgPurple"

[4]列表切换案例：

  1 <!DOCTYPE html>
  2 
  3 <html>
  4 
  5 <head>
  6 
  7 <meta charset="UTF-8">
  8 
  9 <title></title>
 10 
 11  
 12 
 13 <style type="text/css">
 14 
 15 .list{
 16 
 17 width: 400px;
 18 
 19 position: absolute;
 20 
 21 left: -400px;
 22 
 23 top: 0;
 24 
 25 transition: all 2s;
 26 
 27  
 28 
 29 }
 30 
 31 .listOut{
 32 
 33 width: 400px;
 34 
 35 position: absolute;
 36 
 37 left: 0px;
 38 
 39 top: 0;
 40 
 41 transition: all 2s;
 42 
 43 }
 44 
 45 .list img{
 46 
 47 width: 400px;
 48 
 49 }
 50 
 51 .btn{
 52 
 53 position: absolute;
 54 
 55 left: 20px;
 56 
 57 top: 20px;
 58 
 59 z-index: 1;
 60 
 61 }
 62 
 63 </style>
 64 
 65 </head>
 66 
 67 <body>
 68 
 69 <div class="main">
 70 
 71 <div class="btn">切换</div>
 72 
 73 <div class="list">
 74 
 75 <img src="img/timg.jfif"/>
 76 
 77 </div>
 78 
 79 </div>
 80 
 81  
 82 
 83  
 84 
 85 <script type="text/javascript">
 86 
 87 var btn = document.querySelector('.btn')
 88 
 89 var list = document.querySelector('.list')
 90 
 91 btn.onclick = function(){
 92 
 93 console.log(list.className)
 94 
 95 if(list.className == "list"){
 96 
 97 list.className = "listOut"
 98 
 99 }else{
100 
101 list.className = "list"
102 
103 }
104 
105  
106 
107 }
108 
109 </script>
110 
111 </body>
112 
113 </html>

4.设置元素事件

1)事件

2种定义事件的方式

[1]On事件名称：

优点：简单方便

缺点：只能一个事件调用1个函数。只有冒泡

h1.onclick = function(){

h1.style.backgroundColor = "deeppink"

}

[2] AddEventlistener:

优点：同一事件可以调用多个函数，这个模式下，可以设置事件是捕获还是冒泡，默认是冒泡。

h1.addEventListener(事件的名称,事件调用起的函数，true/false(捕获/冒泡))

h1.addEventListener('click',function(e){
   h1.style.backgroundColor = "green"
})

2)事件对象

每一个事件调用的执行函数，都会默认传入一个事件对象，这个对象会包含当次事件的相关信息。

冒泡事件

事件由最里面一层一层向上触发，直到HTML元素，那么这种事件模式就是冒泡事件。一般情况下就用冒泡。

捕获事件

由HTML开始一层一层向下出发，直到最小的子元素，那么这种事件模式就是捕获

3）具体事件

[1]点击事件-->单击事件click ；双击事件dblclick

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <h1>helloworld</h1>
 9 
10     <script>
11         var h1=document.querySelector("h1")
12         //单击事件
13         h1.onclick=function(){
14             h1.style.backgroundColor="green"
15         }
16 
17         //双击事件
18         h1.ondblclick=function(){
19             h1.style.backgroundColor="red"
20         }
21     </script>
22 </body>
23 </html>

[2]鼠标事件-->鼠标移入mouseenter ；鼠标移出mouseleave ；鼠标在某个元素上移动mousemove ；鼠标悬浮mouseover

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         h1{
 8             width: 500px;
 9             height: 400px;
10             background-color: blue;
11         }
12         .circle{
13             width: 20px;
14             height: 20px;
15             background: black;
16             border-radius: 10px;
17             position: absolute;
18 
19         }
20     </style>
21 </head>
22 <body>
23     <h1>helloworld</h1>
24     <script>
25 
26         var h1=document.querySelector("h1")
27         //鼠标移入某个元素
28         h1.onmouseenter=function(event){
29             h1.style.backgroundColor="red"
30         }
31         //鼠标移出某个元素
32         h1.onmouseleave=function(event){
33             h1.style.backgroundColor="green"
34         }
35         //鼠标在某个元素上移动
36 
37 //        h1.onmousemove=function(event){
38 //            console.log(event)
39 //            var div = document.createElement("div")
40 //            div.className="circle"
41 //            div.style.left = event.clientX + "px";
42 //            div.style.top = event.clientY + "px";
43 //            h1.appendChild(div)
44 //        }
45 
46         //鼠标悬浮在某个元素上
47         h1.onmouseover = function(){
48             console.log("onmouseover")
49         }
50 
51     </script>
52 </body>
53 </html>

[3]按键事件-->键盘按下事件keydown ；键盘弹起事件keyup ；键盘按下加弹起为一个事件press

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="text" name="input" id="d1"/>
 9 
10     <script>
11         var input1 = document.querySelector("#d1")
12 //        //键盘按下事件
13 //        input1.onkeydown=function(event){
14 //            console.log(event)
15 //        }
16 //        //键盘弹起事件
17 //        input1.onkeyup=function(event){
18 //            console.log(event)
19 //        }
20 
21         //键盘按下press,按下加弹起为1个事件
22 
23         input1.onkeypress=function(event){
24             console.log(event)
25         }
26     </script>
27 </body>
28 </html>

[4]手指的触屏事件-->触摸开始事件touchstart ；触摸移动事件touchmove ；触摸结束事件touchend

注：

移动端的事件，跟点击事件不一样的地方在于，可以多点触控。

触屏事件是2009年以后才有相关的触屏事件。只能用ECMASCRIPT5,才能够实现。只能用addEventListener才能创建事件

在触屏事件中想要获取触控点的位置，可以通过属性touches来获取多个点的触控位置。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <meta name="viewport"
 7           content="width=device-width, user-scalable=style, initial-scale=1.0, maximum-scale=style, minimum-scale=1.0"/>
 8     <style>
 9         .d1{
10             width: 600px;
11             height: 400px;
12             background-color: #FF4E22;
13             margin: 0 auto;
14         }
15     </style>
16 
17 </head>
18 <body>
19 
20     <div class="d1">
21         手机触屏颜色改变
22     </div>
23 
24     <script>
25 
26         var d1=document.querySelector(".d1")
27 　　　　　　//触摸开始事件
28         d1.addEventListener("touchstart",function(e){
29             console.log(e)
30         })
　　　　　　　　//触摸移动事件
31         d1.addEventListener("touchmove",function(e){
32             console.log(e)
33         })
　　　　　　　　//触摸结束事件
34         d1.addEventListener("touchend",function(e){
35             console.log(e)
36         })
37 
38     </script>
39 
40 
41 </body>
42 </html>

[5]聚焦事件-->focus

当输入框被点击之后，光标在输入框闪动的时候，即为聚焦的事件。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         
 7         <style type="text/css">
 8             .alert{
 9                 width: 500px;
10                 height: 300px;
11                 position: fixed;
12                 left: 50%;
13                 top: 50%;
14                 margin-left: -250px;
15                 margin-top: -150px;
16                 background: orangered;
17                 color: #fff;
18                 text-align: center;
19                 border-radius: 20px;
20                 /*line-height: 300px;*/
21                 font-size: 40px;
22                 font-weight: 900;
23                 display: flex;
24                 justify-content: center;
25                 align-items: center;
26             }
27         </style>
28     </head>
29     <body>
30         <input type="text" name="input1" id="input1" value="" />
31         
32         
33         <script type="text/javascript">
34             var input1 = document.querySelector('#input1');
35             //聚焦事件
36             input1.onfocus = function(){
37                 var alertDiv = document.createElement("div")
38                 alertDiv.className = "alert"
39                 alertDiv.innerHTML = "输入密码时候，请注意身旁无人"
40                 document.body.appendChild(alertDiv)
41             }
42         </script>
43     </body>
44 </html>

[6]文档的加载事件-->load

文档或者是图片或者视频，都可以使用onload事件来进行判断内容是否加载完毕。图片想要获取宽高，必须等待图片加载完毕

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <script type="text/javascript">
            
            
            window.onload = function(){
                //文档加载完毕
                console.log('文档加载完毕')
                var d1 = document.querySelector('#d1')
                console.log(d1)
            }
            
            var img = document.createElement("img")
            //在JavaScript里，加载属于异步。
            img.src = 'img/img1.jfif'
            document.body.appendChild(img)
            console.log([img])
            
            
            //调用加载完毕的事件
            img.onload = function(){
                console.log(img.width)
                console.log(img.height)
            }
            
        </script>
        <div id="d1">
            helloworld
        </div>
    </body>
</html>

[7]输入事件-->input

输入事件与按键事件的主要区别在于，输入事件会以输入框是否真正输入新的内容而触发事件。而按键事件是每次按键都会触发。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <input type="text" name="d1" id="d1" value="" />
 9         <h1></h1>
10         
11         <script type="text/javascript">
12             var d1 = document.querySelector('#d1')
13             //输入事件
14             d1.oninput = function(e){
15                 console.log(e)
16                 //假设密码当密码等于123456的时候，那么显示绿色的背景，说明密码输入是正确
17                 console.log([d1])
18                 if(d1.value=='123456'){
19                     d1.style.background = "green"
20                 }else{
21                     d1.style.background = "red"
22                 }
23                 document.querySelector('h1').innerHTML = d1.value
24             }
25             
26             //输入框内容变更事件,并且焦点失去之后才会触发
27             /*d1.onchange = function(e){
28                 console.log(e)
29             }*/
30         </script>
31     </body>
32 </html>

[8]输入内容改变事件 -->change

//输入框内容变更事件,并且焦点失去之后才会触发
            /*d1.onchange = function(e){
                console.log(e)
            }*/

posted @ 2019-06-01 16:19 他也就火三年阅读(439) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部