jQuery 事件_ZenDei技術網路在線

事件註冊單個事件註冊語法: $('div').click(function () { 處理的事情 })$('div').click(function () { $(this).css('backgroundColor', 'red') });$('div').mouseenter(function ... ...

事件註冊

單個事件註冊

語法: $('div').click(function () { 處理的事情 })

$('div').click(function () {
   $(this).css('backgroundColor', 'red') });

$('div').mouseenter(function () {
    $(this).css('backgroundColor', 'black')  })

事件處理

on 綁定事件

因為普通註冊事件方法的不足，jQuery又創建了多個新的事件綁定方法bind() / live() / delegate() / on()等，其中最好用的是: on()

可以綁定1個或者多個事件

$('div').on({
    click: function () {
      pass},

    mouseenter: function () {
      pass }
 })

如果處理的事件是相同的

$('div').on("mouseenter mouseleave", function () {
    $(this).toggleClass('current') })

on 實現事件委托(委派)

$('ul').on('click', 'li', function () {
    alert('111') })

on 可以動態給未來創建的元素添加事件

$('ol').on('click', 'li', function () {
    alert(222)
})
var li = $('<li>lo的li</li>')
$('ol').prepend(li)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .current {
            background-color: purple;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div></div>
    <ul>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
    </ul>
    <ol>

    </ol>
    <script>
        $(function () {
            // 1. 單個事件
            $('div').click(function () {
                $(this).css('backgroundColor', 'red')
            });
            $('div').mouseenter(function () {
                $(this).css('backgroundColor', 'black')
            })

            $('div').on({
                click: function () {
                    pass
                },
                mouseenter: function () {
                    pass
                }
            })

            // 2. 事件處理， 可以綁定1個或者多個
            $('div').on({
                click: function () {
                    $(this).css('backgroundColor', 'red')
                },
                mouseenter: function () {
                    $(this).css('backgroundColor', 'blue')
                },
                mouseleave: function () {
                    $(this).css('width', '300px')
                }
            })

            // 2.1 如果處理程式相同
            $('div').on("mouseenter mouseleave", function () {
                $(this).toggleClass('current')
            })

            // 2.2 on可以實現事件委托（委派）
            $('ul').on('click', 'li', function () {
                alert('111')
            })

            // 2.3 on 可以給為來動態創建的的元素綁定事件
            $('ol').on('click', 'li', function () {
                alert(222)
            })
            var li = $('<li>lo的li</li>')
            $('ol').prepend(li)

        })


    </script>
</body>

</html>

示例代碼

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        ul {
            list-style: none
        }

        .box {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }

        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }

        ul {
            width: 450px;
            padding-left: 80px;
        }

        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
            display: none;
        }

        input {
            float: right;
        }

        ul li a {
            float: right;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>

        $(function () {
            $('.btn').on('click', function () {
                var li = $('<li></li>')
                li.html($('.txt').val() + "<a href='javascript:;'> 刪除</a>")
                $("ul").prepend(li);
                li.slideDown(); // 下滑
                $('.txt').val('')
            })

            $('ul').on('click', 'a', function () {
                $(this).parent().slideUp(function () {  // 上滑
                    $(this).remove();
                });
            })

        })

    </script>
</head>

<body>

    <div class="box" id="weibo">
        <span>微博發佈</span>
        <textarea name="" class="txt" cols="30" rows="10"></textarea>
        <button class="btn">發佈</button>
        <ul>
        </ul>
    </div>
</body>

</html>

案例-微博

off 事件解除

全部解除

 $('div').off()

解除某一項事件

$('div').off('click')

解除事件委托

$('ul').off('click', 'li')

只運行一次事件

$('p').one('click', function () {
    console.log('one');

})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            $('div').on({
                click: function () {
                    console.log('click');
                },
                mouseover: function () {
                    console.log('mouseover');
                }
            })

            $('ul').on('click', 'li', function () {
                console.log('li');

            })

            // 1. off div身上的全部程式解綁
            $('div').off()

            // 1.1 off 解除某一項事件
            $('div').off('click')

            // 1.3 off 解除事件委托
            $('ul').off('click', 'li')

            // 2. one() 但是它只能觸發事件一次
            $('p').one('click', function () {
                console.log('one');

            })


        })


    </script>
