JavaScript事件

Posted falling-maple

tags:

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

javascript中事件,指的是用户和网页发生交互时的一些行为,例如:鼠标点击、按下键盘按键、鼠标移动,这些行为就称之为事件,事件发生时,我们的程序也应该提供对应的处理方法。

1 事件监听

我们需要先监视网页上用户的这些行为,这样,当行为发生的时候,我们才能提供相应的处理方法,如果不监视,就无法获得用户的这些行为。

1.1 html事件监听

<div onclick="changeColor()">这是一个段落</div>   // 点击变红
<script>
    function changeColor(){
        // 事件处理程序
        var oDiv = document.getElementsByTagName(‘div‘)[0];
        oDiv.style.color = ‘red‘;
    }
</script>

1.2 DOM0级事件监听

<div>这是一个段落</div>
<script>
    var oDiv = document.getElementsByTagName(‘div‘)[0];
    oDiv.onmouseover = function(){
        oDiv.style.color = ‘green‘;     // 鼠标移入,变绿色
    }
    oDiv.onmouseout = function(){
        oDiv.style.color = ‘red‘;       // 鼠标移出,变红色
    }
</script>

1.3 DOM2级事件监听

通过DOM对象.addEventListener(),针对主流浏览器(ie9+ Chrome、Firefox登录),非主流浏览器(IE6、7、8)使用attachEvent方法进行绑定。

通常在使用DOM2级事件绑定程序的时候,先判断一下是否是主流浏览器。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>DOM2级事件</title>
    <style type="text/css">
        #outer{width: 100px; height: 100px; border: 1px solid red;}
    </style>
</head>
<body>
<div id="outer"></div>
<script>
    var oDiv = document.getElementById(‘outer‘);
    // 主流浏览器
    if(window.addEventListener){
        // 参数1:事件类型
        // 参数2:事件发生时执行的函数
        // 参数3:是否使用捕获。false不捕获(冒泡),true 捕获
        oDiv.addEventListener("mouseover", function(){
            oDiv.style.backgroundColor = ‘pink‘;
        }, false);
        oDiv.addEventListener("mouseout", function(){
            oDiv.style.backgroundColor = ‘orange‘;
        }, false);
    }else{
        // 非主流浏览器(IE6、7、8)
        // 参数1:事件类型(on)
        // 参数2:事件发生时执行的函数
        oDiv.attachEvent("onmouseover", function(){
            oDiv.style.backgroundColor = ‘pink‘;
        });
        oDiv.attachEvent("onmouseout", function(){
            oDiv.style.backgroundColor = ‘orange‘;
        });
    }
</script>
</body>
</html>

2 事件分类

2.1 鼠标事件

以上是关于JavaScript事件的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段12——JavaScript的Promise对象

30秒就能看懂的JavaScript 代码片段

是否可以使用 Javascript 在音频文件中找到一段无声的片段?

常用Javascript代码片段集锦

Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -> PhoneWindow -> DecorView -> ViewGroup )(代码片段

48个值得掌握的JavaScript代码片段(上)