JavaScript-3

onmousemove

该事件将会在鼠标在元素中移动时被触发

  <style>
    #a1{
      width: 200px;
      height:100px;
        border: 2px solid red;
    }
    #a2{
      width: 200px;
      height: 50px;
        border: 2px solid #14dc2f
    }
  </style>

</head>
<body>
<div id="a1"></div>
<br>
<div id="a2"></div>


<script>
    var a1=document.getElementById("a1");
    var a2=document.getElementById("a2");
    /*
    事件对象
    -当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，
在事件对象中封装了当前事件相关的一切信息，比如:鼠标的坐标键盘哪个按键被按下鼠标滚轮滚动的方向。。。
     */

    a1.onmousemove=function (e) {
    var x=e.clientX;
    var y=e.clientY;
    a2.innerHTML="x="+x+",y="+y;
    }

获取到鼠标的坐标

clientX和clientY
用于获取鼠标在当前的可见窗口的坐标div的偏移量，是相对于整个页面的
pageX和pageY可以获取鼠标相对于当前页面的坐标

事件的冒泡（Bubble)

所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡 event.cancelBubbl = true;

我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的我们可以尝试将其绑定给元素的共同的祖先元素

事件的委派

指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

target

event中的target表示的触发事件的对象

事件的绑定

使用对象.事件=函数的形式绑定响应函数，
它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的

addEventListener()

通过这个方法也可以为元素绑定响应函数
参数:
1.事件的字符串，不要on
2.回调函数，当事件触发时该函数会被调用
3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false

btne1.addEventListener("click",function(){}，false);

使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行

事件的传播

关于事件的传播网景公司和微软公司有不同的理解
微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件,
然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件.
然后在向内传播给后代元素
w3C综合了两个公司的方案，将事件传播分成了三个阶段
1. 捕获阶段
  -在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2. 目标阶段
  事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3. 冒泡阶段
  -事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

-如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为tru

拖拽box1元素

-拖拽的流程

当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
当鼠标松开时，被拖拽元素固定在当前位置onmouseup

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Day110801</title>
    <style>
        #box1{
            width: 50px;
            height: 50px;
            background-color: aqua;
            position: absolute;
        }
    </style>
</head>
<body>
<p>555</p>
<div id="box1">
    33
</div>


