javascript事件的概念和时间监听_js监听时间变化-优快云博客

本文链接：https://blog.youkuaiyun.com/old_man31/article/details/86778279

本文深入讲解JavaScript中的事件概念，包括事件流、冒泡型与捕获型事件的区别，以及如何通过return false改变HTML元素的默认行为。同时，文章详细介绍了不同浏览器下事件监听的实现方法，如IE和标准DOM中的事件监听与取消监听的具体语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--事件的概念和时间监听
事件的概念
javascript使我们有能力创建动态页面，网页中打每个元素都可以产生某些可以触发javascript函数的事件
我们可以认为事件可以被js侦测到的一种行为。

事件流：
事件流，主要分为2种，冒泡型和捕获型事件。
ie只支持冒泡型，支持标准DOM浏览器比如火狐，chrome两者都支持。
从内部一层层往外冒出来，直到没有onclick为止。

使用返回值改变html元素的默认行为
HTML元素大都包含了自己的默认行为，例如，超链接，提交按钮等，我们可以通过绑定事件中加上return false来阻止他的默认行为

通用型打事件监听方法：

    绑定HTML元素属性
<input type="button" value="clickMe" onclick="check(this)"/>
    绑定DOM对象的属性
   document.getElementById('btn1').onclick=test;//不用括号，否则就是调用函数了。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<a href="http://www.baidu.com" onclick="test1()">点击我</a>
<a href="http://www.baidu.com" onclick=" return false">点击我</a>
阻止元素的默认行为
<input type="button" value="测试1" id="mytest1">
<button type="button" id="test2"><b>测试2</b></button>
input和button的区别是button可以通过其他的标签进行修饰。

<script>
    function test1() {
        alert('绑定HTML属性')
    }
//    绑定HTML元素属性，当触发onclick属性，就去调用这个函数
    //    好处：通用型，不管什么浏览器都兼容。
    //    缺点：javascript中改变函数名称时，HTML中就需要一起改，无法做到隔离和分离。

 function test2() {
        alert('绑定DOM对象属性')


    }
    document.getElementById('test2').onclick=test2;
    //函数是通过调用后才会解析，而上面查找元素的语句没有放在函数中，因此javascript从上到下会解析到，
    // 此时如果将此放在head里，无法找到test2,从而报错。因此必须放到后面，</body>前.
    //可以做到函数与html界面分离。
</script>
</body>
</html>


以下介绍非通用型事件监听方法：

IE中事件的监听方法
[object].attachEvent（‘事件类型’，‘处理函数’）;//添加监听
[object].detachEvent（‘事件类型’，‘处理函数’）;//取消监听
IE事件类型与标准DOM区别：
IE事件类型“on”开头，比如“onclick”。“onmousemove”等，
而后者不需要，去掉‘on’，就是‘click’，‘mousemove’



标准DOM中的时间监听方法
[object].addEventListener（‘事件类型’，‘处理函数’，‘冒泡事件或者捕获事件’）;//添加监听 //true开启捕获型事件，false开启冒泡型
[object].removeEventListener（‘事件类型’，‘处理函数’，‘冒泡事件或者捕获事件’）;//添加监听


IE中添加监听和取消监听的方法，如下
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>

    function show() {
        alert('hello, ie');

    }

    //此时会出现错误，如何让html加载完成后，不出现错误呢？有以下2种方法可以解决：
    // 1、将script移动到html正文后面，</body>之前。
    // 2、如果不移动则增加一个函数。当整个页面加载完成后调用函数及里面的语句。
    window.function(){
        document.getElementById('test1').attachEvent("onclick",'show()');
        document.getElementById('test2').onclick=function () {
            document.getElementById('test1').detachEvent("onclick",'show()');

        };
    };
</script>
</head>
<body>
<input type="button" value="测试1" id="test1">
<button type="button" id="test2"><b>测试2</b></button>
</body>
</html>

//标准DOM中添加监听事件和解除监听事件打方式。
-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function show() {
            alert('hello , chrome');
        }
        window.function () {
            var test1=document.getElementById('test1');
            var test2=document.getElementById('test2');
            test1.addEventListener('click',show,false);
            //此处函数需要加引号和括号吗？
            // test2.onclick=function () {
            //     test1.removeEventListener('click',show,false);
            //     };
            //两种方式
            test2.addEventListener('click',function () {
                test1.removeEventListener('click',show,false)

            },false);
        }

    </script>



</head>
<body>
<input type="button" value="测试1" id="test1">
<button type="button" id="test2"><b>测试2</b></button>
</body>
</html>