JS event self-built function bind() and solution to compatibility issues-JS Tutorial-php.cn

JS event self-built function bind() and solution to compatibility issues

angryTom

Release： 2019-12-30 17:51:18

forward

2395 people have browsed it

Common methods for JavaScript event binding

1. Object.Event = Function;

It can only bind one response function to an event of an object at the same time

Cannot bind multiple, if there are multiple, the latter will overwrite the previous one

2. addEventListener()

This method can also bind a response function to the element

Parameters:

● The string of the event ( Without on)

● Callback function, executed when the event is triggered

● Whether to trigger the event during the capture phase, generally pass false

Use this method to set the value of an element Bind multiple response functions to the same event

When the event is triggered, execute

3, attachEvent()

IE8 and The following browsers do not support the addEventListener() method, but you can use the attachEvent() method to achieve the same effect

● Parameters:

Event string (with on)

● Callback function

This method can also bind multiple functions, but the function execution order is opposite to addEventListener()

4. This problem and solution

This in addEventListener() is the object of the bound event

This in attachEvent() is window

If you want to solve the compatibility problem, you need to unify the this of the two methods

Here we use the call() method

call() can be used to change the this of the function

Self-built function bind()

Define a function to bind an event to an object

● Idea

Three parameters: object, event, callback function

● Compatibility:

Use if to determine whether the object has an addEventListener method to distinguish the browser

● Solution to this problem

Since the incoming callback function is called by the browser, we cannot operate it. So we do not directly pass in the callback function in attachEvent(), but first define an anonymous function, then call the callback function inside the function, and use the call method to change this

Sample code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function(){
                var btn1 = document.getElementById("btn1");
            
                bind(btn1, "click",function(){
                    alert(this);
                });
                
            };
            //定义一个函数bind()，用来为指定元素绑定事件响应函数
                /*
                 * 参数：
                 *  obj 要绑定事件的对象
                 *  eventStr 事件的字符串
                 *  func 回调函数
                 */
            function bind(obj, eventStr, func){
                //判断是否有addEventListener()方法
                if(obj.addEventListener){
                    //大部分浏览器兼容的方式
                    obj.addEventListener(eventStr, func, false);
                }
                else{
                    //IE8及以下    注意 on
                    //obj.attachEvent("on"+eventStr, func);//此方法this为window下面提供解决方法
                    
                    //统一this 不直接调用func而是在匿名函数内调用
                    obj.attachEvent("on"+eventStr, function(){
                        //在匿名函数内调用回调函数 利用call()方法将this改为obj
                        func.call(obj);
                    });
                }
            };  
        </script>
    </head>
    <body>
        <button id="btn1">btn1</button>
    </body>
</html>

Copy after login

This article comes from the js tutorial column, welcome to learn!

The above is the detailed content of JS event self-built function bind() and solution to compatibility issues. For more information, please follow other related articles on the PHP Chinese website!