事件

最新推荐文章于 2023-10-09 19:45:00 发布

yee只鸟儿.

最新推荐文章于 2023-10-09 19:45:00 发布

阅读量184

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/yeee1128/article/details/103432706

版权

笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1.事件对象 event（每个事件发生时，都会产生自己的事件对象,他们的值都不一样）
事件处理函数：当事件发生的时候调用的函数
事件对象：当事件发生的时候，浏览器会将事件相关的信息(鼠标位置，事件类型，)存储在事件对象中，event

事件对象兼容：var ev = window.event || ev;

//console.log(window.event);//低版本ff undefined
//console.log(ev);  //chrome  ,  ff, ie不支持
document.onclick = function (ev) {
//1.兼容 window.event || ev
var ev = window.event || ev;
}

事件对象属性：
type:获取事件类型
target：（srcElement 兼容ie8）：获取触发事件的对象
clientX,clientY:获取鼠标当前位置，相对于屏幕
pageX,pageY:获取鼠标当前位置，相对于页面
shiftKey,ctrlKey,altKey:布尔值，是否按了对应的功能键

事件对象常用属性：
//2.事件对象属性
console.log(ev);
console.log(ev.type); //事件类型 click
console.log(ev.target||ev.scrElement); //事件目标：具体发生事件的元素
console.log(ev.clientX+"-----------"+ev.clientY);//鼠标位置，相对屏幕
console.log(ev.pageX+"-----------"+ev.pageY);//鼠标位置，相对于body
console.log(ev.ctrlKey); //事件发生的时候有没有按ctrl键按了-true 没按-false
console.log(ev.altKey); //事件发生的时候有没有按ctrl键按了-true 没按-false
console.log(ev.shiftKey); //事件发生的时候有没有按ctrl键按了-true 没按-false

2.事件绑定：
标签.事件这种方式添加的事件，如果给同一个元素添加同一个事件，后面的会覆盖前面。

//如果给同一个元素添加同一个事件，后面的会覆盖前面
oDiv.onclick = function () {
    console.log("tag");
}
oDiv.onclick = function () {
    console.log("id");
}

事件绑定：
特点：可以给一个元素添加多个一样的事件，不会覆盖

标准浏览器：标签.addEventListener(事件类型(不加on),事件处理函数,是否捕获（默认是false）)
ie浏览器：标签.attachEvent(事件类型(加on),事件处理函数)

function fun1() { alert(1);}
function fun2() {alert(this);}
oDiv.addEventListener(“click”,fun1); //1
oDiv.addEventListener(“click”,fun2); //div
//2.ie浏览器的事件绑定
oDiv.attachEvent(“onclick”,fun1);
oDiv.attachEvent(“onclick”,fun2);

兼容：对于两个方法的兼容，一般是用其中的一个方法作为判断条件
if(oDiv.addEventListener){ //标准 true 非0为真  0 false null undefined
    oDiv.addEventListener("click",fun1);
}else{
    oDiv.attachEvent("onclick",fun1)
}

封装：声明一个函数，将主要代码放进去，找可变的值做参数，调用调试

//2.封装
function bind(elem,type,fun) { //标签：elem   事件：type  处理函数：fun
    if(elem.addEventListener){ //true 非0为真  0 false null undefined
        elem.addEventListener(type,fun);
    }else{
        elem.attachEvent("on"+type,fun);
    }
}

   
 区别：
       事件类型标准浏览器不加on，ie加on
       标准浏览器有捕获，ie没有
       标准浏览器正序执行，ie低版本逆序
       标准浏览器this指向触发事件的对象，ie指向window

3.事件取消事件不取消就会一直执行
不同的添加事件的方式，需要用不同的取消方式

标签.事件 ----> 标签.事件=null
标签.addEventListener -- 标签.removeEventListener(事件类型，事件处理函数，是否捕获)
标签.attachEvent ---- 标签.detachEvent(事件类型，事件处理函数)

标签.事件添加事件的取消
oDiv.onclick = function () {
    alert("一等奖");
    oDiv.onclick = null;
}

标签.addEventListener添加事件的取消
function fun1() {
    alert(1);
   oDiv.removeEventListener("click",fun1);//点击弹框的确定后，再点击div就不会再弹框
}
oDiv.addEventListener("click",fun1);

标签.attachEvent添加事件的取消
function fun2() {
    alert(2);
    oDiv.detachEvent("onclick",fun2);
}
oDiv.attachEvent("onclick",fun2);

4.阻止事件冒泡
DOM事件流：
事件捕获机制：当事件发生的时候，事件从window开始，一层一层往里传递，一直传递到事件目标。
确定目标阶段：
事件冒泡机制：由事件目标开始处理当前事件，处理完了以后，会将事件依次传递给父元素，一直传递到window。
一般都是在冒泡阶段处理事件，ie没有捕获只有冒泡
//1.点击按钮，让div显示
oBut.onclick = function () {
oDiv.style.display = “block”;
}
//2.点击页面空白部分，让div消失
document.onclick = function () {
oDiv.style.display = “none”;
}
上面代码中，点击按钮，显示div，点击空白部分消失，但是点击什么效果都没有，这是因为点击按钮处理好事件以后，事件传递到了父元素document.让div里面消失，因此什么效果都没有。
阻止事件冒泡：

