Onclick参数传递

onclick参数传递,包括this,event

onclick参数

onclick调用参数必须有意义,比如this,event,3,’22’等
参数可以写在任意位置,包括this,event
实质:onclick中定义的直接是js语句,所以类似this/this.value,event/evnet.preventDefault()等是合法的;

event对象及参数传递:

  1. e只是个形参,并没有e,会error;
    而event如果直接输出,在chrome,ie11中是undefined;ff中是error;
    如果是在事件句柄中,无论chrome,还是ff,此时就会得到一个event对象

  2. 浏览器兼容
    在ff中,调用的时候需要以参数 event的形式传入;函数声明时,形参可以是e。
    chrome和ie,需要用window.event
    通用的兼容写法 var e=e||window.event;

  3. 事件句柄函数中也可以传递参数;默认第一个参数是event。
    onclick调用时,不用传递event参数,函数声明时默认第一个就是event对象,可以直接调用

  4. addEventListener回调函数中event对象要以第一个参数传递

  5. jQuery中on/click/bind…,应该是和addEventListener是相同的,需要event对象的时候,需要以第一个参数传递
<button onclick="test(3)" value="button">btn</button>
<button onclick="test(this.value)" value="btn2">btn2</button>
<a onclick="testE(this,23)" href="#">test e</a>
<a onclick="testE(23,this)" href="#">test参数顺序</a>
<a onclick="event.preventDefault()" href="#">test evnet对象</a>

<a id="taga"  href="#">test jquery</a>


<script>
    function test(v){
        console.log(v)
    }
    function testE(node,v,e){
        console.log(node)
        console.log(v)
        console.log(e);
        //var e=e||window.event;
        var e=window.event;
        e.preventDefault();
        console.log('test evnet',e);
    }

    taga.addEventListener('click',function(a,e){
        console.log(e);
        console.log(a);
        a.preventDefault();
    });


    function fn1(ev){// 测试第三条   
        console.log(ev)
    }
    fn1(1)// 1
    document.onclick=fn1 // event对象
</script>
knowledge is no pay,reward is kindness
0%