</head>

<body>
    <div></div>
    <ul>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
    </ul>
    <p>我是屁</p>
</body>

</html>

示例代碼

自動觸發事件

jQuery 為我們提供了兩個自動觸發事件 trigger() 和 triggerHandler() ;

元素.事件()

$('div').click()

元素.trigger("事件")

$('div').trigger('click')

元素.triggerHandler("事件") 就是不會觸發元素的預設行為

$("input").triggerHandler("focus");

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            $('div').on('click', function () {
                alert(111)
            })

            // 自動觸發事件
            // 1. 元素.事件()
            $('div').click()

            // 2. 元素.trigger("事件")
            // $('div').trigger('click')
            // $('input').trigger('focus')

            // 3. 元素.triggerHandler("事件") 就是不會觸發元素的預設行為
            // $('div').triggerHandler('click')
            // $("input").on("focus", function () {
            //     $(this).val("你好嗎");
            // });
            $("input").triggerHandler("focus");


        })


    </script>
</head>

<body>
    <div></div>
    <input type="text">
</body>

</html>

示例代碼

事件對象

語法:

e 就是事件對象

$('div').on('click', function (e) {
    pass
 )}

e.stopPropagation() // 阻止事件冒泡
e.preventDefault() // 阻止預設行為

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            $(document).on('click', function () {
                console.log('點擊了document');

            })

            $('div').on('click', function (e) {
                console.log('點擊了DIV');
                // console.log(e);
                e.stopPropagation() // 阻止事件冒泡
                e.preventDefault() // 阻止預設行為

            })



        })
    </script>
</head>

<body>
    <div></div>
</body>

</html>

示例代碼

對象拷貝

$.extend([deep], target, obj1, [objN])

deep： true為深拷貝， false為淺拷貝
target：要拷貝的目標對象
obj1：待拷貝的第一個對象的對象
objN：待拷貝的第N對象的對象
淺拷貝：拷貝的是記憶體引用，修改目標對象會影響被拷貝對象
深拷貝：是完全克隆，不會影響被拷貝對象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            // 1
            // var targetObj = {};
            // var obj = {
            //     id: 1,
            //     name: "andy"
            // };
            // $.extend(targetObj, obj);
            // console.log(targetObj);

            // 2
            // var targetObj = {
            //     id: 0
            // };
            // var obj = {
            //     id: 1,
            //     name: "andy"
            // };

            // $.extend(targetObj, obj);
            // // 會覆蓋targetObj 裡面原來的數據
            // console.log(targetObj);

            // 3
            var targetObj = {
                id: 0,
                msg: {
                    sex: '男'
                }
            };
            var obj = {
                id: 1,
                name: "andy",
                msg: {
                    age: 18
                }
            };
            // 淺拷貝
            $.extend(targetObj, obj);
            console.log(targetObj);  // 會覆蓋targetObj 裡面原來的數據， 包括 msg 裡面的數據  msg: {age: 20}
            targetObj.msg.age = 20;  // 淺拷貝添加 msg.age = 20
            console.log(targetObj);  // msg: {age: 20}
            console.log(obj);  // 被拷貝對象也會改變 msg: {age: 20}

            // 深拷貝
            $.extend(true, targetObj, obj);
            console.log(targetObj);  // 完全複製一份給目標對象 如果裡面有不衝突的屬性,會合併到一起 
            targetObj.msg.age = 20;
            console.log(targetObj); // msg :{sex: "男", age: 20}
            console.log(obj); // {age: 18}  被拷貝對象不變


        })
    </script>
</head>

<body>

</body>

</html>

示例代碼

插件

懶載入

懶載入只需引入html 和 js操作即可，此插件不涉及css。

引入js

<script src="js/EasyLazyload.min.js"></script>
<script>
   	lazyLoadInit({
   		showTime: 1100,
   		onLoadBackEnd: function(i, e) {
     		console.log("onLoadBackEnd:" + i);
   		},
   		onLoadBackStart: function(i, e) {
     		console.log("onLoadBackStart:" + i);
   		}
 	});
</script>

引入html

 <img data-lazy-src="upload/floor-1-3.png" alt="">