标准浏览器：ev.stopPropagation()  ie678不兼容
ie浏览器：ev.cancelBubble = true;

方法的兼容用带（）的作为判断条件
冒泡从里向外冒，所以应从里面开始阻止冒泡

//1.点击按钮，让div显示
oBut.onclick = function (ev) {
    var ev = window.event || ev;
    oDiv.style.display = "block";

//取消事件冒泡
ev.stopPropagation?ev.stopPropagation():ev.cancelBubble = true;
}
//2.点击页面空白部分，让div消失
document.onclick = function () {
    oDiv.style.display = "none";
}

5.阻止事件默认行为
浏览器赋予的某些动作的默认行为。例如点击a就是跳转，右击就是弹出菜单
不同的添加方式，有不同的阻止方式

标签.事件   return false
标签.addEventListener --- > ev.preventDefault();
标签.attachEvent ----- ev.returnValue = false;

oA.onclick = function () {
    //取消默认行为
    return false;
}

bind(oA,"click",function (ev) {
    var ev = window.event ||ev;
    //取消默认行为
    //ev.preventDefault();
    //ev.returnValue = false;
    ev.preventDefault?ev.preventDefault():ev.returnValue = false;
})

6.键盘事件
键盘事件：onkeydown（ev.keyCode不区分大小写，默认大写），onkeyup，onkeypress(ev.keyCode区分大小写)
一般我们用就onkeydown，而且需要添加在document上，window上添加的话，在ie中是没有效果的。

document.onkeydown = function (ev) {
   //1.获取事件对象
    var ev = window.event || ev;
    //2.获取按键信息
    console.log(ev.key); //获取到具体的按钮：a b  ，ie获取不到--undefined
    console.log(ev.keyCode);//获取的按键编码 --大写字符  “0”-48 A-65   a-97  不区分大小写，大写
    console.log(ev.altKey); //有没有按这个键
    console.log(ev.ctrlKey); //有没有按这个键
    console.log(ev.shiftKey); //有没有按这个键，按了true  没有false
}

例：
document.onkeydown = function(ev){
    var ev =window.event || ev;
    //2.通过键盘按键，控制div的运动 w  a  s d
    switch (ev.keyCode){
        case 65 : oDiv.style.left = oDiv.offsetLeft - 10 +"px";break;
        case 68 : oDiv.style.left = oDiv.offsetLeft + 10 +"px";break;
        case 87 :  oDiv.style.top = oDiv.offsetTop - 10 +"px";break;
        case 83 :  oDiv.style.top = oDiv.offsetTop + 10 +"px";break;
    }
}

7.事件代理（委托）

  <!-- 
        事件委托(代理)：提高性能

        给10000个li加点击事件 
        不要大批量循环，浪费性能

        设置代理：设置给父元素，子元素发生事件的时候通过冒泡传递给父元素  

     -->

     <script>
        var oUl= document.getElementsByTagName("ul")[0];
        
        oUl.onclick = function (ev) {
            var ev = window.event || ev;
            //ev.target ： 事件目标  获取到具体发生事件的子元素
            var target = ev.target || ev.srcElement;

            target.style.background = "red";
        }

        //事件可以发生在未来
        oUl.innerHTML += "<li>9</li>";
        oUl.innerHTML += "<li>10</li>";

8.滚轮事件
模板

/*
  chrome ,ie : onmousewheel
               ev.wheelDelta:120  上    -120下
  ff:必须用事件绑定的方式添加  addEventListener('DOMMouseScroll')
               ev.detail  -3 上     3 下
*/
document.onmousewheel = scroll;
if(document.addEventListener){
    document.addEventListener("DOMMouseScroll",scroll);
}
function scroll(ev) {
    var ev = window.event || ev;
    /*console.log(ev.wheelDelta);//ie chrome 120 -120
    console.log(ev.detail); //ff*/
    var tag = true; //true--上  false-下
    if(ev.wheelDelta){ //ie chrome
        tag = ev.wheelDelta > 0 ? true :false;
    }else{ //ff
        tag = ev.detail > 0 ? false :true;
    }
    if(tag){
       console.log("上");
    }else{
        console.log("下");
    }

}

右键自定义菜单
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>es6+nodejs</li>
    </ul>

    <script>
        //1.获取标签
        var oUl = document.getElementsByTagName("ul")[0];

        //2.右击显示自定义菜单
        document.oncontextmenu = function(ev){
            var ev = window.event || ev;
            //显示自定义菜单
            oUl.style.display = "block";

            //设置自定义菜单的位置
            oUl.style.left = ev.clientX + "px";
            oUl.style.top = ev.clientY + "px";

            //阻止默认行为
            return false;
        }
        //标准：ev.preventDefualt
        //ie:ev.returnValue=false

        //鼠标事件 onclick，onmouseover/onmouseenter onmouseout/onmouseleave onmousedown onmouseup 
    </script>
</body>