                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础(三)—事件篇

关于jQuery事件的问题

<!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看不懂啊感觉好乱啊

一家之煮

2017-01-12

源自：jQuery基础(三)—事件篇 2-1

关注问题我要回答

1082

操作

收起

4 回答

慕小葉回答被采纳 +3 积分
2017-01-12

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

你可以看成是这样

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

alert(e.data);

});

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

我是这样理解的。

0 回复有任何疑惑可以回复我~

收起回答

我就叫李二毛
2017-01-12

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

0 回复有任何疑惑可以回复我~

收起回答

我就叫李二毛
2017-01-12

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的模仿块级作用域的知识。

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

5 回复有任何疑惑可以回复我~

收起回答

一家之煮提问者

textContent和text（）还有content（）有什么区别啊

2017-01-12 回复有任何疑惑可以回复我~

一家之煮提问者

还有最后为什么还要调用下函数a啊就是最后的那个a（）

2017-01-12 回复有任何疑惑可以回复我~

我就叫李二毛回复一家之煮提问者

textContent 属性设置或返回指定节点的文本内容，以及它的所有后代。这是属性； text() 方法设置或返回被选元素的文本内容。这是jq的方法。 content（）有这个方法吗？因为 function a() { $("button:eq(2)").click(1111, data) } 在 a 的函数里面啊。默认没调用。你调用了，点击才会去调用data函数啊。

2017-01-12 回复有任何疑惑可以回复我~