JavaScript 事件

最新推荐文章于 2020-10-04 15:44:37 发布

Reagan_

最新推荐文章于 2020-10-04 15:44:37 发布

阅读量471

点赞数

分类专栏： JavaScript web

本文链接：https://blog.csdn.net/Reagan_/article/details/81563109

版权

web 同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

JavaScript

28 篇文章 0 订阅

订阅专栏

事件

如何绑定事件处理函数：

1.ele.onxxx = funcyion(event){}

兼容性很好，但是一个元素的同一个事件上只能绑定一个处理程序
基本等于写在HTML行间上

2.obj.addEventListener(type,fn,false);

IE9以下不兼容，可以为一个事件绑定多个处理程序

3.obj.attachEvent(‘on’+type,fn);

IE独有，一个事件同样可以绑定多个处理程序

4.小练习

举例详细说明前三个属性：
1.例如：

<body>
    <div style = "width:100px;height:100px;background-color:red;"></div>
    <script type="text/javascript">
        var div = document.getElementsByTagName('div')[0];
        div.onclick = function() {
            console.log('a');
        }
        div.onclick = function() {
            console.log('b');
        }
    </script>
</body>

此时一个元素的一个事件绑定了两个处理程序，是不会同时生效的，后面的会覆盖前面的。

2.三个参数（事件类型，处理函数，false）
例子：

<body>
    <div style = "width:100px;height:100px;background-color:red;"></div>
    <script type="text/javascript">
        var div = document.getElementsByTagName('div')[0];
        div.addEvenListener {'click',function() {
            console.log('a');
        },false);
        div.addEvenListener {'click',function() {
            console.log('b');
        },false);        

    </script>
</body>
//a b

此时一个元素的一个时间可以绑定多个处理程序，而且会按照顺序进行;同一个函数不可以绑定多次。

3.两个参数（’on’+事件类型，处理函数）；
例子：

<body>
    <div style = "width:100px;height:100px;background-color:red;"></div>
    <script type="text/javascript">
        var div = document.getElementsByTagName('div')[0];
        div.attachEven {'onclick',function() {});

    </script>
</body>
//a b

一个元素的一个事件可以绑定多个处理程序，而且会按照顺序进行;同一个函数可以绑定多次。

4.练习：

<ul>
    <li>a<li>
    <li>a<li>
    <li>a<li>
    <li>a<li>
</ul>

使用原生js，addEventListener,给每个li元素绑定一个click事件，输出他们的顺序。

<body>
    <ul>
    <li>a<li>
    <li>a<li>
    <li>a<li>
    <li>a<li>
    </ul>
    <script type="text/javascript">
        var liCol = document.getElementsByTagName('li');
            len = liCol.length;
        for(var i = 0;i < len;i++) {  //会形成闭包，此时需要用立即执行函数
            (function(i){
                liCol[i].addEvenListener('click',function() {
                    console.log(i);
                },false);
            }(i))
        }

    </script>
</body>
1 2 3 4

对此题目的思考：要注意绑定事件，一但事件出现在了循环里面，就要注意有没有形成闭包。

事件处理程序的运行环境：

1.ele.onxxx = funcyion(event){}

程序this指向是dom元素本身

2.obj.addEventListener(type,fn,false);

程序this指向是dom元素本身

3.obj.attachEvent(‘on’+type,fn);

程序this指向window

4.封装兼容性的addEvent(elem,type,handle);方法，来处理不同浏览器的兼容方法（addEvent：给一个dom对象添加一个该事件类型的处理函数）

<body>
    <div style = "width:100px;height:100px;background-color:red;"></div>
    <script type="text/javascript">
     function addEvent(elem,type,handle) {
        if(elem.addEventListener) {
            elem.addEvenListener(type,handle,false);
        }else if(elem.attachEvent) {
            elem.attachEvent('on' + type,function() {
                handle.call(elem);
                })
            }else{
                elem['on'+type] = handle;
            }
    }
    </script>
</body>