javaScript中的事件

1.事件的概念

在js中的事件是：用户在页面上操作，然后外面要调用函数来处理。

比如：

1.点击了登录按钮，调用登录函数执行登录操作

2.鼠标拖动，调用函数实现拖动

事件触发：

用户在页面上操作（如点击按钮，鼠标话滚动，鼠标点击，鼠标松开，文本获取焦点等...）,就是事件触发。

2.事件的模式:

        JavaScript有两种事件实现模式: 内联模式, 脚本模式.

内联模式：

例如：

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

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

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

直接在HTML标签中添加事件，最传统简单的处理方式，但是这种模式中事件和HTML是混写的，并没有将js与HTML分离，当代码最多以后会影响代码的维护和扩展。

脚本模式：

脚本模式能将js代码和HTML代码分离，符合代码规划。使用脚本模式我们需要先获取到元素节点对象，在针对该节点对象添加事件。可以通过三种方式来获取节点对象：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;

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

3.事件的分类

javaScript可以处理的事件种类右三种：鼠标事件，键盘事件和HTML事件。

1.鼠标事件

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

onclick:点击事件

onclick = function() {
        console.log('单击了鼠标'); 
};

ondblclick:双击事件

ondblclick = function() {
        console.log('双击了鼠标'); 
};

onmousedown:按下鼠标不松开触发

onmousedown = function() {
        console.log('按下鼠标'); 
};

onmouseup:松开鼠标按钮时触发

onmouseup = function() {
        console.log('松开了鼠标'); 
};

onmouseover:鼠标移入某个元素触发

onmouseover = function() {
        console.log('鼠标移入了'); 
}; 

onmouseout:当鼠标移出某个元素触发

onmousemove = function() {
        console.log('鼠标移动了'); 
};  

onmoouseenter:当鼠标移入某个元素那一刻触发

onmouseenter = function() {
        console.log('鼠标移入了'); 
}; 

onmouseleave:当书鼠标移出某个元素那一刻触发

onmouseleave = function() {
        console.log('鼠标移出了'); 
};

onmouseover与onmouseenter的区别是：

前者会影响子元素的触发事件，后者不会影响

4.阻止事件冒泡事件和默认行为

事件流

        事件流是描述的从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候，那么你点击其中的一个元素，并不是只有当前被点击的元素会触发事件，而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式：冒泡和捕获.

事件冒泡

        事件冒泡是从里往外逐个触发，事件捕获，是从外往里逐个触发，现代的浏览器默认情况下都是事件冒泡的模式。

冒泡传递事件

document.onclick=function(){ 
      console.log('我是 document'); 
}; 
document.documentElement.onclick=function() { 
      console.log('我是 html'); 
}; 
document.body.onclick= function(){ 
      console.log('我是 body'); 
};
document.getElementById('box').onclick=function() { 
      console.log('我是 div'); 
}; 
document.getElementsByTagName('input')[0].onclick= function(){
      console.log('我是 input'); 
};

阻止事件冒泡

e.stopPropagation()//兼容问题 不兼容ie 遵从w3c规范
e.cancelBubble = true //兼容ie 不遵从w3c规范
//兼容写法
e.stopPropagation?e.stopPropagation():e.cancelBubble = true

阻止事件默认行为

e.preventDefault() //兼容问题
e.returnValue = false //兼容
return false //后续的代码是不会执行 放在最后面
e.preventDefault?e.preventDefault():e.return = false

5.offset家族（元素的属性 只读属性）

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

offsetLeft 左边的偏移量offsetTop 上面的偏移量

offsetWidth 自身宽度 offsetHeight 自身高度

6.事件监听器

添加addEventListener

element.addEventListener('事件名',function(){

},false)//参数1 事件名 参数2 方法 参数3 是否捕获 默认false为冒泡

删除removeEventListener

element.removeEventListener('事件名',function(){
    
})//如果里面的参数2为一个function声明 那么讲不能删除 建议抽取处这个function

7.获取样式（元素样式）

window.getComputedStyle() //获取样式

window.getComputedStyle(元素,null)//第一个参数为元素 第二个参数为null 也可以省略
//兼容写法
var style = window.getComputedStyle?window.getComputedStyle():window.currentStyle

8.事件委托机制

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

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

9.拖拽的实现

主要运用的是onmousedown鼠标按下 onmousemove鼠标移动 onmouseup鼠标弹起

例如：

//样式 
    <style>
        .bigBox{
            width: 500px;
            height: 500px;
            background: pink;
            position: relative;
        }
        #box{
            width: 50px;
            height: 50px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>

<div class="bigBox">
        <div id="box"></div>
    </div>
    <script>
        //实现拖拽
        //鼠标按下onmousedown 鼠标移动onmousemove 鼠标松开onmouseup
        //offset属性只能读取不能设置
        var box = document.getElementById('box')
        var bigBox = document.getElementsByClassName('bigBox')[0]
        box.onmousedown = function () {
            box.onmousemove = function (e) {
                e = e || window.event
                //获取最大盒子的偏移量
                var bigx = bigBox.offsetLeft
                var bigy = bigBox.offsetTop
                //获取鼠标的坐标
                var mouseX = e.pageX
                var mouseY = e.pageY
                //中心点要减去的高度
                var w = box.offsetWidth/2
                var h = box.offsetHeight/2
                //定位设置left值以及top值
                //鼠标坐标-原本的宽度的一半-大盒子的偏移量
                var left = mouseX-w-bigx
                var top = mouseY-h-bigy
                this.style.left = left+'px'
                this.style.top = top+'px'
                //里面盒子的偏移
                var x = box.offsetLeft
                var y = box.offsetTop
                //区间设置
                if (x<0) {
                    this.style.left = '0px'
                }
                if(y<0){
                    this.style.top = '0px'
                }
                //x，y的最大区间
                if(x>bigBox.offsetWidth-w*2){
                    this.style.left = bigBox.offsetWidth-w*2+'px'
                }
                if (y>bigBox.offsetHeight-h*2) {
                    this.style.top = bigBox.offsetHeight-h*2+'px'
                }
            }
        }
        //鼠标弹起啥也不干
        box.onmouseup = function () {
            box.onmousemove = function () {
                
            }
        }