jQuery 事件

事件注册

• 单个事件注册

语法: $('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 = $('
lo的li
')
$('ol').prepend(li)

en">


    UTF-8">
    name="viewport" content="width=device-width, initial-scale=1.0">
    X-UA-Compatible" content="ie=edge">
    
    
    



    

    

        
我们都是好孩子
        
我们都是好孩子
        
我们都是好孩子
        
我们都是好孩子
        
我们都是好孩子
    
    


    
    

示例代码

en">
    UTF-8">
    
    
    
    




    
class="box" id="weibo">
        微博发布
        name</span>="<span style="color: rgb(139, 0, 0);"></span>" <span style="color: rgb(0, 0, 255);">class</span>="<span style="color: rgb(139, 0, 0);">txt</span>" cols="<span style="color: rgb(139, 0, 0);">30</span>" rows="<span style="color: rgb(139, 0, 0);">10</span>">
        class="btn">发布
        

        
    

案例-微博

off 事件解除

• 全部解除

 $('div').off()

• 解除某一项事件

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

• 解除事件委托

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

• 只运行一次事件

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

})

en">


    UTF-8">
    name="viewport" content="width=device-width, initial-scale=1.0">
    X-UA-Compatible" content="ie=edge">
    
    
    
    



    

    

        
我们都是好孩子
        
我们都是好孩子
        
我们都是好孩子
    
    
我是屁

示例代码

自动触发事件

jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;

• 元素.事件()

$('div').click()

• 元素.trigger("事件")

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

• 元素.triggerHandler("事件") 就是不会触发元素的默认行为

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

en">


    UTF-8">
    name="viewport" content="width=device-width, initial-scale=1.0">
    X-UA-Compatible" content="ie=edge">
    
    
    
    



    

    text">

示例代码

事件对象

语法:

e 就是事件对象

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

• e.stopPropagation() // 阻止事件冒泡
• e.preventDefault() // 阻止默认行为

en">


    UTF-8">
    name="viewport" content="width=device-width, initial-scale=1.0">
    X-UA-Compatible" content="ie=edge">
    
    
    
    



    

示例代码

对象拷贝

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

• deep： true为深拷贝， false为浅拷贝
• target： 要拷贝的目标对象
• obj1： 待拷贝的第一个对象的对象
• objN：待拷贝的第N对象的对象
• 浅拷贝：拷贝的是内存引用，修改目标对象会影响被拷贝对象
• 深拷贝：是完全克隆，不会影响被拷贝对象

en">


    UTF-8">
    name="viewport" content="width=device-width, initial-scale=1.0">
    X-UA-Compatible" content="ie=edge">
    
    
    

示例代码

插件

懒加载

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

• 引入js

• 引入html

 upload/floor-1-3.png" alt="">

相关资料: https://github.com/1515806183/html-code/tree/master/jQuery-03