事件处理程序

最新推荐文章于 2024-08-16 19:02:09 发布

想成为工程师的菜鸟

最新推荐文章于 2024-08-16 19:02:09 发布

阅读量110

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_46177396/article/details/109704191

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

事件处理程序

冒泡事件：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档)
注意：IE9以上支持
事件捕获：由不太具体的节点更早的接收事件，而最具体的节点应该最后接收

4种事件处理程序

HTML事件处理程序
DOM0级事件处理程序
DOM2级事件处理程序
IE事件处理程序

1、HTML事件处理程序(不推荐）

<input type="button" value="点击" onclick="alert('点击成功')" />

缺点：HTML与js无分离，后期不易维护

2、DOM0级事件处理程序（只处于冒泡阶段）

<body>
    <div id="box">点我试试</div>
    <script>
        var box = document.getElementById("box");
        box.onclick = function(){
            alert('你还真点了')
        }
        // box.onclick = null   //删除事件处理程序
    </script>
</body>

优点：1.简单 2.具有跨浏览器的优势
缺点：不能给同一个元素来绑定相同的事件处理程序，如果绑定了，会有覆盖现象

3、DOM2级事件处理程序
( 解决了DOM0级事件的缺点)
注意：IE9以下不支持

addEventListner(事件名，处理程序的函数，布尔值）
removeEventListner(事件名，处理程序的函数，布尔值)
布尔值默认为false是处于冒泡阶段，如果为true是处于捕获阶段

<body>
    <div id="box">点我试试</div>
    <script>
        var box = document.getElementById("box");
       box.addEventListener('click',function(){
           alert('响应DOM2级事件')
       },false)
    </script>
</body>

监听函数传参，可以用匿名函数包装一个监听函数

添加事件监听者

<body>
    <div id="box">点我试试</div>
    <script>
        var box = document.getElementById("box");
        function test(x){
            alert(x)
        }
        box.addEventListener('click',function(){
            test('成功添加事件监听者')
        },false)
    </script>
</body>

移除事件的方式

<body>
    <div id="box">点我试试</div>
    <script>
        var box = document.getElementById("box");
       function handeler(){
           this.innerHTML += 1;
       }
    //    先添加再移除
       box.addEventListener('click',handeler,false);
       box.removeEventListener('click',handeler,false); // 移除事件
    </script>
</body>

4、IE 事件处理程序
attachhEvent() // 添加事件
detachEvent() //移除事件

如果给同一个元素来绑定相同的事件处理程序是倒序执行，DOM2级是顺序执行；
移除事件与DOM2级一样。
attachEvent() 内部的 this 指向了window

5、事件绑定的兼容性写法
DOM2级事件处理程序 addEventListener() IE8不支持，IE attchEvent()

<body>
    <input id="btn" type="button" value="点我试试">
    <script>
        // attachEvent()内部的this指向了window,要对this的指向也做了兼容
        var btn = document.getElementById("btn");

        addEvent(btn, 'click', function () {
            console.log(this.value);
        })
        // 全浏览器事件处理程序的兼容性代码
        function addEvent(target, eventType, handler) {
            if (target.addEventListener) {
                target.addEventListener(eventType, handler, false)
            } else {
                target.attachEvent('on' + eventType, function () {
                    handler.call(target);
                });
            }
        }
    </script>

想成为工程师的菜鸟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件处理程序

事件处理程序冒泡事件：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档)注意：IE9以上支持事件捕获：由不太具体的节点更早的接收事件，而最具体的节点应该最后接收4种事件处理程序HTML事件处理程序DOM0级事件处理程序DOM2级事件处理程序IE事件处理程序1、HTML事件处理程序<input type="button" value="点击" onclick="alert('点击成功')" />缺点：HTML与js无分离，后期不易维护2、D
复制链接

扫一扫

专栏目录