<script>
    var box1 = document.getEle33mentById("box1");
    //为box1绑定一个鼠标按下事件
    //当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
    box1.onmousedown=function (e) {
        // div的偏移量鼠标.clentx -元素.offsetLeft
        // div的偏移量鼠标.clentY -元素.offsetTop
        var ol=e.clientX-box1.offsetLeft;
        var ot=e.clientY-box1.offsetTop;
        //为document绑定一个onmousemove事件
        document.onmousemove=function (event) {
            //当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
            // 获取鼠标的坐标
            var left=event.clientX;
            var top=event.clientY;
            //修改box1的位置
            box1.style.left=left-ol+"px";
            box1.style.top=top-ot+"px";
        }
        //为元素绑定一个鼠标松开事件
        document.onmouseup=function () {
            //当鼠标松开时，被拖拽元素固定在当前位置onmouseup
            // 取消document的onmousemove事件
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }
</script>
</body>
</html>

为box1绑定一个鼠标滚轮滚动的事件

box1.onmousewheel = function()

判断鼠标滚轮滚动的方向
event.wheelDelta 可以获取鼠标滚轮滚动的方向

向上滚120 ,向下滚–120
wheelDelta这个值我们不看大小,是看正负

当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，这是浏览器的默认行为，如果不希望发生，则可以取消默认行为

return false;

键盘事件:

按键被按下,onkeydown
- 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
- 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快
按键被松开,onkeyup

键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document

可以通过keyCode来获取按键的编码通过它可以判断哪个按键被按下

除了keycode，事件对象中还提供了几个属性

altKey,ctrlKey,shiftKey
-这个三个用来判断alt ctrl 和shift是否被按下
如果按下则返回true，否则返回false

取消了默认行为

//在文本框中输入内容，属于onkeydown的默认行为
//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中return false;

BOM

浏览器对象模型
BOM可以使我们通过JS来操作浏览器
在BOM中为我们提供了一组对象，用来完成对浏览器的操作
BOM对象

window

代表的是整个浏览器的窗口，同时window也是网页中的全局对象

Navigator

-代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器

Location

-代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面

History

-代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页而且该操作只在当次访问时有效

screen

-代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息.

Navigator

代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
一般我们只会使用userAgent来判断浏览器的信息，
userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent

History

length
-属性，可以获取到当成访问的链接数量

back()
-可以用来回退到上一个页面，作用和浏览器的回退按钮一样

forward()
-可以跳转下一个页面，作用和浏览器的前进按钮一样

go()
-可以用来跳转到指定的页面-它需要一个整数作为参数
1:表示向前跳转一个页面

2:表示向前跳转两个页面

-1;表示向后跳转一个页面

-2∶表示向后跳转两个页面

Location

-该对象中封装了浏览器的地址栏的信息

如果直接将location属性修改为一个完整的路径，或相对路径则我们页面会自动跳转到该路径

reload()

用于重新加载当前页面，作用和刷新按钮一样
如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面

replace( )
-可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
不会生成历史记录，不能使用回退按钮回退

定时器简介

setInterval()

定时调用
可以将一个函数，每隔一段时间执行一次

-参数;

1.回调函数，该函数会每隔一段时间被调用一次

2.每次调用间隔的时间，单位是毫秒

-返回值:
返回一个Number类型的数据
这个数字用来作为定时器的唯—标识

clearInterval()

可以用来关闭一个定时器
方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器

<h1 id="count"></h1>

<script>
  var count=document.getElementById("count");
  var i=1;
  var number = setInterval(function () {
    count.innerHTML=i++;
    if (i==5){
      clearInterval(number);
    }

  },1000);

目前，我们每点击一次按钮，就会开启一个定时器，
点击多次就会开启多个定时器，这就导致图片的切换速度过快，并且我们只能关闭最后一次开启的定时器

//在开启定时器之前，需要将上一个定时器关闭clearInterval(timer) ;

延时调用，

延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次

使用clearTimeout(()来关闭一个延时调用

修改box的class属性

我们可以通过修改元素的class属性来间接的修改样式这样一来，我们只需要修改一次，即可同时修改多个样式，浏览器只需要重新渲染页面一次，性能比较好，
并且这种方式，可以使表现和行为进—步的分离

box.className += " b2";

JSON

JS中的对象只有JS自己认识，其他的语言都不认识
SON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，
并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互
JSON
- javaScript object Notation JS对象表示法
- JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号

SON分类:
1.对象{ }

2.数组「]

JSON中允许的值:

1.字符串2.数值3.布尔值4.null5.对象6.数组

将JSON字符串转换为JS中的对象
在JS中，为我们提供了一个工具类，就叫JSON

json -->js对象

SON.parse()
-可以将以JSON字符串转换为js对象
-它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回

  var json='{"name":"小米","age":55,"gender":"男"}';
  //所有都为字符串，数值等
  var o=JSON.parse(json);
  alert(o.name);

JS对象---> JSON

JSON.stringify ()
-可以将一个JS对象转换为JSON字符串
-需要一个js对象作为参数，会返回一个JSON字符串

526互联

JavaScript-3

JavaScript-3

onmousemove

获取到鼠标的坐标

事件的冒泡（Bubble)

事件的委派

target

事件的绑定

事件的传播

拖拽box1元素

为box1绑定一个鼠标滚轮滚动的事件

键盘事件:

取消了默认行为

BOM

window

Navigator

Location

History

screen

Navigator

History

Location

定时器简介

clearInterval()

延时调用，

修改box的class属性

JSON

JSON中允许的值:

json -->js对象

JS对象---> JSON