JavaScript---事件绑定 (多种方式、传递参数）

事件绑定方式：将对html元素或窗口的操作绑定给响应函数的方式。共四种方式

  • Html级别绑定
  • 符合DOM0  级的事件绑定方式
  • 符合DOM2

Html级别绑定

无法设置事件流

<script>
    function a(){
        //好的习惯，把整个网页上所有的事件绑定程序，聚集在一个函数中
        alert("nihao");
    }
</script>
<input type="button" value="html级别绑定方式" onclick="a()" />

 

符合DOM0  级的事件绑定方式

将响应程序直接赋值给dom元素的事件属性。这是DOM最早版本的事件绑定方式，被所有浏览器兼容

无法设置事件流

1、是用普通函数作为响应程序

document.getElementById("btn1").onclick = sayHellow;    不要带（）, 带着（）表示直接调用·

<h2>DOM0级别的绑定方式</h2>
<input type="button" id="btn1" value="DOM0级别的绑定方式" />
<script>
    window.onload=function(){
        document.getElementById("btn1").onclick = sayHellow; //注意不要带（）
    }
    
    function sayHellow(){
        alert("hi==")
    }
</script>

  

2、是用匿名函数作为响应程序

document.getElementById("btn2").onclick = function(){ alert("hi："+this.id) }
或者
document.getElementById("btn2").onclick = _ => console.log("hi123ID："+this);  //参考我的博客：JavaScript箭头函数（Lambda表达式）

 弹出 ： btn1

特点：

  1. 在响应函数中this代表目标元素(当前的button对象)
  2. 不符合DOM2标准，无法设定事件流
  3. 无法直接传递参数，但可以通过其他方式传递
  4. 对同一个事件只能绑定一个响应函数，最后绑定的响应函数会执行
  5. 通过 obj.onxx = null 可以解除绑定。

总结：可以使用匿名函数或普通函数作为响应函数

 

传递参数的方式：

 

传递参数的方法1 ---将参数 作为属性赋 给事件源

<input type="button" id="btn3" workerNum=987 value="属性传递参数" />

document.getElementById("btn3").onclick = function(){
            alert("hi："+this.getAttribute("workerNum"));
        }

 

传递参数方法2

使用绑定函数，专门设置一个函数，实现两重调用（绑定）

 

        <input type="button" id="btn4" workerNum="==属性参数==" value="动态绑定事件并传递参数" />

        //绑定函数
        bindEvent(document.getElementById("btn4"),"onclick",onclickWorker,"btn=123");
        
        //响应函数
        function  onclickWorker(wNum){ alert("工号为："+ wNum); }
        
        //执行事件绑定，将参数传给事件源
        function bindEvent(dom, eventType , fun ,args){
            dom[eventType] = handleEvent;
            function handleEvent(){ //闭包
                fun.call(this,args);  //给响应函数的 this 指针赋值为 dom
            }
        }

其实综合起来就是一句话：document.getElementById("btn4")["onclick"]= _ => onclickWorker("99999”);

 

传递参数方法3

JS中的call、apply、bind方法详解

符合DOM2级别的事件绑定方式：（不兼容）

绑定后可以设定事件流的顺序，顺序为绑定顺序。

格式：addEventListener("eventType",callback,use-capture);

  1. eventTye：事件名称。 click 省略on
  2. callback：事件处理方法
  3. use-capture：false-->冒泡阶段/ture-->捕获阶段。

ps:大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器

 

//浏览器可以自动传入一个对象 event对象
/*document.getElementById("outerDiv").addEventListener("click" , function(){
        //执行语句
})*/ //匿名函数方式
                
document.getElementById("outerDiv").addEventListener("click" ,handleEvent ); //绑定函数方式

 

特点 ：

可以使用匿名函数或普通函数

响应函数中this代表目标函数

可以设定事件流

无法传递参数，通过其他方式传递

对同一个事件可以绑定多个形影函数，响应函数执行顺序依据绑定顺序

建议使用jquery 的on方法 解决绑定函数兼容方式

1、可以传递参数

2、实现了事件委托

3、on方法可以实现事件流控制

4、在一般的浏览器都兼容

 

出处：https://my.oschina.net/u/2991733/blog/800883

 

=======================================================================================

JavaScript绑定事件的方法[3种]

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定"事件处理函数"。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。

在JavaScript中，有三种常用的绑定事件的方法：

  1. 在DOM元素中直接绑定；
  2. 在JavaScript代码中绑定；
  3. 绑定事件监听函数。

一. 在DOM元素中直接绑定

一. 在DOM元素中直接绑定这里的DOM元素，可以理解为HTML标签。JavaScript支持在标签中直接绑定事件，语法为：
    onXXX="JavaScript Code"

其中：

  • onXXX 为事件名称。例如，鼠标单击事件 onclick ，鼠标双击事件 ondouble，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
  • JavaScript Code 为处理事件的JavaScript代码，一般是函数。


例如，单击一个按钮，弹出警告框的代码有如下两种写法。

1. 原生函数

?
1
<input  onclick="alert('谢谢支持')"  type="button"  value="点击我，弹出警告框" />

 2. 自定义函数

?
1
2
3
4
5
6
<input  onclick="myAlert()"  type="button"  value="点击我，弹出警告框" />
<script type="text/javascript">
function myAlert(){
    alert("谢谢支持");
}
</script>

 

2. this在第一种绑定方式中的用法。this作为形式参数

?
 
<input  type='button' onclick='ClickOn(this)'>
function ClickOn(self){
  //self 就代指当前点击的标签
}

 

实例：

?
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="点我" onclick="myClick(this)"/>
    <script>
        function myClick(ths){
        ths.style.backgroundColor="red";
    }
    </script>
</body>
</html>

 效果：

 

 

 

二. 在JavaScript代码中绑定

在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。

在JavaScript代码中绑定事件的语法为：
elementObject.onXXX=function(){     // 事件处理代码 }

其中：

  • elementObject 为DOM对象，即DOM元素。
  • onXXX 为事件名称。


例如，为 id="demo" 的按钮绑定一个事件，显示它的 type 属性：

 

?
1
2
3
4
5
6
<input  id="demo"  type="button"  value="点击我，显示 type 属性" />
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
    alert(this.getAttribute("type"));  //  this 指当前发生事件的HTML元素，这里是<input>标签
}
</script>

 

 this在第二种绑定方式中的应用： 

?
1
2
3
4
5
6
7
<input id='i1' type='button'>
 
document.getElementById('i1').onclick=function(){
 
this // 这里的this代指当前点击的标签
 
}

 

三. 绑定事件监听函数

 绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

addEventListener()函数语法：
elementObject.addEventListener(eventName,handle,useCapture);

addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数。

参数说明
elementObject DOM对象（即DOM元素）。
eventName 事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。
handle 事件句柄函数，即用来处理事件的函数。
useCapture Boolean类型，是否使用捕获，一般用false 。true:捕获模型；false：冒泡模型


useCapture: false,  true 的实例效果探索

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #main{
    background-color:red;
    width:300px;
    height:400px;
    }
    #content{
    background-color:pink;
    width:150px;
    height:200px;
    }
