关于jQuery事件的问题

来源:2-1 jQuery鼠标事件之click与dbclick事件

一家之煮

2017-01-12 15:56

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .test2 {
        background: #bbffaa;
    }
    .test3 {
        background: yellow;
    }
    .test2,.test3{
        border: 1px solid red;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>.click()方法</h2>

    <h4>测试一</h4>
    <button>元素绑定事件,弹出回调中的this</button>
    <script type="text/javascript">
        //this指向button元素
        $("button:eq(0)").click(function() {
        	alert(this)
        })
    </script>



    <h4>测试二</h4>
    <div class="test2">
        <p>$('button:first').click(function(e) {alert(this)})</p>
    </div>
    <button>指定触发事件</button>
    <script type="text/javascript">
        $('p').click(function(e) {
            alert(e.target.textContent)
        })
        //this指向button元素
        $("button:eq(1)").click(function() {
            $('p').click() //指定触发绑定的事件
        })
    </script>



    <h4>测试三</h4>
    <div class="test3">
        <p>$('.right').click(1111, set)</p>
    </div>

    <button>不同函数传递数据</button>
    <script type="text/javascript">

        //不同函数传递数据
        function data(e) {
            alert(e.data) //1111
        }

        function a() {
            $("button:eq(2)").click(1111, data)
        }
        a();

    </script>




</body>

</html>

   alert(e.target.textContent)  测试2中的这个代码什么意思啊

function data(e) {
           alert(e.data) //1111
       }

       function a() {
           $("button:eq(2)").click(1111, data)
       }
       a();

测试3看不懂啊  感觉好乱啊



写回答 关注

4回答

  • 慕小葉
    2017-01-12 16:27:41
    已采纳

     alert(e.target.textContent)  弹框显示你鼠标移上的元素的文本内容

    你可以看成是这样

    $("button:eq(2)").click(1111,function(e){

        alert(e.data);

    });

    就是给第三个button添加一个click事件,点击的时候,把click()中的第一个参数传入data中,然后弹框显示。

    我是这样理解的。

  • 我就叫李二毛
    2017-01-12 16:47:41

    我本来还想挣个最佳回答的。。。。结果晚了一步。。。

  • 我就叫李二毛
    2017-01-12 16:46:46

     target 属性规定哪个 DOM 元素触发了该事件。 e.target是引发事件的元素。 所以第二段代码中的 e.target就是p元素。e.target.textContent就是弹出p标签的中的文本内容。

    function data(e) {   //定义一个函数 data。传入参数e。
               alert(e.data) //1111  弹出,e.data
           }

           function a() {   //定义函数a
               $("button:eq(2)").click(1111, data)

        //  点击按钮,传入1111(注意这个传入的1111是click函数里的eventData,这个是返回绑定当前事件处理函数时传递的附加数据。其类型取决于在绑定当前事件处理函数时所传入的附加数据的类型。),因为后面的data没有带括号,所以这是一个赋值操作,测试三的函数部分其实可以这样写。

      function a() {  
               $("button:eq(2)").click(1111, function data(e) { 
               alert(e.data) 
           }
     }
    这样就很明显了。 e.data 就是1111.

           a(); //调用a 方法。
    ------------------------------------------------------补充一点---------------------------------------------

    function fun(){
       return 5
    }
    var a=fun  // fun代表函数。
    var b=fun()  //fun()代表函数的返回值。

    JS中我们把以上代码加粗的部分叫做函数,函数是一种叫做function引用类型的实例,因此函数是一个对象。对象是保存在内存中的,函数名则是指向这个对象的指针。

    var a = fun 表示把函数名fun这个指针拷贝一份给变量a,但是这不是指函数本身被复制了一份。
    就好比,地图上上海市(对应函数对象)只有一个,但指向上海市的路标(对应指针)有很多,而且你还可以继续添加(复制)无数个指向上海市的路标,但上海市本身不会被复制。


    如果函数名后面加上圆括号就表示立即调用(执行)这个函数里面的代码(花括号部分的代码)。

    另外函数声明和函数表达式在私有作用域写法方面也会在函数体后面加圆括号表示立即调用这个函数,题主可以参看JS的模仿块级作用域的知识。

    上面这段是我复制 知乎大神的,方便你的理解,哈哈,谢谢。

























    慕函数596...

    有点没明白,那个click(1111,data)这里的data指的是一个函数嘛

    2017-02-02 20:52:47

    共 4 条回复 >

  • 七戒0
    2017-01-12 16:30:08

    e只是参数,任意取值;对应即可;e.target 是目标对象

jQuery基础(三)—事件篇

jQuery第三阶段开启事件修炼,掌握对页面进行交互的操作

89997 学习 · 625 问题

查看课程

相似问题