如何绑定事件处理函数

最新推荐文章于 2023-10-14 10:05:50 发布

Eli-sun

最新推荐文章于 2023-10-14 10:05:50 发布

阅读量455

点赞数

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

本文链接：https://blog.csdn.net/vfjcgg/article/details/104859310

版权

JavaScript 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

如何绑定事件处理函数

1.ele.onXXX=function(event){}
兼容性很好，但是一个元素的同一个事件上只能绑定一个处理程序
基本等同于写在HTML行间上

var div = document.getElementsByTagName('div')[0];
        // 句柄
        div.onclick = function() {
            this.style.backgroundColor = 'purple';
        }

2.obj.addEventListener(type,fn,false);
div.addEventListener(事件类型，处理函数，false);
IE9以下不兼容，可以为一个事件绑定多个处理函数

//div.addEventListener(事件类型， 处理函数， false);
        div.addEventListener('click', function() {
            console.log('a');
        }, false);
        div.addEventListener('click', function() {
            console.log('b');
        }, false);

3.obj.attachEvent(‘on’+type,fn);
div.addEventListener(事件类型，处理函数，false);
IE 独有，一个事件同样可以绑定多个处理程序

// div.attachEvent('on' + 事件类型, 处理函数);
        div.attachEvent('onclick', function() {
            console.log('a');
        });

小练习：
参见神马笔试题
用addEventlistener()绑定事件实现ul中有四个li点击之后打印出他们的顺序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
    </ul>
    <script>
        // 绑定事件一定要记住闭包问题，
        var liCol = document.getElementsByTagName('li'),
            len = liCol.length;

        for (var i = 0; i < len; i++) {
            (function(i) {
                liCol[i].addEventListener("click", function() {
                    console.log(i);
                }, false)
            }(i))
        }
    </script>
</body>

</html>

Eli-sun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何绑定事件处理函数

如何绑定事件处理函数1.ele.onXXX=function(event){}兼容性很好，但是一个元素的同一个事件上只能绑定一个处理程序基本等同于写在HTML行间上var div = document.getElementsByTagName('div')[0]; // 句柄 div.onclick = function() { th...
复制链接

扫一扫