</style>
<body>
 
    <div id="main">
        <div id="content"></div>
    </div>
    <script>
        var mymain=document.getElementById("main");
        var mycontent=document.getElementById("content");
        mymain.addEventListener("click",function(){console.log("main")},false);
        mycontent.addEventListener("click",function(){console.log("content")},false);
 
    </script>
</body>
</html>

 

 false 效果，从内往外出来，所以是content先出来：

 

true效果，从外往内出来，所以是main先出来：

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #main{
    background-color:red;
    width:300px;
    height:400px;
    }
    #content{
    background-color:pink;
    width:150px;
    height:200px;
    }
</style>
<body>
 
    <div id="main">
        <div id="content"></div>
    </div>
    <script>
        var mymain=document.getElementById("main");
        var mycontent=document.getElementById("content");
        mymain.addEventListener("click",function(){console.log("main")},true);
        mycontent.addEventListener("click",function(){console.log("content")},true);
 
    </script>
</body>
</html>

 效果图：

 

 

 

出处：https://www.cnblogs.com/momo8238/p/7449437.html

=======================================================================================

JavaScript 事件属性绑定带参数的函数

在JavaScript中，为了实现表现和控制相分离，可以通过0级的DOM事件属性或者2级的事件模型来实现，不过这两者在针对某个事件类型调用相应的事件句柄的时候，不能给事件句柄提供参数，也就是说，事件属性的值只能是一个函数引用。
例如不能采用以下这种调用方式：
element.onclick = test();
element.onclick = test(arg1,arg2);
只能通过：element.onclick = function(){ ... }; 
或者element.onclick = test这种方式来实现，所以无法给函数传递参数。
参考了大量的网上资料，解决这个问题的方式，以代码为例，如下所示：

 

