js事件

来源：互联网发布：淘宝客招代理话术编辑：程序博客网时间：2024/06/09 22:11

事件

1 事件的概念

事件源

事件名

事件注册

事件处理

以火灾为例：

酒店201房间发生火灾，119电话报警，南湖区消防支队出警赶赴现场，通过洒水作业成功灭火。

事件源：酒店201房间

事件名：火灾

事件注册：事先已经规划好片区，酒店所属片区归南湖区县防指对负责。

事件处理：洒水灭火

2 常用事件

鼠标常用事件：

(1) 点击事件onclick

<body>
<p id="p1"onclick="fun()">点击事件测试</p>
</body>
<script>
    function fun(){
        //获取到指定元素
        var p1=document.getElementById("p1");
        p1.innerText="我被换掉了！";
        p1.style.fontSize="60px";
    }
</script>

这个案例里，事件源就是id为“p1”的元素，事件名就是单击，事件注册是onclick="fun()"，即当点击id为“p1”的元素时，就交由fun函数来处理。

（2）双击事件

    <styletype="text/css">
        #div1{
            width:100px;
            height:100px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div id="div1" onclick="zoomout()"ondblclick="zoommin()"></div>
</body>
<script>
    function zoomout(){
        var div1=document.getElementById("div1");
        div1.style.width="200px";
        div1.style.height="200px";
    }
    function zoommin(){
        var div1=document.getElementById("div1");
        div1.style.width="100px";
        div1.style.height="100px";
    }

（3）鼠标按下/弹起onmousedown onmouseup

<divid="div1"onmousedown="zoomout()"onmouseup="zoommin()"on></div>

（4）鼠标移入或离开onmouseenter onmouseleave会阻止冒泡

    <styletype="text/css">
        #div1{
            width:100px;
            height:100px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div id="div1"onmouseenter="blue()"onmouseleave="yellow()"on></div>
</body>
<script>
    function blue(){
        var div1 = document.getElementById("div1");
        div1.style.backgroundColor="blue";
    }
    function yellow(){
        var div1 = document.getElementById("div1");
        div1.style.backgroundColor="yellow";
    }

（5）onmouseover onmouseout与（4）比较相似，也有区别

当时用onmouseenter事件时，当里层的div触发进入事件时，处理完了就完事了（阻断冒泡）；而使用onmouseover事件时，当里层的div触发进入事件时，处理完了还会冒泡给父容器处理进入事件。

<styletype="text/css">
        #div1{
            border:1px solid blue;
        }
        #div2{
            width:100px;
            height:100px;
            background-color:red;
            margin:20px0 20px20px;
        }
    </style>
<body>
<div id="div1">
    <div id="div2"></div>
</div>
</body>
<script>
    var div1=document.getElementById("div1");
    var div2=document.getElementById("div2");
    /*div1.onmouseenter= enter1;
    div2.onmouseenter = enter2;*/
    div1.onmouseover=enter1;
    div2.onmouseover=enter2;
    function enter1(){
        alert("进入div1");
    }
    function enter2(){
        alert("进入div2");
    }
</script>

（6）鼠标移动事件onmousemove

图片跟着鼠标移动

    <styletype="text/css">
        #div1{
            width:100px;
            height:100px;
            background-color:red;
        }
        #img1{
            position:absolute;
            top:0;
            left:0;
        }
    </style>
</head>
<body>
    <img id="img1" src=" "alt=""/>
    <div id="div1" onmousemove="move(event)"></div>
鼠标的坐标<p id="p1"></p>
</body>
<script>
    function move(e){
        var p1=document.getElementById("p1");
        p1.innerText= e.clientX+","+ e.clientY;
        var img1=document.getElementById("img1");
        img1.style.left=e.clientX+"px";
        img1.style.top=e.clientY+"px";
    }

键盘事件

（1）keypress

<inputid="what"type="text" onkeypress="search(event)"/>

function search(e){
    if(e.keyCode == 13){
        var what = document.getElementById("what");
        alert("开始搜索:"+what.value);
    }
}

keyCode属性记录了按下的键的编码
keyCode只能捕获可打印字符的按键，不能捕获诸如shift，ctrl，alt等键但是可以通过shiftKey，ctrlKey等属性判断在击键的同事是否按下了shift、ctrl等辅助键。

function search(e){
    alert(e.keyCode);
    if(e.shiftKey){
        alert("shift键也被按下了");
    }
    if(e.ctrlKey){
        alert("ctrl键也被按下了");
    }
}

（2）keydown，keyup可以捕获任意键（个别除外）

<inputid="what"type="text" onkeydown="keydown(event)"/>

function keydown(e){
alert(e.keyCode);
}

用上下左右移动图片

<imgid="img1"src="man.png" alt=""/>

var top1=0;
var left =0;
function move(e) {
    switch (e.keyCode) {
        case 37:
            left-= 5;
            break;//左
        case 38:
            top1-= 5;
            break;
        case 39:
            left+= 5;
            break;
        case 40:
            top1+= 5;
            break;
    }
    var img1 =document.getElementById("img1");
    img1.style.left=left + "px";
    img1.style.top=top1 + "px";
}

总结：

（1）使用变量top到时上下移动失败，原因是和window.top这个全局变量冲突了，换个变量名就好了。

（2）还有在这里可以使用全局变量。如果把变量写到函数里，就只能移动一次。原因是函数内部的局部变量是在每次调用该函数是都会重新创建并初始化，也就是说每一次调用left和top1的值都是0，不会保留上一次的值。

其他事件

onload，页面加载

onfocus，获得焦点

onblur，失去焦点

<inputid="text1"type="text" onfocus="focus1()"onblur="blur1()"/>

function focus1(){
    var text1 = document.getElementById("text1");
    text1.style.backgroundColor="blue";
}
function blur1(){
    var text1 = document.getElementById("text1");
    text1.style.backgroundColor="red";
}

onchange

3 事件的注册

三种方法：

（1）使用onXXX属性，比如onclick="方法名()"

（2）通过js去设置元素的onXXX属性

（3）通过addEventListener

//注册事件的第二种方法
var text1=document.getElementById("text1");
text1.onblur = blur2;
//注册事件的第二种方法
text1.addEventListener("change",function(){
alert("值改变了");
});

后两种方法有何好处：

将页面的内容、样式和行为分离，内容和样式可能是美工人员去完成，行为（实际上就是hs的内容）往往是程序员的事。分离后利于分工合作。

第三种方式addEventListeren的第一个参数是事件名，第二个参数是处理函数，可以添加事件监听，当然也可以移除，用的是removeEventListeren，参数与add是一样的。而企业可通过addEventListeren与removeEventListeren甚至可以去动态额注册不同的事件处理程序。

10.4捕获与冒泡

<styletype="text/css">
    #div1{
        width:100px;
        height:100px;
        background-color:red;
    }
</style>

<divid="div1">
<p id="p1">捕获与冒泡</p>
</div>

如果文字被单击了，先提示段落被单击了，在提示div被单击了，因为div是父容器，单击文字也就是单击div，所以两者都会触发这个事件。如果点击文字之外的框，提示div被单击了。

但是如何去规定两个事件的处理顺序呢？这就是事件的冒泡和捕获

冒泡：按照从内到外的顺序依次相应触发：默认方式。

捕获：与冒泡相反。

p1.addEventListener("click",click1);
div1.addEventListener("click",click2,true);

当然，程序员可以根据自己的需要阻断冒泡

stopPropagation();

阅读全文

0 0