事件·上

事件介绍

1, 事件的概念
日常生活中事件: 发生并得到处理的操作(即事情来了, 然后处理)
比如：
1, 电话铃声响起(事件发生) --- 需要接电话（处理）
2, 学生举手请教问题(有事了) --- 需要解答（处理）

在JS中的事件是: 用户在页面上操作, 然后我们要调用函数来处理.
比如: 
1, 点击了登录按钮, 调用登录函数执行登录操作
2, 鼠标拖拽, 调用函数实现拖拽 

事件触发：
用户在页面上操作(如点击按钮, 鼠标滑过, 鼠标点击, 鼠标松开, 文本框获得焦点, 失去焦点等),  就是事件触发.

2, 事件的模式

JavaScript有两种事件实现模式:

内联模式, 脚本模式.

内联模式:

  直接在HTML标签中添加事件.  这种模型是最传统简单的一种处理事件的方法。
  但是这种模式中事件和HTML是混写的, 并没有将JS与HTML分离, 
  当代码量多了以后,对后期代码维护和扩展很不利. 

例如: 
<input type="button" value="按钮" onclick="alert('hello');" /> 
注意: 单双引号

//执行自定义的JS函数 
<input type="button"value="按钮" onclick="btnClick();" /> 

注意: 内联模式调用的函数不能放到window.onload里面, 否则会找不到该函数.

脚本模式(推荐):

脚本模式能将JS代码和HTML代码分离, 符合代码规范.(用script标签或是创建一个js文件)
使用脚本模式我们需要先获取到元素节点对象, 再针对该节点对象添加事件; 
如我们可以采用三种方式来获得节点对象: 
getElementById(), getElementsByTagName(), getElementsByName()

例如: 
    var box = document.getElementById('box'); 
添加事件方式一 :  通过匿名函数，可以直接触发对应的代码 (推荐)
    box.onclick = function() {  //给box节点对象添加点击事件onclick
             console.log('Hello world!'); 
    };

添加事件方式二 :  通过指定的函数名赋值的方式 来执行函数
    box.onclick = func;    //注意这里不能写成func()
    function func() {      //给box节点对象添加点击事件onclick
             console.log('Hello world!'); 
    };

当一个元素上,绑定了内联与脚本, 脚本模式优先:

事件处理由三个部分组成：

1, 触发事件的元素节点对象
2, 事件处理函数
3, 事件执行函数

例如：单击文档任意处。 
document.onclick = function(){ 
console.log('单击了文档页面的某一个地方'); 
};
在上面的程序中：  
document : 是触发事件的对象, 表示触发事件的元素所在区域;
onclick : 表示一个事件处理函数(on+事件类型click)
function(){} : 匿名函数是被执行的函数, 用于触发事件后执行;

所有的事件处理函数都会都有两个部分组成，on+事件类型;
例如 : onclick事件处理函数就是由on加上click;

注意: 事件处理函数一般都是小写字母

事件的分类

事件前要加 on 绑定 或者 emit 触发 或者 off 解绑
事件的分类
  JavaScript 可以处理的事件种类有三种：鼠标事件, 键盘事件和 HTML事件.

1.鼠标事件

鼠标事件，页面所有元素都可触发鼠标事件;

var oBox = document.querySelector(".box");
  //1.单击事件 onclick
  // oBox.onclick = function () {
  //   alert(123);
  // }
  //后面的覆盖前面的事件
  oBox.onclick = function () {
    console.log("单击");
  }
  // 鼠标点击盒子,就会触发,如同 onclick + () ,执行

  //2. 双击 ondblclick
  oBox.ondblclick = function () {
    console.log("双击");
  }

  //3. 鼠标按下
  // onmousedown 先执行,再执行onclick 
  oBox.onmousedown = function () {
    console.log("鼠标按下");
  }

  //4.鼠标抬起 
  // onmousedown --> onmouseup --> onclick
  oBox.onmouseup = function () {
    console.log("鼠标抬起");
  }

  //5.鼠标滚轮事件 
  oBox.onmousewheel = function () {
    console.log("滚轮..onmousewheel");
  }

  //6.鼠标进入 
  oBox.onmouseenter = function () {
    console.log("onmouseenter 鼠标进入");
  }

  //7.鼠标离开
  oBox.onmouseleave = function () {
    console.log("onmoouseleave 鼠标离开");
  }

  //8.鼠标进入
  oBox.onmouseover = function () {
    console.log("onmouseover 鼠标进入");
  }
  //9.鼠标离开
  oBox.onmouseout = function () {
    console.log("onmouseout 鼠标离开");
  }
  //注意:
  //1.  
  // onmouseover优先于onmouseenter
  // onmouseout 优先于onmouseleave

  //2.onmouseover 和onmouseout遇到了子元素也会触发
  //  onmouseenter和onmouseleave,遇到子元素,不会触发
  //10.鼠标移动 
  oBox.onmousemove = function () {
    console.log("鼠标移动");
  }

