js 中事件的个人理解

事件

事件组成

1，触发谁的事件    事件源2，触发是什么事件    click  mouseover mouseout3,事件触发之后，干什么    事件函数  （干什么写在事件函数中）

事件对象

类似于飞机的“黑匣子” 用于保存 一个事件发生的时候，所有的信息比如：事件发生时鼠标的坐标如何获取事件对象：    兼容性问题：在不同浏览器上 获取方法不一样    在IE 以及DOM标准：全局的对象（window下）  名字event    在高版本IE 以及 chrome 不支持event来获取事件对象的，另外一种方式        自动变成事件函数的第一个参数（这个参数就是事件对象）兼容性写法：?    btn.onclick=function(ev){        var e = ev || event;    }

注意：    只有事件发生的时候，写在事件函数中，event保存的就是当前事件的所有的信息

事件对象上有用的信息

坐标相关

clientX clientY 事件发生时，光标 距离可视区的坐标

offsetX offsetY 事件发生时 ，光标 距离元素的坐标

pageX pageY 事件发生时，光标距离 页面的距离（和滚动条无关）

判断鼠标按键（左键、右键） 了解

button

判断 点击的 鼠标（左键、右键）

左键：0 右键：2

            var box = document.getElementById("box");            box.onclick = function(ev){                var e = ev||event;                console.log(e.button);

            }            box.oncontextmenu = function(ev){                var e = ev||event;                console.log(e.button);                return false;            }

阻止默认事件：在事件函数中 return false

浏览器事件

• load ： 页面全部资源加载完毕
• scroll ： 浏览器滚动的时候触发
• ...

鼠标事件

• click ：点击事件
• dblclick ：双击事件
• contextmenu ： 右键单击事件 内容菜单事件
• mousedown ：鼠标左键按下事件
• mouseup ：鼠标左键抬起事件
• mousemove ：鼠标移动
• mouseover ：鼠标移入事件
• mouseout ：鼠标移出事件
• mouseenter ：鼠标移入事件
• mouseleave ：鼠标移出事件
• ...

键盘事件

• keyup ： 键盘抬起事件
• keydown ： 键盘按下事件
• keypress ： 键盘按下再抬起事件（时间稍长）
• ...

表单事件

• change : 表单内容改变事件
• input : 表单内容输入事件
• submit : 表单提交事件
• ...

触摸事件 移动端（）

• touchstart ： 触摸开始事件
• touchend ： 触摸结束事件
• touchmove ： 触摸移动事件
• ...

keyCode返回的是当前按键的unidecode编码

回车  13左  37上 38右  39下 40

组合按键 了解

如果一段代码块需要按下多个按钮触发

事件对象 提供了三个属性altKeyctrlKeyshiftKey当我们按下了alt键 altKey的值 是true否则是false

另外一种绑定事件的方式

dom0标准

js中：    元素.on事件名 = 函数

    元素.onclick = function(){//code}

    function fn(){//code}    元素.onclick = fn;?缺点：    1，一个元素，相同的事件只能绑定一个事件函数    2，顺序无法改变 永远是从内向外触发

dom2标准

事件监听?dom标准：?•   元素.addEventListener("事件名",fn[,true/fase]);?优点：?•   可以绑定多个事件?•   可以改变事件触发顺序

兼容性：

IE下事件监听 ?语法：?•   元素.attachEvent("on事件名",fn);注意：不能改变顺序

DOM操作

创建一个dom对象document.createElement("标签名");插入：    内部        父元素.appendChild(插入的元素)        作为父元素的最后一个子元素插入的    外部        父元素.insertBefore(新的元素,在谁之前);删除    父元素.removeChild(删除的元素)替换一个元素    父元素.replaceChild(新的元素,被替换的元素);

文档碎片：    var arr= [1,2,3,4,5,56];            var list = document.getElementById("list");            var container = document.createDocumentFragment();            for(var i=0;i<arr.length;i++){                var oli = document.createElement(‘li‘);                oli.innerHTML = arr[i];                container.appendChild(oli);            }            list.appendChild(container)    作用：提高代码运行效率，减少页面的重新渲染    页面什么时候回重新渲染：    扩展（高工资  dom重构和回流）        当我们改变了元素的布局相关样式        （宽高、位置、元素显示消失）

原文地址：https://www.cnblogs.com/cxf1214/p/11421133.html