js 中事件的个人理解

Posted 2022-09-03 cxf1214

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 中事件的个人理解相关的知识，希望对你有一定的参考价值。

事件

事件组成

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

事件对象

类似于飞机的“黑匣子” 用于保存 一个事件发生的时候，所有的信息
比如：事件发生时鼠标的坐标
如何获取事件对象：
    兼容性问题：在不同浏览器上 获取方法不一样
    在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

组合按键了解

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

事件对象 提供了三个属性
altKey
ctrlKey
shiftKey
当我们按下了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重构和回流）
        当我们改变了元素的布局相关样式
        （宽高、位置、元素显示消失）