2. 键盘事件

  键盘事件，在键盘上按下键时触发的事件; 
 (一般由window对象或者document对象调用)
var oTxt = document.querySelector("#txt")
//按键按下
oTxt.onkeydown = function () {
    console.log(this.value);
}
//按键抬起
oTxt.onkeyup = function () {
    console.log(this.value);
}

//非功能键
//不是输入框事件 监听键盘的字符
//了解
oTxt.onkeypress = function (e) {
    //console.log(this.value);
    console.log(e.charCod);
}
//重点 不是键盘事件 是html事件
oTxt.oninput = function (e) {
    console.log(this.value);
}

3. HTML事件

HTML事件，跟HTML页面相关的事件; 
//1.onload 页面加载事件
// 1.dom结构加载完成,并且外部所有的资源,加载完成,才触发
// 2.凡是带有src属性的标签都有一个onload事件 (img,script...)

var startTime;
window.onload = function () {
    console.log("onload");
    var end = new Date();
        console.log((end - startTime) / 1000); //计算页面加载需要多久时间
}

//2.onunload卸载事件 
//  1.关闭浏览器会触发一次, 
//  2.刷新页面也触发1次
//  因为要先清空上一次的页面再加载这一次的页面
window.onunload = function () {
    console.log("卸载事件");
}

//3.页面结构加载完成,就触发事件
window.addEventListener("DOMContentLoaded", function () {
    startTime = new Date();
    console.log("我不需等外部资源加载完,页面机构加载完成,就触发");
})

//4.onresize 改变窗口大小的时候才触发 刷新不触发
window.onresize = function () {
    //1.获取当前浏览器宽度
    var w = document.documentElement.clientWidth
    if (w >= 0 && w < 480) {
        document.body.style.backgroundColor = "green"
        //替换link标签的src路径 响应式布局
    } else if (w >= 480 && w < 780) {
        document.body.style.backgroundColor = "yellow"
    } else if (w >= 780 && w < 960) {
        document.body.style.backgroundColor = "red"
    } else {
        document.body.style.backgroundColor = "pink"
    }
}
//事件的触发 必须先绑定了函数 再触发
window.onresize()


var oTxt = document.querySelector("#txt");
//5.输入框的输入事件
oTxt.oninput = function () {
    console.log(this.value);
}

//6.输入框的内容发生了改变后,光标离开输入框,才会触发
oTxt.onchange = function () {
    console.log(this.value);
}
//7.失去焦点,光标离开输入框,就会触发
oTxt.onblur = function () {
    console.log(this.value);
}
//8.光标聚焦事件
oTxt.onfocus = function () {
    console.log(this.value);
}

