JavaScript Day_10

JavaScript Day_10

事件

1.JS中的事件

用户在页面上操作，然后调用函数处理

2.事件触发

用户在页面上操作（如点击按钮，鼠标滑过，鼠标松开，文本框获取焦点，失去焦点等），就是事件触发

3.事件的模式

javascript有两种事件实现模式：内联模式，脚本模式

内联模式

直接在HTML标签中添加事件，这种模式是最简单的处理事件的方法，但是与HTML混写的，不利于后期代码维护和更新

例如：<input type = "text",onclick=alert('123')>

注意：内联模式下调用的函数不能放在window.onload里面。否则会找不到函数

脚本模式

脚本模式能将JS代码和HTML代码分离, 符合代码规范，使用脚本模式我们需要先获取到元素节点对象, 再针对该节点对象添加事件

例如: 
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!'); 
};

4.事件处理

事件处理由三个部分组成

1.触发事件的元素节点对象

2.事件处理函数

3.事件执行函数

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

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

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

5.事件的分类

Javascript处理事件的种类分三种：鼠标事件、键盘事件、HTML事件

鼠标事件

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

click //鼠标点击
dblclick //鼠标双击
mouseover //鼠标移入
mouseout //鼠标移出
mousedown //当按下了鼠标还未松开时触发
mouseup //释放鼠标按钮时触发
mousemove //当鼠标指针在某个元素上移动时触发
mouseenter //当鼠标移入某个元素的那一刻触发

mouseover和 mouseenter的区别是:
mouseover: 元素的子元素移入也会触发事件
mouseenter : 元素的子元素移入不会触发事件

键盘事件

在键盘上按下键时触发的事件（一般由window对象或者document对象调用）

keydown //当用户按下键盘上某个键触发，如果按住不放，会重复触发
window.onkeydown = function() {
        console.log(按下了键盘上的某个键); 
};
keypress //当用户按下键盘上的字符键触发，如果按住不放，会重复触发
window.onkeypress = function() { 
        console.log('按下了键盘上的字符键'); 
};
keyup //当用户释放键盘上的某个键触发。
window.onkeyup = function() {
        console.log(松开键盘上的某个键); 
};

HTML事件

跟HTML页面相关的事件

select //当用户选择文本框(input 或 textarea)中的内容触发。 
input.onselect = function() { 
        console.log('选择了文本框中的内容'); 
};
change //当文本框(input 或 textarea)内容改变且失去焦点后触发。 
input.onchange = function() { 
        console.log('文本框中内容改变了'); 
};
focus //当页面或者元素获得焦点时触发。 
input.onfocus = function() { 
        console.log('文本框获得焦点'); 
};
blur //当页面或元素失去焦点时触发。
input.onblur = function() { 
        console.log('文本框失去焦点'); 
};
submit //当用户点击提交按钮在<form>元素节点上触发。
form.onsubmit = function() { 
        console.log(‘提交form表单’);  
};
reset //当用户点击重置按钮在<form>元素节点上触发。 
form.onreset = function() { 
        console.log('重置form表单'); 
};
scroll //当用户滚动带滚动条的元素时触发。
window.onscroll= function() { 
        console.log('滚动了滚动条了'); 
};

6.事件对象

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

获取事件对象

我们可以使用更简单的获取事件对象的方式: 通过给函数添加一个参数
//接受事件对象, 名称不一定非要evt(这里的evt是形参,也可以自己给定其他名称)
box.onclick = function(evt){ 
     var e= evt || event; //获取到event对象(事件对象) 同时考虑到浏览器兼容问题
     console.log(e);
};
注意: evt||event不要倒过来写

事件对象的属性

button:鼠标按下了哪个键 0表示鼠标左键，1表示鼠标滚轮，2表示鼠标右键

client: 浏览器可视区域的坐标

page: 浏览器内容区域的坐标

screen: 显示器屏幕的坐标

offsetX: 鼠标点击的元素位置距离元素左边界的x坐标

offsetY: 鼠标点击的元素位置距离元素上边界的y坐标

target: 目标对象,存放绑定事件的元素节点对象

键盘事件的组合键

shiftKey 判断是否按下了shift键

ctrlKey 判断是否按下了ctrl键

altKey 判断是否按下了alt键

键码：keyCode属性

所有按键(包括功能键control, alt,shift, tab, 方向键等, 不包括亮度,音量…的按键)在发生 keydown和keyup 事件时，event对象的 keyCode属性中会包含一个代码，与键盘上一个特定的键对应。对数字字母字符集，keyCode属性的值与 ASCII 码中对应.

document.onkeydown = function(evt) { 
      var e = evt || event;
      console.log(e.keyCode);  //按任意键，得到相应的 keyCode 
};
注意: 大写字母或小写的编码相同, 都为大写字母

字符编码：charCode属性

Firefox, Chrome和Safari的event对象支持charCode属性, 只有按下字符键并且使用keypress事件时才会得到charCode, 这个charCode的值和ASCII码对应, 和keyCode也类似, 但是charCode的字母区分大小写. ( 字符键: 数字, 字母(区分大小写), 字符, 空格, 回车 )