function Handler() {};
Handler.prototype = {
    /*
     * 把eventType类型的事件绑定到element元素，并使用handler事件句柄进行处理
     * 兼容 IE 及 Firefox 等浏览器
     *
     * @param element 在其上注册事件的对象（Object）
     * @param eventType 注册的事件类型（String），不加“on”
     * @param handler 事件句柄（Function）
     */
    registerEvent: function(element, eventType, handler) {
        if (element.attachEvent) { //2级DOM的事件处理
            element.attachEvent('on' + eventType, handler);
        } else if (element.addEventListener) {
            element.addEventListener(eventType, handler, false);
        } else { //0级DOM的事件处理
            element['on' + eventType] = handler;
        }
    },
    /*
     * 获得带参数的事件句柄的引用
     *
     * @param obj 需要绑定事件处理函数的所有者，null 表示 window 对象
     * @param func 需要绑定的事件处理函数名
     * @param ... 第三个参数开始为绑定事件处理函数的参数，由 0 到多个构成
     */
    bind: function(obj, handler) {
        obj = obj || window;
        var args = [];
        for (var i = 2; i < arguments.length; i++) {
            args.push(arguments[i]);
        }
        return function() {
            handler.apply(obj, args)
        };
    }
}可能是使用方式为：

function show(txtObj) {
    alert(txtObj.value);
    txtObj.focus();
    txtObj.select();
}
window.onload = function() {
    var handler = new Handler();
    handler.registerEvent($("txt"), "change", handler.bind(null, show, $("txt"))); //采用2级事件模型的方式
    //$("txt").onchange = handler.bind(null,show,$("txt"));//JavaScript事件属性的方式
}

 

 
 

您可能感兴趣的文章:

 

出处：https://www.jb51.net/article/17463.htm

====================================================================================

功能优化

根据上面的提示，我自己进行了优化，用在自己的项目上。

方便使用，接口方法统一，优化后的代码如下：

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

<body>
 
 <input type="text" id='txt' placeholder="请输入关键词" />
 <input type="button" id="btn1" value="绑定事件函数()" />
 <input type="button" id="btn2" value="绑定事件函数(参数)" />
 
<script>
    
    function Handler() {};
    Handler.prototype = {
        /* 
         * 把eventType类型的事件绑定到element元素，并使用handler事件句柄进行处理
         * 兼容 IE 及 Firefox 等浏览器
         *
         * @param element 在其上注册事件的对象（Object）
         * @param eventType 注册的事件类型（String）
         * @param fun 事件句柄（Function）
         */
        registerEvent: function(element, eventType, fun) {
            eventType = (eventType.toLowerCase().startsWith("on")?"":"on")+eventType;
            var args = [element,fun];
            for (var i = 3; i < arguments.length; i++) {
                args.push(arguments[i]);
            }
            handler = this.bindFun.apply(null,args);
            if (element.attachEvent) { //2级DOM的事件处理 
                element.attachEvent(eventType, handler);
            } else if (element.addEventListener) {
                element.addEventListener(eventType.substring(2), handler, false);
            } else { //0级DOM的事件处理 
                element[eventType] = handler;
            }
        },
        /* 
         * 获得带参数的事件句柄的引用
         *
         * @param obj 需要绑定事件处理函数的所有者，null 表示 window 对象
         * @param func 需要绑定的事件处理函数名
         * @param ... 第三个参数开始为绑定事件处理函数的参数，由 0 到多个构成
         */
        bindFun: function(obj, handler) {
            //console.log(this);
            obj = obj || window;
            var args = [];
            for (var i = 2; i < arguments.length; i++) {
                args.push(arguments[i]);
            }
            return function() {
                handler.apply(obj, args)
            };
        }
    }

    //使用方式为：
    function show(txtObj) {
        var str="normal";
        str=txtObj?.id;
        for (var i = 1; i < arguments.length; i++) {
            str+="\r\n"+arguments[i];
        }
        alert(str);
        //txtObj.focus();
        //txtObj.select();
    }
    window.onload = function() {
        var handler = new Handler();
        var dom=document.getElementById("txt");
        handler.registerEvent(dom, "onchange", show, dom,0,1,2,3);  //采用2级事件模型的方式 
        //dom.onchange = handler.bindFun(null,show,dom,'1111',"aa");  //JavaScript事件属性的方式 
        
        dom=document.getElementById("btn1");
        handler.registerEvent(dom, "click", show, dom);
        dom=document.getElementById("btn2");
        handler.registerEvent(dom, "click", show,dom,1,2,3,4,5);
    }
 
</script>
</body>
</html>
View Code

 

posted on 2021-01-27 09:36  jack_Meng  阅读(20318)  评论(0)  编辑  收藏  举报

导航