jQuery--代理


<html>

            <head>

             </head>

                      <body>

                        <button id="btn1">按钮1</button>

                        <button id="btn2">按钮2</button>

                        <button id="btn3">按钮3</button>

                        <select class="" name="">

                        <option value="iPhone">iPhone</option>

                        <option value="iPad">iPad</option>

                       </select>

                    </body>
/*引入jQuery*/
<script src="jquery-2.2.3.js" charset="utf-8"></script>

<script type="text/javascript>

    $(function (){

// 给按钮绑定事件

// 可以通过群组选择器选出多个元素，并且可以同时添加事件

// 可以同时给元素绑定多个事件，只需要在on()的第一个参数的位置添加事件类型，中间使用空格分隔，即可

//     $('#btn1, #btn2').on('click mouseover mouseout', function (e) {

//     使用on()方式绑定的事件的回调中，内部的this为触发该方法的原生DOM对象。

//    如果需要使用，建议转为JQ元素，后续使用JQ方法

//    var $this = $(this);

//     $this.html('button');

//

//     每次函数被调用，都会产生一个事件对象，就是函数的参数e，并且JQ已经出了兼容的问题

//     通过e.type就可以获取事件类型

//    console.log(e.type);

//    console.log(e);

// });

// 移除事件

// $('#btn1, #btn2').off('mouseover mouseout');

// 绑定一次事件

// $('#btn3').one('click', function () {

//    console.log(this);

// });

// $('#btn1').on('click mouseover', function (e) {

//    if (e.type == 'click') {

//        console.log('click');

//    } else if (e.type == 'mouseover') {

//        console.log('mouseover');

//    }

// });

// 如果给一个按钮绑定多个事情的时候，可以给on()方法传递一个对象，方法类型和对于的函数以键值对的方式传入

// $('#btn1').on({

//    'click': function () {

//        console.log('click');

//    },

//    'mouseover': function () {

//        console.log('mouseover');

//    }

// });



// 简化事件的绑定

$('#btn1').click(function () {

console.log('click');

});

$('#btn2').mouseout(function () {

console.log('dblclick');

});

$('select').change(function () {

console.log(this.value);

});

// 浏览器大小发生改变

$(window).resize(function () {

console.log('fads');

});

});

</script>

</html>
jQuery--代理

推荐阅读更多精彩内容