document.onkeypress = function(evt) { 
      var e = evt || event;
      console.log(e.charCode);
}
注：可以使用 String.fromCharCode()将 ASCII 编码转换成实际的字符

7.阻止事件冒泡

事件冒泡是从里往外逐个触发. 事件捕获, 是从外往里逐个触发. 现代的浏览器默认情况下都是事件冒泡的模式.但是一般我们只在指定的节点上添加事件, 而不想让其传递到下层节点触发事件, 这样我们就需要阻止事件冒泡;

阻止事件冒泡的方法

1, 取消冒泡,  IE
     e.cancelBubble = true; //兼容各大浏览器，但不遵从w3c原则
2, 停止传播, 非IE
     e.stopPropagation(); // 兼容各大浏览器，遵从w3c原则，IE9之前不兼容
 //可以通过下述两个方法取消事件冒泡
     if(e.stopPropagation){
			e.stopPropagation();
     }else{
     	e.cancelBubble = true 
     };
 e.stopPropagation?e.stopPropagation():e.cancelBubble = true 

阻止浏览器默认行为

return false //常用的阻止默认行为，遵从w3c但是ie9之前不兼容
e.preventDefault() //ie兼容，其他浏览器也可以使用
e.returnValue = false //针对低版本浏览器
e.preventDefault?e.preventDefault():e.returnVale=false

offset家族

offsetParent 基于偏移的父元素 （有定位就近原则，没定位找body）

offsetLeft 左边的偏移量

offsetTop 上面的偏移量

offsetWidth 自身宽度

offsetHeight 自身高度

阻止右键菜单

在之前使用event对象的button属性时, 点击鼠标右键会弹出系统菜单, 如果我们想要创建自己的右键菜单, 则需要先阻止默认的右键菜单

document.oncontextmenu = function(){
      console.log("右键被按下");
      return false;
}

8.拖拽

拖拽: 就是按住元素后移动位置, 最后松开的过程

实现拖拽相关的三大事件

onmousedown : 鼠标按下
onmousemove : 鼠标移动
onmouseup : 鼠标松开

实现拖拽思路

1, 给目标元素添加onmousedown事件(鼠标按下事件)
在鼠标按下的瞬间, 记录鼠标所在位置与目标元素左边界的距离, 以及与上边界的距离
2, 当onmousedown事件发生以后(鼠标按下后)，就给document添加onmousemove事件(鼠标移动事件)
3, 在onmousedown事件(鼠标按下事件)发生以后，给document再添加onmouseup事件(鼠标松开事件)，且在onmouseup事件中，取消document的onmousemove事件;

注意:

onmousedown触发事件的对象: 目标元素(即要拖拽的元素);
onmousemove触发事件的对象: document
onmouseup触发事件的对象: document

onmousemove和onmouseup的触发事件对象都是document, 意味着鼠标在网页的任意位置移动鼠标或松开鼠标，都会触发对应的事件;

onmousemove和onmouseup 都要写在onmousedown事件中, 这样就可以保证鼠标按下后才可以移动目标元素(onmousemove)或停止移动(onmouseup)

onload = function() {
    var box = document.getElementById("box");
    //鼠标按下
    box.onmousedown = function(evt) {
        var e = evt || event;
        //计算鼠标位置与div左边和上边的距离
        var disX = e.clientX - box.offsetLeft;
        var disY = e.clientY - box.offsetTop;
        //鼠标移动
        document.onmousemove = function(evt) {
            var e = evt || event;
            box.style.left = e.clientX - disX + "px";
            box.style.top = e.clientY - disY + "px";
        }
        //鼠标松开
        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
}

获取style样式

if (window.getComputedStyle) {
    style = window.getComputedStyle(box, null);    //支持IE9+及非IE浏览器
} else { 
    style = box.currentStyle;  // IE8及以前
} 

9.事件监听器

事件监听器, 是JS事件中的一种事件触发机制, 我们可以通过添加事件监听器的方式给元素添加事件及执行函数

添加事件监听器

box.addEventListener(“click”, func, false) : 给box元素添加点击事件(click), 以及事件执行函数func. 针对该函数的三个参数作说明:
第一个参数(“click”) : 事件名称(前面没有on)
第二个参数(func): 事件执行函数名称(没有双引号, 也没有())
第三个参数(false/true) : 是否使用捕捉(反向冒泡)，默认false，为冒泡

移除事件监听器

box.removeEventListener(“click”, func) : 将box元素的点击事件(click), 以及对应的事件执行函数func移除
注: 这里只会删除使用box.addEventListener()方法添加的事件监听器

注: IE8及其以下不支持，火狐和谷歌支持。

10.事件委托机制

主要是将事件委托给父元素，在父元素内使用target进行判断当前点击的是哪个元素，再进行相关操作

// 利用事件委托机制给ul添加
var box = document.getElementById('box')
box.onclick = function(e){
    //通过e.target找到你点击的目标元素
    console.log(e.targrt.innerText)
}