//9.onscroll滚动条事件
//给窗口绑定滚动条事件
window.onscroll = function () {
  // console.log("我是窗口的滚动条事件...");
  var Top = document.documentElement.scrollTop; //不可见区域的高度
  console.log(Top);

//给盒子绑定滚动条事件
var oBox = document.querySelector(".box");
oBox.onscroll = function () {
  console.log("111");
}

表单事件

<!-- 表单 -->
<form>
  <p>
    <!-- 表单元素(成员) -->
    用户名:<input name="username">
  </p>
  <p>
    <!-- 表单元素(成员) -->
    密码:<input name="password">
  </p>
  <p>
    <!-- 点击提交按钮,表单会产生默认的提交行为 -->
    <!--  如果写button,不给类型的情况下,在表单里默认是 提交 submit -->
    <button type="submit">提交</button>
    <button type="reset">重置</button>
  </p>
</form>
<script>
  //1.获取到表单对象
  var oForm = document.forms[0]
  //2.给'表单对象',绑定提交行为  不是按钮绑定提交或点击
  //重点
  oForm.onsubmit = function () {
  //1.会触发js onsubmit事件
  console.log("提交");
  return false;//阻止表达的默认行为,不让表单提交
  //2.会触发html的表单提交行为
  
  //了解一下
  oForm.onreset = function () {
  return true;
  }
</script>

事件对象Event

1, 事件对象(event对象) 是什么?

event对象是在触发事件时, 浏览器会通过函数把事件对象作为参数传递过来, 
在事件触发执行函数时一般会得到一个隐藏的参数, 该参数也是放在arguments数组中

//普通函数的arguments 
function func() { 
    console.log(arguments.length); //1, 得到一个传递的参数 
}
func(“hello”);

//事件绑定的执行函数 
box.onclick = function(){ 
   console.log(arguments.length); //1, 得到一个隐藏参数 
};

通过上面两组函数中, 我们发现, 通过事件绑定的执行函数是可以得到一个隐藏参数的. 
说明浏览器会自动分配一个参数，这个隐藏参数其实就是event对象(事件对象).

2, 获取事件对象

box.onclick = function() { 
      console.log(arguments[0]); //获得该事件对象([object MouseEvent])
};

我们还可以使用更简单的获取事件对象的方式: 通过给函数添加一个参数
//接受事件对象, 名称不一定非要evt(这里的evt是形参,也可以自己给定其他名称)
box.onclick = function(evt){ 
     console.log(evt);   //[object MouseEvent]
};
通过事件的执行函数传入的event对象(事件对象) 不是在所有浏览器都有值,  
在IE浏览器上event对象并没有传过来, 这里我们要用window.event来获取, 
而在火狐浏览器上window.event无法获取, 而谷歌浏览器支持event事件传参和window.event两种, 
为了兼容所有浏览器, 我们使用以下方式来得到event事件对象: 

box.onclick = function(evt){ 
     var e= evt || window.event; //获取到event对象(事件对象)
     console.log(e);
};

其中window.event中的window可以省略, 最终我们可以写成: 
box.onclick = function(evt){ 
     var e= evt || event; //获取到event对象(事件对象)
     console.log(e);
};

注意: evt||event不要倒过来写

3, 事件对象的属性

//1.e.button onmousedown  0 左键, 1 滚轮键 2 右键
window.onmousedown = function (evt) {
  var e = evt || window.event
  console.log(e.button);  //onmousedown  0 左键, 1 滚轮键 2 右键
}

window.onkeydown = function (evt) {
  var e = evt || window.event;
  //2.e.keyCode 没有小写,全是大写  13 回车键 ,37,38,39,40 左上右下
  // console.log(e.keyCode);
  //3.e.key按键的字符
  console.log(e.key); //按键的字符

var oBox = document.querySelector(".box");
oBox.onclick = function (evt) {
  var e = evt || window.event;
  
  //4.e.clientX,e.clientY 鼠标点击的点,到当前浏览器左上角的距离
  console.log(e.clientX, e.clientY);
  
  //5.e.pageX,e.pageY 鼠标点击的点,到页面左上角的距离
  console.log(e.pageX, e.pageY);
  
  //6.e.offsetX,e.offsetY 鼠标点击的点,到当前元素左上角的距离
  console.log(e.offsetX, e.offsetY);
  
  //7.e.screenX,e.screenY 鼠标点击的点,到当屏幕左上角的距离
  console.log(e.screenX, e.screenY);
  
  //8.e.target e.srcElement 鼠标点击的目标元素, target不一定等于this
  console.log(e.target, this);
  
  //9.e.type  事件的类型,返回的值,不带on ,例如onclick -->click
  console.log(e.type);
  
  //10.e.altKey 是否按下了altKey
  console.log(e.altKey);//打印的是true或者false
  
  //11.e.shiftKey  是否按下了shiftKey
  console.log(e.shiftKey);
  
  //12.e.ctrlKey  是否按下了ctrlKey
  console.log(e.ctrlKey);
  
  //13.e.mateKey  window ,田(win键),command键
  console.log(e.metaKey);
}