zoukankan      html  css  js  c++  java
  • 事件的绑定

    实现事件的绑定,一般情况下都是使用onclick等方式实现,但是使用

    使用对象.事件 = 函数的形式绑定响应函数,
    * 它只能同时为一个元素的一个事件绑定一个函数,
    * 不能绑定多个,如果绑定了多个,则后边会覆盖前边的。
    * 如果实现绑定多个,则可以用addEventListener()实现或者attachEvent(IE8版本以下)则可以用addEventListener()

    * 通过这个方法可以为元素绑定响应函数
    * - 参数
    * 1、事件的字符串 ,不要on
    * 2、回调函数,当事件触发时,该函数会被调用
    * 3、是否在捕获阶段触发事件,需要一个布尔值,一般都传fasle
    *
    * 使用addEventListener可以为一个元素的相同事件同时绑定多个响应函数,
    * 这样子被触发时,响应函数将会按照函数的绑定顺序执行。
    * 这个方法不支持IE8以下浏览器

     btn01.addEventListener('click',function(){
    alert(1)
    },false)
    btn01.addEventListener('click',function(){
    alert(2)
    },false)

    *
    * 在IE8中可以使用attachEvent来绑定事件
    * 参数:
    * - 事件的字符串,要on
    * - 回调函数
    * - 这个方法也可以同时为一个事件绑定多个响应函数,
    * 不同的是后绑定先执行,执行顺序和addEventListener顺序相反。

    btn01.attachEvent("onclick",function(){
    alert(1)
    });

    *
    * 但是addEventListener兼容普通浏览器(不兼容IE8以下),而attachEvent兼容IE8(不兼容普通浏览器),
    * 所以为了解决兼容性问题:
    * 定义一个函数,用来指定元素绑定响应函数。
    * addEventListener中的this,是绑定事件的对象
    * attachEvent中的this中的this,是window
    * 需要统一两个方法的this
    *
    * 参数:
    * obj 要绑定事件的对象
    * eventstr 事件的字符串
    * callback 回调函数
    *
    */

    为了兼容以上所有的浏览器的话,则需要自己写一个绑定函数去解决这个问题。

    以下是实现方式:

    bind(btn01,'click',function(){
        alert(this)
    });
                    
    function bind(obj,evenstr,callback){
        if(obj.addEventListener){
        //大部分浏览器兼容的方式   
    obj.addEventListener(evenstr,callback,false) }else{ //IE8及以下 //统一this的话,需要统一成button调用 /*attachEvent是window调用的 * this由谁调用方式决定 * callback.call(obj) */
    obj.attachEvent("on"+evenstr,function(){ //在匿名函数中调用回调函数,就可以改变this对象了 callback.call(obj) }) }
  • 相关阅读:
    neutron外网介绍
    oracle时间转换问题汇总
    redhat72普通用户计划任务实现守护进程
    Rabbitmq消息持久化
    rabbitmq消息流转分析
    Rabbitmq基本概念
    protobuf传文件存入oracle
    X32指令自动委托
    IT系统上线事宜
    可转债业务玩法
  • 原文地址:https://www.cnblogs.com/caicaihong/p/9317657.html
Copyright © 2011-2022 走看看